NavigationView侧滑菜单使用教程

最新推荐文章于 2021-12-27 17:03:10 发布

VikcyWinner

最新推荐文章于 2021-12-27 17:03:10 发布

阅读量1.1k

点赞数

分类专栏： Android开发

本文链接：https://blog.youkuaiyun.com/VickyWinner/article/details/53038713

版权

Android开发专栏收录该内容

8 篇文章

订阅专栏

前言：最近在看大冰的乖，摸摸头。感觉人生其实并没有什么特定的活法。大家都挤破头的生活可能并不是你想要的生活，而你有权利选择自己的生活，但选择归选择，生活的道路注定是坎坷不平，遇到挫折和低谷，也没必要怨天尤人，一蹶不振。遇到顺境，也没必要沾沾自喜，到处炫耀。生活就是这样，起起落落，冷暖自知。用一个平淡的心去品味生活的百态就好了。

NavigationView是material design 之后，为我们提供的一个滑动导航菜单的一个新的实现方案。网上关于NavigationView的教程有很多，今天我也想总结一下NavigationView的使用，方便以后来翻阅和快速上手。

我们来看一下使用NavigationView的侧滑菜单的最终效果：

NavigationView的使用简单教程：

首先，由于是material design 中提供的控件，所以我们要在dependencies中更新一下SDK:

compile 'com.android.support:design:24.2.1'

接下来我们就可以正式编写我们的NavifationView的Demo了。

编写布局文件：

首先我们要注意一点，和其他的侧拉菜单制作方式一样，首先所有的东西还是都放在一个DrawerLayout中，所以最外层我们使用DrawerLayout进行包裹。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.navigationviewdemo.MainActivity"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:title="Toolbar"
            app:titleTextColor="#FFF"

            />
        <TextView
            android:id="@+id/id_tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="HelloWorld"
            android:textSize="30sp"/>


    </RelativeLayout>


    <android.support.design.widget.NavigationView
        android:id="@+id/design_navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:headerLayout="@layout/header_just_username"
        app:menu="@menu/menu_drawer"
        ></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

这里其实没有什么好说的，我们就关注一下NavigationView中的layout_gravity属性和headerLayout、menu的属性。

layout_gravity属性其实就是设置侧拉菜单的位置，我们在这个Demo中将它设置成了左侧，如果要设置成右侧，只需要将left设置成right就好了。

headerLayout属性是引用一个布局文件，这里其实就是侧拉菜单上面蓝色的部分。（布局代码会在下面给出）

menu属性是设置菜单布局（代码会在下面给出）

首先，我们来看一下我们的headerLayout的布局代码：

<?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="200dp"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:background="@color/colorPrimary">

    <TextView
        android:layout_alignParentRight="true"
        android:layout_marginRight="30dp"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="VickyWinner的博客"
        android:textSize="16sp"
        android:textColor="#fff"
        android:layout_marginLeft="20dp"
        />

</RelativeLayout>

其实很简单，我就设置了一个高度和一个TextView。当然在实际开发中，我们的界面会更加的复杂，但其实道理都是一样。

<?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="200dp"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:background="@color/colorPrimary">

    <TextView
        android:id="@+id/userName"
        android:layout_alignParentRight="true"
        android:layout_marginRight="30dp"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="VickyWinner的博客"
        android:textSize="16sp"
        android:textColor="#fff"
        android:layout_marginLeft="20dp"
        />

</RelativeLayout>

接着是我们的Menu，不多说直接上代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group >
        <item android:id="@+id/item1"
            android:icon="@mipmap/ic_launcher"
            android:checkable="true"
            android:title="item1"
            />
        <item android:id="@+id/item2"
            android:icon="@mipmap/ic_launcher"
            android:title="item2"
            android:checkable="true"
            />
        <item android:id="@+id/item3"
            android:icon="@mipmap/ic_launcher"
            android:title="item3"
            android:checkable="true"
            />

    </group>
    <item android:title="Sub items">
        <menu>
            <item
                android:id="@+id/item4"
                android:icon="@mipmap/ic_launcher"
                android:checkable="true"
                android:title="Sub item 1"/>
            <item
                android:id="@+id/item5"
                android:icon="@mipmap/ic_launcher"
                android:checkable="true"
                android:title="Sub item 2"/>
        </menu>
    </item>

</menu>

在Menu中我们能够添加为item添加子菜单，这样这个item添加子菜单，就像我们这里的Sub。

这样，我们就完成了

最后是我们的java代码：

package com.example.navigationviewdemo;

import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private NavigationView mNavigationView;
    private Toolbar mToolbar;
    private TextView id_tv_content;
    private TextView userName;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //实例化控件
        mDrawerLayout= (DrawerLayout) findViewById(R.id.drawerLayout);
        mNavigationView= (NavigationView) findViewById(R.id.design_navigation_view);
        mToolbar= (Toolbar) findViewById(R.id.id_toolbar);
//        为ToolBar设置一个导航按钮，我随便用了一个星星的按钮
        mToolbar.setNavigationIcon(android.R.drawable.btn_star);
        id_tv_content= (TextView) findViewById(R.id.id_tv_content);


        View headerView=mNavigationView.getHeaderView(0);
        userName= (TextView) headerView.findViewById(R.id.userName);

//        设置我们的ToolBar
        setSupportActionBar(mToolbar);
        //为导航按钮设置监听事件，这里一定要在setSupportActionBar(mToolbar);方法之后，不然会报错
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mDrawerLayout.isDrawerOpen(mNavigationView)){
                    mDrawerLayout.closeDrawers();
                }else {
                    mDrawerLayout.openDrawer(mNavigationView);
                }
            }
        });

        setupDrawerContent(mNavigationView);
    }
    //添加监听
    private void setupDrawerContent(NavigationView navigationView)
    {
        navigationView.setNavigationItemSelectedListener(

                new NavigationView.OnNavigationItemSelectedListener()
                {

                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem)
                    {
                        //监听Item事件
                        switch (menuItem.getItemId()){
                            case R.id.item1:
                                id_tv_content.setText("Item1");
                                break;
                            case R.id.item2:
                                id_tv_content.setText("Item2");
                                break;
                            case R.id.item3:
                                id_tv_content.setText("Item3");
                                break;
                            case R.id.item4:
                                id_tv_content.setText("Item4");
                                break;
                            case R.id.item5:
                                id_tv_content.setText("Item5");
                                break;
                        }
                        menuItem.setChecked(true);
                        mDrawerLayout.closeDrawers();
                        return true;
                    }

                });

    }



}<pre class="java" name="code">

最后要提醒一下，由于我们自己设置了Toolbar，所有我们要在Style文件中将主题设置成NoActionBar。：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

这样我们的NavigationView简单的使用就完成了。可能遇到的问题：

在NavigationView中，有时候我们的业务逻辑可能需要获取到Head中的一些控件，比如，在这里，我们我们希望获取到我们Head中的Text，这时候如果我们像往常一样直接findViewById的话，就会遇到空指针的错误，因为在这里我们获取到的控件为Null。那我们怎么获取到Head中的空间呢？

其实很简单，我们需要先通过NavigationView获取到Head的View，然后通过这个View获取到Head的控件：

        View headerView=mNavigationView.getHeaderView(0);
        userName= (TextView) headerView.findViewById(R.id.userName);

通过以上代码，我们就能获取到我们Head中的任意控件。

NavigationView侧滑菜单 使用教程

NavigationView侧滑菜单使用教程