DrawerLayout + NavigationView实现侧滑菜单

来源：互联网发布：淘宝被管控处理怎么办编辑：程序博客网时间：2024/05/17 07:17

实现侧滑菜单有多种方式，如使用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();            }        });    }}

不多解释了，直接看效果

0 0