安卓NavigationView使用方法

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/qq_40881680/article/details/82712476

目录

导入依赖

介绍NavigationView

布局文件、标签属性

---

导入依赖

使用Design下的NavigationView前导入依赖步骤

在这个页面中直接找到design这个依赖，点击后再点击这两个窗口上的OK按钮，等待编译完成就完成导入了！

(可能版本不一样，导入即可)

13.1.5 介绍NavigationView

Google在5.0之后推出的NavitationView，所有的布局控件放在DrawerLayout中来使用，NavigationView的作用就像这样，实现侧拉效果。和DrawerLayout效果几分差异，QQ从左至右从边滑动的侧拉效果。上半部分图片背景，圆形头像，下面每一个都是导航菜单现在就来实现一下它(虽然是Iphone图，但是没关系了，就是这个道理)。

扫描二维码关注公众号，回复： 3395393 查看本文章

---

布局文件、标签属性

敲出最简单的布局，实现最简单的效果

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:background="#4d7aed"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:gravity="center"
            android:textSize="18sp"
            android:text="这里是一个主页面"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:layout_gravity="left"
        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.design.widget.NavigationView>

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

将所有布局控件放下DrawerLayout 中，NavigationView加上属性android:layout_gravity="left"实现左侧滑！

---

如果加一个头布局文件，姐可以侧拉出这样的效果布局代码如下

主布局文件activity_main.xml:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#4d7aed">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="这里是一个主页面"
            android:textSize="18sp" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        app:headerLayout="@layout/layout"
        android:layout_width="450dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff">
    </android.support.design.widget.NavigationView>

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

头布局文件layout.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="260dp"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:background="@mipmap/kb" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="#63a6e9"
        android:gravity="center"
        android:text="《魁拔》"
        android:textColor="#fff"
        android:textSize="18sp" />

</LinearLayout>

---

之后加上menu就可以实现这样的效果了(虽然丑了，但是还是可以实现，要求美观就细扣)

创建的menu应该在这里

menu.xml

<?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/item1"
            android:title="功能列表1"></item>

        <item
            android:id="@+id/item2"
            android:title="功能列表2"></item>

        <item
            android:id="@+id/item3"
            android:title="功能列表3"></item>

        <item
            android:id="@+id/item4"
            android:title="功能列表4"></item>

        <item
            android:id="@+id/item5"
            android:title="功能列表5"></item>
    </group>
</menu>

还可以在每个item加上  android:icon=""  ，为这个item设置上图标

布局文件

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#4d7aed">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="这里是一个主页面"
            android:textSize="18sp" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        app:menu="@menu/menu"
        app:headerLayout="@layout/layout"
        android:layout_width="450dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff">
    </android.support.design.widget.NavigationView>

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

头布局文件

<?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="260dp"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:background="@mipmap/kb" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="#63a6e9"
        android:gravity="center"
        android:text="《魁拔》"
        android:textColor="#fff"
        android:textSize="18sp" />

</LinearLayout>

---

NavitationView常用属性

item加入点击事件

当布局文件中app:menu="@menu/item_menu"加入后，要为对应的item加上点击事件，这时候用到的是setNavigationItemSelectedListener

使用方法：

实例化NavigationView后，之后直接调用这个方法，就像如下代码

实例化的NavigationView控件.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()) {
                    case R.id.title1:
                        Toast.makeText(Main2Activity.this, "第一个", Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });

这样就加入点击事件了，switch中对应着加入点击事件

》》》》》》快速实例化控件的插件的安装与使用《《《《《《