Android Design Support Library全解：Part 3 NavigationView 抽屜菜單頁面

Android Design Support Library系列第三彈，NavigationView 抽屜菜單的實現

左側彈出菜單

抽屜菜單頁面是一中很常見的頁面設計，雖然有很多第三方庫（SlidingMenu）來幫助我們實現該功能，但是如果自己來實現的話，確實是很麻煩的工作。在Android Design Support Library中，谷歌官方提供了NavigationView來幫助我們輕松地實現抽屜導菜單頁面。

如果讀者在使用Android Design Support Library之前有過開發抽屜菜單的開發經驗就會知道，之前都是在DrawerLayout中自定義ListView或是LinerLayout來展示內容達到效果，現在只需要在DrawerLayout中加入NavigationView就能實現抽屜菜單的效果。布局如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <!-- 添加內容部分 -->
    <include layout="@layout/content_layout"/>

    <!-- Navigation view -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer_view"/>

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

其中對于NavigationView有三個屬性很關鍵：

  • app:menu：表示菜單中的內容，是一個Item的列表，我們創建一個標準的menu文件即可；
  • app:headerLayout – 抽屜菜單的頭部，展示背景圖片和相關文字；
  • android:layout_gravity 代表菜單彈出的方向，必須要設置，一般可以設置Start從x軸始端，也就是左側彈出，或者是End, 從x軸末端的方向，也就是右側側彈出。

在抽屜菜單中添加內容有兩種方法：

  1. 在設計時利用提前準備好的menu文件添加菜單內容；
  2. 在運行時利用代碼動態添加菜單內容。

在下文中，兩種情況都會都為大家介紹。

利用menu文件

第一步，創建menu文件

創建帶有menu內容的想XML文檔（drawer_view.xml），其內容如下：

<group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_drawer_home"
            android:title="@string/nav_home" />
        <item
            android:id="@+id/nav_about"
            android:icon="@drawable/ic_drawer_about"
            android:title="@string/nav_about" />
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_drawer_settings"
            android:title="@string/nav_settings" />

        <item
            android:id="@+id/navigation_subheader"
            android:title="@string/nav_sub_header">
            <menu>
                <item
                    android:id="@+id/navigation_sub_item_1"
                    android:icon="@drawable/ic_drawer_about"
                    android:title="@string/nav_sub_item_1" />
                <item
                    android:id="@+id/navigation_sub_item_2"
                    android:icon="@drawable/ic_drawer_home"
                    android:title="@string/nav_sub_item_2" />
            </menu>
        </item>
    </group>
</menu>

注意，對于menu，可以通過設定屬性**android:checkableBehavior **來定義菜單選項的響應模式：

  • single – 只有一個Item能被選中(類似radio buttons)；
  • all – 所有的Item都可以被選中(類似checkboxes)；
  • none –沒有Item能被選中。

第二步 創建header layout

從創建另一個XML布局文件（drawer_header.xml）來定義菜單的頭部：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="bottom">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Username"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</LinearLayout>

很簡單都是線性布局，這里就不在細說了。

第三步 引用布局

就像上文提到的，在NavigationView的布局中，使用頭部布局和內容布局。

第四部 初始化

在Activity中初始化NavigationView：

private NavigationView mNavigationView;
mNavigationView = (NavigationView) findViewById(R.id.navigation_view);

第五步 設定菜單監聽器

設置菜單中的選項被選中后的事件：

//setting up selected item listener
navigationView.setNavigationItemSelectedListener(
       new NavigationView.OnNavigationItemSelectedListener() {
              @Override
              public boolean onNavigationItemSelected(MenuItem menuItem) {
                        menuItem.setChecked(true);
                        mDrawerLayout.closeDrawers();
                        return true;
              }
       });

利用代碼，動態添加菜單內容

利用NavigationView對象的getMenu()方法來獲取菜單對象，以添加內容：

final Menu menu = navigationView.getMenu();
for (int i = 1; i <= 3; i++) {
    menu.add("Runtime item "+ i);
}

利用Menu對象的子菜單屬性，設定SubMenu：

