Android NavigationView使用详解

何为NavigationView，比如QQ的侧滑菜单就是，给个图片就是下图，分为head和menu上下两部分

1、导入包：

//Design support库

implementation 'com.android.support:design:27.1.1'

//实现图片圆形化

compile 'de.hdodenhof:circleimageview:2.1.0'

2.首先实现menu，如下：

checkableBehavior="single" 表示菜单为单选

icon="@drawable/nav_menu_call" 菜单图标

android:title="Call" 菜单文字

<?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_menu_call"
            android:icon="@drawable/nav_menu_call"
            android:title="Call" />
        <item
            android:id="@+id/nav_menu_friends"
            android:icon="@drawable/nav_menu_friends"
            android:title="Friends"/>
        <item
            android:id="@+id/nav_menu_loaction"
            android:icon="@drawable/nav_menu_loaction"
            android:title="Loaction"/>
        <item
            android:id="@+id/nav_menu_mail"
            android:icon="@drawable/nav_menu_mail"
            android:title="Mail"/>
        <item
            android:id="@+id/nav_menu_cloud"
            android:icon="@drawable/nav_menu_cloud"
            android:title="Cloud"/>
    </group>

</menu>

2.实现head

180dp是一个比较适中的高度

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="@mipmap/head_backgroud">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/nav_cirI_head"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/head"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/nav_tv_mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[email protected]"
        android:layout_alignParentBottom="true"
        android:textColor="@color/white"
        android:textSize="14dp"/>

    <TextView
        android:id="@+id/nav_tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LiangLiang"
        android:layout_above="@id/nav_tv_mail"
        android:textColor="@color/white"
        android:textSize="14dp"/>

</RelativeLayout>

3.修改主界面布局：

theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar" 指定深色toolbar

popupTheme="@style/AlertDialog.AppCompat.Light" 指定菜单是淡色

layout_gravity="start" 左面滑出菜单

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/design_drawer_layout">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/design_tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="@color/colorPrimary"
            app:title="Design"
            android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/AlertDialog.AppCompat.Light">
        </android.support.v7.widget.Toolbar>

    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/design_nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_heder_layout"
        android:background="@mipmap/nav_menu_background">

    </android.support.design.widget.NavigationView>

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

4.活动部分设置

实例化NavigationView

NavigationView navView = (NavigationView) findViewById(R.id.design_nav_view);

设置图片显示自身颜色，否则默认为灰色

在布局文件中添加app:itemIconTint="@color/blue"属性，表示设置图片的颜色全都为蓝色

显示图片原本颜色：

//让图片就是显示他本身的颜色

navView.setItemIconTintList(null);

还有下面两个常用的API：

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

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

NavigationView的item之间添加上一条分隔线：只需要在menu中将相应的item放到一个group中，并给该group取一个id即可，代码如下：

 <group android:id="@+id/group2">
        <item
            android:id="@+id/nav_menu_mail"
            android:icon="@drawable/nav_menu_mail"
            android:title="Mail"/>
        <item
            android:id="@+id/nav_menu_cloud"
            android:icon="@drawable/nav_menu_cloud"
            android:title="Cloud"/>
    </group>

此时效果如下：

5.头部点击事件

直接通过findViewById实例化设置onClick会崩溃，比较好的方式是通过getHeaderView获取头布局文件

5.1 getHeaderView获取头布局文件方式

//获取头布局文件

View headerView = navView.getHeaderView(0);

然后实例化控件，设置点击事件就行

cirIViewHead = (CircleImageView) headerView.findViewById(R.id.nav_cirI_head);

        cirIViewHead.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Toast.makeText(DesignActivity.this,"Head",Toast.LENGTH_SHORT).show();

            }

        });

5.2 将XML里的静态引入删除：

<android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start" />
    <!--删除下面两行-->
    <!--app:headerLayout="@layout/nav_header"-->
    <!--app:menu="@menu/nav_menu"-->

在代码里 findViewById 找到 NavigationView，然后引入 Header 和 Menu，再获取头部布局，最后设置监听事件：

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

//引入header和menu
navigationView.inflateHeaderView(R.layout.nav_header);
navigationView.inflateMenu(R.menu.nav_menu);

//获取头部布局
View navHeaderView = navigationView.getHeaderView(0);

cirIViewHead = (CircleImageView) headerView.findViewById(R.id.nav_cirI_head);

        cirIViewHead.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Toast.makeText(DesignActivity.this,"Head",Toast.LENGTH_SHORT).show();

            }

        });

6.菜单点击事件

//菜单事件
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.nav_menu_call:
                        Toast.makeText(DesignActivity.this,"Call",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_menu_friends:
                        Toast.makeText(DesignActivity.this,"Friends",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_menu_loaction:
                        Toast.makeText(DesignActivity.this,"Loaction",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_menu_mail:
                        Toast.makeText(DesignActivity.this,"Mail",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_menu_cloud:
                        Toast.makeText(DesignActivity.this,"Cloud",Toast.LENGTH_SHORT).show();
                        break;
                    default:
                            //关闭滑动菜单
                            mDrawerLayout.closeDrawers();
                }
                //选中此项
                //item.setCheckable(true);
                return false;
            }
        });

Android NavigationView使用详解

猜你喜欢