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

结束

感谢大家查阅~加油~