DrawerLayout + NavigationView实现侧滑菜单

最新推荐文章于 2021-07-30 19:37:24 发布

JMathias

最新推荐文章于 2021-07-30 19:37:24 发布

阅读量778

点赞数

分类专栏： Android 文章标签： DrawerLayout NavigationView 侧滑菜单

本文链接：https://blog.csdn.net/HiJson/article/details/54375922

版权

Android 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

实现侧滑菜单有多种方式，如使用SlidingMenu，但使用起来比较繁琐，官方也推出了一个能轻松实现侧滑菜单的View，即DrawerLayout。在Android 5.0中，推出了NavigationView控件，DrawerLayout加上NavigationView，实现侧滑菜单就轻而易举了。

DrawerLayout在使用时要作为顶层布局，其他布局和控件都放在其中，我们来看一段代码：

<?xml version="1.0" encoding="utf-8"?>
<!--添加app命名空间-->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 这段断码需要放在NavigationView前面，否则NavigationView的点击事件无效 -->
    <include layout="@layout/layout_content" />

    <!-- NavigationView位于design包下面，使用前先添加library，搜索design添加即可 -->
    <!-- layout_gravity需要手动输入，没有快速提示，属性值有如下：1、start：位于左侧  2、end：位于右侧-->
    <!-- headerLayout：设置侧滑菜单头布局 -->
    <!-- menu：是、设置策划菜单选项 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/layout_nva_header"
        app:menu="@menu/nav_menu">

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

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

可以看到DrawerLayout是一个顶层布局，并给他添加了一个id，添加id的作用是方便控制DrawerLayout的开闭。DrawerLayout中包含一个内容页的布局layout_content和NavigationView，layout_content需要放在NavigationView前面，否则点击NavigationView的item后会无效（不明白为什么会这样）

再说说NavigationView，这个位于design包下，使用前需要先添加design包，直接添加library，搜索design就能添加

添加design包后还是需要添加命名空间：

xmlns:app="http://schemas.android.com/apk/res-auto"

然后就可以开始使用了。

最常用的属性：

1、layout_gravity：需要手动输入，没有快速提示，属性值有如下：
   start：位于左侧
   end：位于右侧
2、headerLayout：设置侧滑菜单头布局
3、menu：设置策划菜单选项

4、itemTextColor=""：设置item的字体颜色

5、itemBackground="@color/colorPrimary"：设置item背景颜色

6、itemIconTint：给item上的图片设置统一的颜色

  在NavigationView中使用menu，menuItem上的图片颜色默认会统一成灰色，如果需要自己设置统一的颜色需要使用itemIconTint来设置，如果需要使用图片本身的颜色，就需要在代码中使用nav.setItemIconTintList(null)。
  现在看看layout_content以及NavigationView中的headerLayout和nav_menu

layout_content(很简单，可以忽略):<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="内容页"
        android:textSize="40sp"/>
</RelativeLayout>

headerLayout:<?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="match_parent"
    android:padding="20dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/nav_head_img"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_launcher"
        android:clickable="true"/>
    <TextView
        android:id="@+id/nav_head_tv01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:textSize="30sp"
        android:text="随便写点"/>
    <TextView
        android:id="@+id/nav_head_tv02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:textSize="20sp"
        android:text="随便写点"/>
</LinearLayout>

新建menu目录，在目录中新建nav_menu.xml文件
nav_menu：<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 此处需要添加android:checkableBehavior="single"才能使menu显示出选中状态 -->
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/item01"
            android:icon="@mipmap/ic_launcher"
            android:title="item01" />
        <item
            android:id="@+id/item02"
            android:icon="@mipmap/ic_launcher"
            android:title="item02" />
        <item
            android:id="@+id/item03"
            android:icon="@mipmap/ic_launcher"
            android:title="item03" />
        <item
            android:id="@+id/item04"
            android:icon="@mipmap/ic_launcher"
            android:title="item04" />


    </group>

    <item android:title="Communicate">
        <menu>
            <group android:checkableBehavior="single">
                <item
                    android:id="@+id/nav_share"
                    android:icon="@mipmap/ic_launcher"
                    android:title="Share" />
                <item
                    android:id="@+id/nav_send"
                    android:icon="@mipmap/ic_launcher"
                    android:title="Send" />
            </group>
        </menu>
    </item>
</menu>

很简单，不解释，需要注意的是如果要item能够响应点击事件，需要添加android:checkableBehavior="single"
下面看Java代码：
package com.lenovo.gmathias.drawerlayoutdemo;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity{


    NavigationView nav;

    DrawerLayout drawerLayout;
    private ImageView nav_head_img;
//    private TextView nav_head_tv01;
//    private TextView nav_head_tv02;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initListener();
    }

    private void initView() {
        nav = (NavigationView) findViewById(R.id.nav);
        nav.setItemIconTintList(null);//让图片显示其本身的颜色
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

        // 获取头部控件
        View  navHeadView = nav.getHeaderView(0);
        nav_head_img = (ImageView) navHeadView.findViewById(R.id.nav_head_img);
//        nav_head_tv01 = (TextView) navHeadView.findViewById(R.id.nav_head_tv01);
//        nav_head_tv02 = (TextView) navHeadView.findViewById(R.id.nav_head_tv02);
    }

    private void initListener() {
        nav.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //        item.setCheckable(true);
                switch (item.getItemId()) {
                    case R.id.item01:
                        Toast.makeText(MainActivity.this, "item01", Toast.LENGTH_SHORT).show();
                        Log.v("MainActivity", "item01 clicked");
                        break;
                    case R.id.item02:
                        Toast.makeText(MainActivity.this, "item02", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item03:
                        Toast.makeText(MainActivity.this, "item03", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item04:
                        Toast.makeText(MainActivity.this, "item04", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_share:
                        Toast.makeText(MainActivity.this, "nav_share", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_send:
                        Toast.makeText(MainActivity.this, "nav_send", Toast.LENGTH_SHORT).show();
                        break;
                }
                item.setChecked(true);
                drawerLayout.closeDrawers();// 关闭侧边栏
                return true;
            }
        });
        nav_head_img.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                nav_head_img.setImageResource(R.mipmap.image);
                drawerLayout.closeDrawers();
                Toast.makeText(MainActivity.this, "IamgeView clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

不多解释了，直接看效果