前回の「準備編」で開発の準備が整いました。
今回は自動生成された「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でドロワーを制御するため、以下の修正を加えます。- ActivityをActionBar対応する
- ドロワーを制御する
- アプリアイコンを変更する
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つです。
- Activity
- DrawerLayout
- Drawer用アイコン(ダウンロードした画像)のリソースID
- オープン用のリソースID
- クローズ用のリソース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