Android Study Material Design 四 之：DrawerLayout+NavigationView组合实现侧滑 ^_^

LZ-Says：快乐博客分享，悲伤独自掩藏。为了前方的路，再艰难又如何？

前言

上一章为大家引入了新的侧滑菜单实现，地址如下：

Android Study Material Design 三 之：侧滑DrawerLayout ^_^

而今天为大家带来新的实现方式，那便是如文章标题所述，通过DrawerLayout+NavigationView组合实现侧滑。

本文目标

带你装逼带你飞，带你走进垃圾堆~

通过DrawerLayout+NavigationView组合实现侧滑，让你下次面对侧滑菜单可以更加轻松应对。

运行结果图

还是老规矩，放图：

NavigationView简述

玩之前，我们先来了解下这个东东，主要分为三步走。

• 首先，NavigationView是谷歌在Material Design中所包含的新生事物之一，它重新规范了侧滑菜单的使用，让我们在使用起来使得更加得心应手。

• 其次，NavigationView一般常和DrawerLayout进行搭配使用，可谓是男女搭配干活不累哈。

• 最后通过开放api进行使用，暂时列举几个，如下：

  • app:headerLayout： 添加头部；
    
    
  • app:menu： 添加菜单项；
    
    
  • app:itemBackground： 设置item背景颜色；
    
    
  • app:itemTextColor： 设置item字体颜色；
    
    
  • 当让还有其他的一些API，这里就不一一介绍了。

这时候，大家会有疑问了，那么头部和菜单项有什么区别吗？

在这里就不得不提谷歌Baba的人性化了，LZ不解释，放张图即可，相信大家会明白的，如下：

最后为大家拓展下小内容：

1. 如何添加分割线？

1）相同类型的item用group包裹，即会自动添加；2）相同类型放置menu中也能实现相应效果；

2. 如何实现类似标题分级，例如示例中交友？

1）item包裹menu即可实现，具体查看源码；

来一发

1. 首先定义头布局，一切以简单为主：

<?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:orientation="vertical">    <ImageView        android:id="@+id/id_nv_head_img"        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_gravity="center_horizontal"        android:layout_marginTop="15dp"        android:background="@mipmap/ic_launcher_round" />    <TextView        android:id="@+id/id_nv_head_username"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:gravity="center"        android:padding="15dp"        android:text="静心Study" />    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:gravity="center"        android:padding="15dp"        android:text="尊贵VIP会员" /></LinearLayout>

2. 其次定义菜单项布局：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:id="@+id/action_gallery"        android:icon="@android:drawable/ic_menu_gallery"        android:orderInCategory="100"        android:title="Gallery" />    <item        android:id="@+id/action_info_details"        android:icon="@android:drawable/ic_menu_info_details"        android:orderInCategory="100"        android:title="个人详情" />    <item        android:id="@+id/action_about"        android:icon="@android:drawable/ic_menu_help"        android:orderInCategory="100"        android:title="个人帮助" />    <item        android:icon="@android:drawable/ic_dialog_email"        android:orderInCategory="100"        android:title="交友">        <menu>            <item                android:id="@+id/action_call_me"                android:icon="@android:drawable/ic_menu_call"                android:title="Call Me" />            <item                android:icon="@android:drawable/ic_menu_camera"                android:title="Take Pic" />        </menu>    </item>    <group android:id="@+id/id_group1">        <item            android:icon="@android:drawable/ic_menu_info_details"            android:orderInCategory="100"            android:title="如果爱你" />        <item            android:icon="@android:drawable/ic_menu_help"            android:orderInCategory="100"            android:title="是种罪" />    </group></menu>

3. 主布局中引用头布局以及菜单布局，并设置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="com.materialdesignstudy.navigationview.NavigationActivity">    <!-- 内容部分 -->    <FrameLayout        android:id="@+id/id_nv_frame"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@android:color/holo_orange_light">        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="DrawerLayout + NavigationView实现侧滑" />    </FrameLayout>    <!-- 菜单部分 -->    <android.support.design.widget.NavigationView        android:id="@+id/id_nv"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="#fff"        app:headerLayout="@layout/navigation_head"        app:itemBackground="@color/red"        app:itemTextColor="@color/blue"        app:menu="@menu/navigation_menu" /></android.support.v4.widget.DrawerLayout>

4. Activity 中初始化并设置监听：

package com.materialdesignstudy.navigationview;import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.v7.app.AppCompatActivity;import android.view.MenuItem;import android.view.View;import android.widget.Toast;import com.materialdesignstudy.R;public class NavigationActivity extends AppCompatActivity {    private NavigationView mNavigationView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_navugation);        initView();    }    private void initView() {        mNavigationView = findViewById(R.id.id_nv);        View headView = mNavigationView.getChildAt(0);        headView.findViewById(R.id.id_nv_head_img).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(NavigationActivity.this, "点击了头像", Toast.LENGTH_SHORT).show();            }        });        headView.findViewById(R.id.id_nv_head_username).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(NavigationActivity.this, "点击了用户名称", Toast.LENGTH_SHORT).show();            }        });        // 设置item选中事件        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem menuItem) {                if (menuItem.getItemId() == R.id.action_call_me) {                    Toast.makeText(NavigationActivity.this, "当前点击了给我打电话", Toast.LENGTH_SHORT).show();                }                Toast.makeText(NavigationActivity.this, "当前点击了：" + menuItem.getTitle().toString(), Toast.LENGTH_SHORT).show();                return true;            }        });    }}

OK，到此为止，是不是不知不觉中又get到新技能？

GitHub查看地址

https://github.com/HLQ-Struggle/MaterialDesignStudy

结束

感谢大家查阅~加油~