2013年7月31日水曜日

Support v7 の Action Barを使ったナビゲーションドロワー実装 (実装編)

チームEGGの赤峰です。

前回の「準備編」で開発の準備が整いました。
今回は自動生成された「Drawer」プロジェクトに修正を加え簡単なナビゲーションドロワーを作成します。




完成イメージ



1.マニフェスト変更

アクションバーをActivityに適応させるためにstyleの変更を行います。
  • Holoベースの場合…『Theme.AppCompat』
  • Holo.Lightベースの場合…『Theme.AppCompat.Light』
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.egg.drawer"
    android:versionCode="1"
    android:versionName="1.0" >
    <!--Android 2.2以上を指定 -->
    <uses-sdk
        android:minSdkVersion="8" 
        android:targetSdkVersion="17" />
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat.Light" >
        <activity
            android:name="com.egg.drawer.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

2.レイアウトの変更

Activityに設定するレイアウトXMLの修正を行います。
  • android.support.v4.widget.DrawerLayoutを持つレイアウトを定義
    • idを定義
    • ドロワーの最初の子Viewにメインコンテンツ用のViewを定義
  • メインコンテンツViewの定義
    • layout_width, layout_heightにmatch_parentを指定
  • ドロワー表示用レイアウトをDrawerLayoutの子Viewとして加える
    • idを定義
    • ドロワーのlayout_widthは240dp~320dpを指定
    • 左から表示させる場合は、layout_gravityにstartを指定
    • 背景色の指定 (Lightスタイルを指定したので、白ベースのカラーコードを定義)
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <!-- メインコンテンツ領域 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    <!-- ドロワー領域 -->
    <LinearLayout
        android:id="@+id/drawer"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fafafa"
        android:orientation="vertical" >
        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="button1" />
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

3.Activityの変更

Activityでドロワーを制御するため、以下の修正を加えます。
  1. ActivityをActionBar対応する
  2. ドロワーを制御する
  3. アプリアイコンを変更する

1.ActivityをActionBar対応する

Actionbarに対応させるために継承クラスをActionBarActivityに変更します。
ActionBarActivityを利用するためandroid.support.v7.app.ActionBarActivityをインポートします。
ActionBarActivityを継承したことで、画面左端からスワイプすると
ナビゲーションドロワーが表示されるようになります。
package com.egg.drawer;

import android.support.v7.app.ActionBarActivity;

public class MainActivity extends ActionBarActivity {
   ....
}


2.ドロワーを制御する

ナビゲーションドロワー関連の処理はActionBarActivityで、
基本処理は実装されているため不足している処理を追加します。
ドロワー内のボタンが押された場合に、ドロワーを閉じる処理を追加します。
public class MainActivity extends ActionBarActivity {
    /** ドロワーレイアウト */
    private DrawerLayout mDrawerLayout;
    /** ドロワー用View */
    private View mLeftDrawer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mLeftDrawer = findViewById(R.id.drawer);
        // ボタンイベント
        mLeftDrawer.findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.closeDrawers(); // ドロワーを閉じる
              }
        });
    }
}

3.アプリアイコンを変更する

ActionBarDrawerToggle を利用しドロワー特有のアプリアイコンに変更します。
Drawer用アイコンは以下のリンクからダウンロードして下さい。


アプリアイコンのタップでドロワーのオープン・クローズを行うように実装します。
ActivityのonCreate()メソッドでActionBarDrawerToggleのオブジェクトを生成します。
ActionBarDrawerToggleのコンストラクターに指定する引数は以下の5つです。
  1. Activity
  2. DrawerLayout
  3. Drawer用アイコン(ダウンロードした画像)のリソースID
  4. オープン用のリソースID
  5. クローズ用のリソースID

アプリアイコンのクリックを有効化するためにActionBarに以下をセットします。
  • setDisplayHomeAsUpEnabled(true)
  • setHomeButtonEnabled(true)

Toggleを利用するためandroid.support.v4.app.ActionBarDrawerToggleをインポートします。
import android.support.v4.app.ActionBarDrawerToggle;
...

