Android Material Design系列之Navigation Drawer

從今天開始，我們講一個關于Material Design風格控件系列的文章。個人認為Material Design風格還是非常漂亮和好看的。關于Material Design的控件，從今天這篇開始一個一個的講，希望能夠對大家有所幫助。

Material Design系列控件，我們今天就先從側滑菜單欄開始，側滑菜單欄通過名字我們就知道包含兩部分，一部分是側滑（DrawerLayout），一部分是導航菜單欄(NavigationView)。DrawerLayout包含NavigationView，一設置側滑菜單欄就形成了。因為建立一個側滑菜單很簡單，在用Android Studio新建項目時，最后選擇Navigation Drawer Activity或者在新建Activity時選擇Navigation Drawer Activity，就出來了。今天我們講一下它們的自定義配置。

DrawerLayout布局

<?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"

 xmlns:tools="http://schemas.android.com/tools"

 android:id="@+id/drawer_layout"

 android:layout_width="match_parent"

 android:layout_height="match_parent"

 android:fitsSystemWindows="true"

 tools:openDrawer="start">

    <include

 layout="@layout/app_bar_main"

 android:layout_width="match_parent"

 android:layout_height="match_parent" />


    <android.support.design.widget.NavigationView

 android:id="@+id/nav_view"

 android:layout_width="wrap_content"

 android:layout_height="match_parent"

 android:layout_gravity="start"

 android:fitsSystemWindows="true"

 app:headerLayout="@layout/nav_header_main"

 app:menu="@menu/activity_main_drawer" />

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

從上面的布局代碼中我們就看出來了，DrawerLayout包含NavigationView，中間的include先不管，那是toolbar，咱改天詳細講。新建完項目，自帶的布局效果是這樣的，如下：

從圖中，我們可以看到菜單列表，這個菜單列表是我們剛開始建項目時自動生成的，系統默認的，我們需要定制這個菜單變成我們自己的。其實就是要用到了NavigationView。

NavigationView

NavigationView分為兩部分，一部分是headerLayout，一部分是menu。headerLayout就是對應菜單的頂部部分，一般用來顯示用戶信息什么的，menu則對應實際的菜單選項。我們從上面的布局代碼中可以看出分別對應的就是 app:headerLayout和app:menu。

headerLayout

布局代碼如下：

<?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="wrap_content"

 android:padding="16dp"

 android:theme="@style/ThemeOverlay.AppCompat.Dark"

 android:background="?attr/colorPrimaryDark"

 android:gravity="center"

 android:orientation="vertical">


    <ImageView

 android:id="@+id/head_iv"

 android:layout_width="60dp"

 android:layout_height="60dp"

 android:layout_marginTop="30dp"

 android:background="@drawable/head" />


    <TextView

 android:text="非著名程序員"

 android:layout_marginTop="10dp"

 android:textColor="#ffffff"

 android:layout_width="wrap_content"

 android:layout_height="wrap_content" />

</LinearLayout>

menu

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">

        <item

 android:id="@+id/nav_home"

 android:icon="@drawable/nav_icon_home"

 android:title="Home" />

        <item

 android:id="@+id/nav_favorite"

 android:icon="@drawable/nav_icon_favorite"

 android:title="收藏" />

        <item

 android:id="@+id/nav_followers"

 android:icon="@drawable/nav_icon_followers"

 android:title="群組" />

        <item

 android:id="@+id/nav_settings"

 android:icon="@drawable/nav_icon_settings"

 android:title="設置" />

    </group>

    <item android:title="分享和反饋">

        <menu>

            <item

 android:id="@+id/nav_share"

 android:icon="@drawable/nav_icon_my_shares"

 android:title="分享" />

            <item

 android:id="@+id/nav_feedback"

 android:icon="@drawable/nav_icon_feedback"

 android:title="意見反饋" />

        </menu>

    </item>

</menu>

代碼實現

初始化相關控件

里面的Toolbar和FloatingActionButton稍后我們在這個系列講，對DrawerLayout和NavigationView進行了聲明和初始化。

//toolbar的設置，稍后講這個控件

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

//懸浮按鈕控件，稍后講這個控件

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View view) {

        Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

                .setAction("Action", null).show();

    }

});

//設置DrawerLayout

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(

        this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);

drawer.setDrawerListener(toggle);

toggle.syncState();

//設置NavigationView

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

navigationView.setNavigationItemSelectedListener(this);

側滑菜單中選項按鈕的點擊事件

MainActivity實現了NavigationView.OnNavigationItemSelectedListener這個監聽事件，然后在實現的監聽方法里判斷點擊事件。

方法如下：

@Override

   public boolean onNavigationItemSelected(MenuItem item) {

       int id = item.getItemId();

       if (id == R.id.nav_home) {

           Toast.makeText(this, "home", Toast.LENGTH_SHORT).show();

       } else if (id == R.id.nav_favorite) {

           Toast.makeText(this, "收藏", Toast.LENGTH_SHORT).show();

       } else if (id == R.id.nav_followers) {

           Toast.makeText(this, "群組", Toast.LENGTH_SHORT).show();

       } else if (id == R.id.nav_settings) {

           Toast.makeText(this, "設置", Toast.LENGTH_SHORT).show();

       } else if (id == R.id.nav_share) {

           Toast.makeText(this, "分享", Toast.LENGTH_SHORT).show();

       } else if (id == R.id.nav_feedback) {

           Toast.makeText(this, "意見反饋", Toast.LENGTH_SHORT).show();

       }



       DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

       drawer.closeDrawer(GravityCompat.START);

       return true;

   }

記得實現了監聽，別忘了設置監聽：navigationView.setNavigationItemSelectedListener(this);

到這里就講完了。做完之后的效果圖如下：

噢，忘了，你們肯定會問，如果點擊側滑上面的頭像，怎么實現呢？

headerLayout上的控件實現

如果要實現headerLayout上的控件的點擊，那就得這樣做了，如下：

View navHeaderView = navigationView.inflateHeaderView(R.layout.header_layout);



ImageView headIv = (ImageView) navHeaderView.findViewById(R.id.head_iv);

headIv.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View view) {

            Toast.makeText(MainActivity.this, "點擊我的頭像", Toast.LENGTH_SHORT).show();

        }

});

但是這樣做了之后，就相當于在navigationView上又添加了一個headerlayou布局，所以這時，我們需要在布局文件中把

app:headerLayout="@layout/header_layout"

這行代碼去掉，否則會重復的。

主題和配色

上面用到的主題和顏色，我們可以在資源文件中配置。

比如color中：

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="colorPrimary">#3F51B5</color>

    <color name="colorPrimaryDark">#303F9F</color>

    <color name="colorAccent">#FF4081</color>

</resources>

比如style中：

<resources>

    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

 <!-- Customize your theme here. -->

 <item name="colorPrimary">@color/colorPrimary</item>

 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

 <item name="colorAccent">@color/colorAccent</item>

 </style>

    <style name="AppTheme.NoActionBar">

 <item name="windowActionBar">false</item>

 <item name="windowNoTitle">true</item>

 </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

 <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

在這里配置成自己想要實現的主題和顏色即可。這回是真講完了。是不是很簡單，趕緊試一試去吧。

 

來自： http://godcoder.me/2016/06/19/Android Material Design系列之Navigation Drawer/