一、基本使用
1. NavigationView 在 design 庫中，添加依賴（最新的是 23.2.0）；
compile 'com.android.support:design:23.1.1'
2. 然后在 DrawerLayout 布局中添加 NavigationView ；
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> ...... </LinearLayout> </FrameLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header" app:menu="@menu/activity_main_drawer"/></android.support.v4.widget.DrawerLayout>
其中需要注意給 NavigationView 設置 android:layout_gravity="start" 屬性。
3.然后注意到 NavigationView 其實是分兩個部分的，一個是頭部，一個是下面的菜單列表部分
如下圖所示：
其中頭部通過 app:headerLayout="@layout/nav_header" 屬性添加，nav_header 的布局如下：
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="192dp" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/nav_header_bg" android:scaleType="centerCrop"/> <ImageView android:layout_width="96dp" android:layout_height="96dp" android:layout_gravity="bottom" android:layout_marginBottom="36dp" android:padding="8dp" android:src="@drawable/ic_avatar"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:padding="16dp" android:text="Jaeger" android:textAppearance="@style/TextAppearance.AppCompat.Body1"/></FrameLayout>
下面的菜單列表部分是一個 menu 文件，通過 app:menu="@menu/activity_main_drawer"屬性添加。
activity_main_drawer.xml 文件在 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_camera" android:icon="@drawable/ic_menu_camera" android:title="Import"/> <item android:id="@+id/nav_gallery" android:icon="@drawable/ic_menu_gallery" android:title="Gallery"/> <item android:id="@+id/nav_slideshow" android:icon="@drawable/ic_menu_slideshow" android:title="Slideshow"/> <item android:id="@+id/nav_manage" android:icon="@drawable/ic_menu_manage" android:title="Tools"/> </group> <item android:title="Communicate"> <menu> <item android:id="@+id/nav_share" android:icon="@drawable/ic_menu_share" android:title="Share"/> <item android:id="@+id/nav_send" android:icon="@drawable/ic_menu_send" android:title="Send"/> </menu> </item></menu>
4. 菜單列表的點擊事件
菜單列表的點擊事件設置代碼如下：
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { switch (item.getItemId()){ case R.id.nav_personal_info: // do something break; ... } return false; } });至此，NavigationView 的基本使用就差不多搞定了，效果就是前面圖片顯示的效果。
以下是使用過程中遇到的問題及解決方式。
一、菜單圖標顏色被渲染成其他顏色
NavigationView默認會按照 Android 設計規范，將菜單里的圖標渲染成itemIconTint所設置的顏色。如果你沒有設置這個屬性，則會渲染成它默認的深灰色。如果不想圖標顏色被渲染，可通過以下代碼解決：
navigationView.setItemIconTintList(null);
二、菜單圖標與文字的間距過大
NavigationView的菜單中，圖標與文字的間距為32dp，但是通常與我們的設計師出的效果不同，這時可以通過重寫以下屬性來進行設置：
<dimen name="design_navigation_icon_padding" tools:override="true">16dp</dimen>
總結
以上就是這篇文章的全部內容了，希望本文的內容對各位Android開發者們能有所幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