// adding a section and items into it
final SubMenu subMenu = menu.addSubMenu("SubMenu Title");
for (int i = 1; i <= 2; i++) {
    subMenu.add("SubMenu Item " + i);
}

在添加菜單內容之后，需要刷新菜單內容的適配器：

for (int i = 0, count = mNavigationView.getChildCount(); i < count; i++) {
            final View child = mNavigationView.getChildAt(i);
            if (child != null && child instanceof ListView) {
                final ListView menuView = (ListView) child;
                final HeaderViewListAdapter adapter = (HeaderViewListAdapter) menuView.getAdapter();
                final BaseAdapter wrapped = (BaseAdapter) adapter.getWrappedAdapter();
                wrapped.notifyDataSetChanged();
            }
        }

其他注意事項

ActionBarDrawerToggle

如果想監聽抽屜菜單的開關狀態，可以利用ActionBarDrawerToggle （V7）對象：

/**
     * In case if you require to handle drawer open and close states
     */
    private void setupActionBarDrawerToogle() {

        mDrawerToggle = new ActionBarDrawerToggle(this,                  /* host Activity */
                                                  mDrawerLayout,         /* DrawerLayout object */
                                                  R.string.drawer_open,  /* "open drawer" description */
                                                  R.string.drawer_close  /* "close drawer" description */
        ) {

            /**
             * Called when a drawer has settled in a completely closed state.
             */
            public void onDrawerClosed(View view) {
                Snackbar.make(view, R.string.drawer_close, Snackbar.LENGTH_SHORT).show();
            }

            /**
             * Called when a drawer has settled in a completely open state.
             */
            public void onDrawerOpened(View drawerView) {
                Snackbar.make(drawerView, R.string.drawer_open, Snackbar.LENGTH_SHORT).show();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

    }

ToolBar

利用原有的ActionBar不能實現NavigationView的效果，需要用ToolBar代替：

//在onCreate()方法中調用
private void setupToolbar() {
    //使用ToolBar替換原本的ActionBar
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    final ActionBar ab = getSupportActionBar();
    if(ab!=null) {
        //設置ToolBar的圖標
        ab.setHomeAsUpIndicator(R.drawable.ic_menu);
        //是否展示圖標
        ab.setDisplayHomeAsUpEnabled(true);
    }
}

同時注意，Activity要使用無ActionBar的主題，否者ActionBar會和ToolBar沖突：

 <style name="AppTheme" parent="Base.Theme.DesignDemo">
    </style>

    <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#2196F3</item>
        <item name="colorPrimaryDark">#1976D2</item>
        <item name="colorAccent">#E040FB</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>

最后還要為ToolBar設定點擊事件，在點擊菜單Home時，彈出菜單：

@Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();

        switch (id) {
            //當點擊Toolbar的Home圖標時
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                return true;

            case R.id.action_settings:
                return true;
        }

        return super.onOptionsItemSelected(item);
    }

如果不設定，抽屜菜單將無法彈出。

控制Back鍵

如果要實現點擊Back鍵后菜單自動消失，還需要控制Back鍵響應事件：

@Override
    public void onBackPressed() {
        if (isNavDrawerOpen()) {
            closeNavDrawer();
        } else {
            super.onBackPressed();
        }
    }

    protected boolean isNavDrawerOpen() {
        return mDrawerLayout != null && mDrawerLayout.isDrawerOpen(GravityCompat.START);
    }

    protected void closeNavDrawer() {
        if (mDrawerLayout != null) {
            mDrawerLayout.closeDrawer(GravityCompat.START);
        }
    }

在點擊Back鍵之后，先判斷NavigationView是否彈出，如果處于打開狀態，就關閉NavigationView。

注意我們在布局文件中定義NavigationView的 android:layout_gravity="start"，所以打開或者關閉菜單時要使用相應的方向GravityCompat.START。如果都是使用GravityCompat.END,效果就是從右側彈出菜單。

右側菜單彈出

更多關于Design Support Library中控件的講解將會在持續更新，歡迎關注。

最后給出Github源碼

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容