Navigation Drawer

Developer SiteでNavigation Drawerの学習をしたので覚え書き。オリジナルサイトのコピペ。

Layoutの宣言

DrawerLayoutを宣言して、その中でメインコンテンツとして表示するLayoutとNavigation Drawer内に表示するレイアウトを定義する。

layout.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">
    <!-- メインコンテンツ -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- Navigation Drawerに表示するレイアウト -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

• メインコンテンツ(content_frame)は最初の要素として記述し、layout_width, layout_heightともにmatch_parentを指定する。
• Navigation Drawer(left_drawer)にはandroid:layout_gravity属性を定義し、RTL言語対応のためleftではなくstartを指定する。
• Navigation Drawerのlayout_widthは320dpを超さないように指定する

Navigation Drawerのイベント取得

上記のlayoutのleft_drawerはListViewで宣言しているのでListView.OnItemClickListenerでクリック・イベントを取得することができる。

また、Navigation Drawerが開いた際と閉じた際のイベントを取得するにはDrawerLayout.DrawerListenerを実装する。ActivityがActionBarを持っている場合はActionBarDrawerToggle(DrawerListenerを実装している)を拡張し、イベントを取得し、ActionBarとNavigation Drawerの連携を実装することができる。

MainActivity.java

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        // ActionBarDrawerToggleを作成
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* 表示しているActivity */
                mDrawerLayout,         /* DrawerLayout */
                R.drawable.ic_drawer,  /* ABのcaretの代わりに表示する画像ID */
                R.string.drawer_open,  /* アクセシビリティ用の文言 */
                R.string.drawer_close  /* アクセシビリティ用の文言 */
                ) {
            // 閉じた時のイベント
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu();
            }
            // 開いた時のイベント
            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu();
            }
        };

        // ActionBarDrawerToggleをリスナー登録
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        // ABのUpボタン表示
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // onRestoreInstanceState後のトグル状態をシンク
        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);
    }