public class MainActivity extends ActionBarActivity {
    ...
    /** ドロワートグル */
    private ActionBarDrawerToggle mDrawerToggle;
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        // ドロワー用トグル生成
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_oepn, R.string.drawer_close) {
            @Override
            public void onDrawerClosed(View view) {
                supportInvalidateOptionsMenu();
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                supportInvalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        // アプリアイコンのクリック有効化
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);

    }
}


Activityの通知の一部をActionBarDrawerToggleに通知しUp画像からドロワー画像に変更します。
...

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // 生成
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // 画面切り替え
        mDrawerToggle.onConfigurationChanged(newConfig);
    }
}


アプリアイコンのタップをドロワーのオープン・クローズとして処理します。
...

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // アプリアイコンタップ
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}


以上で、Support v7を利用したナビゲーションドロワーが実装できます。

ナビゲーションドロワーを正しく実装するためには、
Androidデザインのナビゲーションドロワーを参考にしてください。


サンプルコード

今回ご紹介したサンプルコードをアップしました。
https://bitbucket.org/mobaegg/android_drawer

2013年7月26日金曜日

Support v7 の Action Barを使ったナビゲーションドロワー実装 (準備編)

チームEGGの赤峰です。

いよいよアクションバーが公式サポートされました。
Support v7での対応になるのでAndroid 2.2以上が対象となります。

まずは、Actionbarを使うための準備を行います。

1.サポートライブラリの更新

Android SDK Managerを起動し、
Extras > Android Support Libraryにチェックを入れインストールをします。



ダウンロードが完了すると『appcompat』フォルダーが生成されます。
『appcompat』がアクションバーを実装するのに必要なライブラリプロジェクトです。
SDKフォルダ > extras > android > support > v7

※『appcompat』をライブラリプロジェクトとして利用するため、任意のフォルダーにコピーしてください。




2.「appcompat」のライブラリプロジェクト化

アクションバーを利用するためには、「appcompat」をライブラリプロジェクトとして参照する必要があります。
Eclipseを起動し、 Appcompatを読み込みます。
File > New > Other > Android > Android Project from Existing Code





Import Projectsウィザードが起動したら「Browse...」を選択し、
1.でコピーした用意した『appcompat』フォルダを選択し、「Finish」を選択します。
 【注意】※SDK内の「appcompat」は利用しないようにしてください






この手順まで完了するとActionBar用のライブラリプロジェクトがワークスペースに生成されます。




3.「appcompat」のライブラリ読み込み

次は、作成するプロジェクトに「appcompat」をライブラリとして取り込みます。
今回はナビゲーションドロワーを作成するため以下のプロジェクトとして作成しています。

  • プロジェクト名:「Drawer」
  • パッケージ名:「com.egg.drawer」

この「Drawer」プロジェクトに先ほど作成した「appcompat」ライブラリを取り込みます。
「Drawer」プロジェクトのPropertiesを開き、Androidを選択します。

画面下のLibrary内にある「Add...」を選択し、「appcompat」プロジェクトを選択します。
「OK」を選択すると「Drawer」プロジェクトが「appcompat」プロジェクトを読み込むことができます。





ライブラリとして取り込んだプロジェクトにjarファイルが重複していると実行時にエラーが表示されます。
そのため、最後に「Drawer」プロジェクトのlibsに入っているサポートライブラリを削除します。




以上で「準備編」の完了です。
次回、「実装編」に続きます。

2013年7月24日水曜日

『マルチタイマー』をリリースしました。

チームEGGの赤峰です。

Androidアプリの『マルチタイマー』をリリースしました。
今回は新しいAndroid技術を取り入れたアプリになっています。

Google Play: 『マルチタイマー』

【機能】
・ストップウォッチ
・カウントダウン
・マルチ ストップウォッチ
・マルチ カウントダウン
・ランキングタイマー


【特徴】
・Android 3.0以降のHoloテーマ
・ナビゲーションドロワーの実装
・カードUI導入
・デザインガイドラインにそったアプリ開発

ナビゲーションドロワー

Holoテーマ

カードUI



今後も機能追加していく予定です。
欲しい機能やご要望があれば気軽に連絡ください。

Androidデザイン翻訳サイトもよろしく!
Android デザイン 翻訳 by チームEGG