【Android】スライドして表示されるメニュー

Gmailやpocketやアンサーなどで採用されている、
横からスライドして表示されるメニュー（NavigationDrawer）の
基本的な実装方法です。

NavigationDrawerは、Androidのサポートパッケージに含まれている
DrawerLayoutを使って実現します。

xmlファイル

まず、NavigationDrawerは、Layoutのxmlファイルで導入します。
その際に以下のようにいくつか注意点があります。

• DrawerLayoutはルートビュー（一番外）にする。
• コンテンツ部分のlayout_heightとlayout_widthはmatch_parentにする。
• ドロワー部分のlayout_heightはmatch_parent、layout_widthは240dp以上320dp以内にする。
• ドロワー部分のlayout_gravityにleft（start）またはrightを指定する。

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- コンテンツ部分 -->

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world" />
    </LinearLayout>

    <!-- ドロワー部分 -->

    <LinearLayout
        android:id="@+id/drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left" >

        <!-- ここではFragmentをセットするためのLayoutをいれてみる -->

        <LinearLayout
            android:id="@+id/fragmentMenu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFFFF"
            android:orientation="vertical" />
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

ActionBarDrawerToggleの実装

実装は、ActionBarDrawerToggleを使えばラクチンです。
表示設定やコールバックなどを簡単に実装することができます。

MainActivity.java

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// ホームアイコン横のHomeAsUpアイコンを有効に。HomeAsUpアイコンは後述のドロワートグルで上書き。
		getActionBar().setDisplayHomeAsUpEnabled(true);

		//ナビゲーションドロワーの設定
		mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
		//第三引数でHomeAsUpアイコンを指定。
		//第四・第五引数は、String.xmlで適当な文字列を。
		mDrawerToggle = new ActionBarDrawerToggle(this, mDrawer,
				R.drawable.ic_navigation_drawer, R.string.open,
				R.string.close) {
			
			//閉じた時に呼ばれる
			@Override
			public void onDrawerClosed(View drawerView) {
			}

			//開いた時に呼ばれる
			@Override
			public void onDrawerOpened(View drawerView) {
			}

			//アニメーションの処理。Overrideする場合はスーパークラスの同メソッドを呼ぶ。
			@Override
			public void onDrawerSlide(View drawerView, float slideOffset) {
				super.onDrawerSlide(drawerView, slideOffset);
			}

			//状態が変化した時に呼ばれる。
			// 表示/閉じ済み -> 0
			// ドラッグ中 -> 1
			// ドラッグを開放た後のアニメーション中 ->2
			@Override
			public void onDrawerStateChanged(int newState) {
			}
		};	 
		mDrawer.setDrawerListener(mDrawerToggle);

		//ここではドロワーにMenuFragmentをセットしてみる
		menuFragment = new MenuFragment();
		getSupportFragmentManager().beginTransaction().add(R.id.fragmentMenu, menuFragment).commit();
	}

その他に必要な処理の実装

ActionBarDrawerToggleを使う場合は、
Activity/ActionBarのいくつかのメソッドをオーバーライドし、
ActionBarDrawerToggleに状態変化等を伝える必要があります。

MainActivity.java

	@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) {
	 
	    // ActionBarDrawerToggleにドロワーメニューを渡す。コレが無いと開閉しない。
	    if (mDrawerToggle.onOptionsItemSelected(item)) {
	        return true;
	    }
	    return super.onOptionsItemSelected(item);
	}

おまけ

ドロワーのメニューアイコンはここからダウンロードできます。

「アプリに合わせて色を変えたい！」といった場合はここで。
各dpiのpngファイルを生成することができます。