一：先看效果图

这个效果图分为三部分：头布局 menu（即中间的item部分）尾布局

二：NavigationView的定义

Android 5.0以前。我们做抽屉菜单的时候，左或右边滑出来的那一部分的布局都是由我们自定义的。于是Google在5.0之后推出了NavitationView，就是我们左边滑出来的这个菜单。这个菜单整体上分为两部分，上面一部分叫做HeaderLayout，下面的那些点击项都是menu。

三：Navigation的使用（直接上代码）

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

        <LinearLayout
            android:id="@+id/ll_exit"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="bottom"
            android:layout_marginTop="40dp"
            android:background="#FB3F3E"
            android:gravity="center">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:gravity="center"
                android:text="退出登录（aqy）"/>
        </LinearLayout>
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

解释：

  <include layout="@layout/app_bar_main"/>这是主界面

  <android.support.design.widget.NavigationView/>这是侧滑界面

   android:layout_gravity="start"或者Android:layout_gravity="left" ：表示侧滑菜单从左边滑出，改成right变为从右边滑出。

   app:headerLayout="@layout/nav_header_main"  ：表示头布局

app:menu="@menu/activity_main_drawer" ：中间部分，menu的点击部分

头布局代码：layout/nav_header_main

<?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:layout_marginTop="20dp"
              android:gravity="center"
              android:orientation="vertical"
              android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/img_person_head"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@mipmap/baby"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginTop="5dp"
        android:text="Baby"
        android:textColor="#000"
        android:textSize="16sp"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#817070"/>
</LinearLayout>

menu/activity_main_drawer布局


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

    <group
        android:id="@+id/g1"
        android:checkableBehavior="none">
        <item
            android:id="@+id/item_zhaq"
            android:icon="@mipmap/ic_launcher"
            android:title="账户安全"/>

    </group>

    <group
        android:id="@+id/g2"
        android:checkableBehavior="none">

        <item
            android:id="@+id/item_yjfk"
            android:icon="@mipmap/ic_launcher"
            android:title="意见反馈"/>
    </group>
    
</menu>

四：出现的问题
Q1：怎么在item中间加一条分割线
Answer：把item放在group里面。注意group要有id。

 代码：<group
        android:id="@+id/g2"
        android:checkableBehavior="none">

        <item
            android:id="@+id/item_yjfk"
            android:icon="@mipmap/ic_launcher"
            android:title="意见反馈"/>
    </group>

Q2: 怎么获得头布局的控件
Answer：

View headerView = navigationView.getHeaderView(0);//获得头布局

获取imageview

ImageView mImgPersonHead = (ImageView) headerView.findViewById(R.id.img_person_head);
Q3：Item的点击事件：

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        //在这里处理item的点击事件

switch (item.getItemId()) {

case R.id. xxx: startActivity( new Intent( this, xxxActivity. class)); break;

}
return true;

}) Q4: 怎么添加尾布局
Answer：看上面的代码，只要在NavigationView里面，加入想要的尾布局内容就可以
Q5：怎么设置item中icon的颜色

1.app:itemBackground="@color/colorAccent"设置每一个item的背景颜色

2.app:itemTextColor=""设置item的背景颜色

3.代码中设置：navigationView.setItemIconTintList(null); //显示icon本身的颜色

Q6：怎么设置item 中icon的大小：

在dimens 文件中加入该属性：

<dimen name="navigation_icon_size">48dp</dimen>

原理：

查看NavigationView中的源码，最终发现在 NavigationMenuItemView这个类中实现时，是采用以下方式获取大小的：

 public NavigationMenuItemView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    this.mIconSize = context.getResources().getDimensionPixelSize(dimen.navigation_icon_size);
}

Finl：最后欢迎各位补充。有问题欢迎批评

Android NavigationView的使用详解以及各种问题解决方案

app:menu="@menu/activity_main_drawer" ：中间部分，menu的点击部分

menu/activity_main_drawer布局

猜你喜欢