NavigationDrawer和NavigationView-Android M新控件

阅读量：4474 次

发布时间：2019-06-08

本文共 12858 字，大约阅读时间需要 42 分钟。

NavigationDrawer 简介

NavigationDrawer 是 Google 在 Material Design 中推出的一种侧滑导航栏设计风格。说起来很抽象，我们来看下网易云音乐侧滑导航栏的实现效果

这里写图片描述

想有漂亮的 Material Design，Google 已提供 Design Support Library 可供使用。它支援 2.1 或以上，提供不少好用的 UI element，可方便做到 Material Design Pattern 的效果。

为了实现这种效果，Google官方推出一个新控件 —— DrawerLayout 。而在 DrawerLayout 没诞生之前，需求中需要实现侧滑导航效果时，我们通常会选择去选择一些成熟的第三方开源库（如最有名的）来实现类似的效果。

既然官方有提供，我们为何不使用呢？不用引入第三方的jar，避免65536（你懂得），还能减少APP的体积，关键是使用起来简单，何乐而不为之呢？

DrawerLayout基本使用

英文666的童鞋可以查看这里

一般情况下，在DrawerLayout布局下只会存在两个子布局：

内容布局

侧滑菜单布局

这两个布局的关键在于 android:layout_gravity属性的设置。

如果你把其中一个子布局设置成了左侧滑菜单，只需要设置 android:layout_gravity=”start” 即可（也可以是left, 右侧滑为end或者right）。

没有设置的布局自然成为了内容布局

对，就这么简单…..按照常规，先上效果图，然后上code

效果图

这里写图片描述

Code

activity_naviation_drawer_base_use.xml

drawer_content_layout.xml

drawer_menu_layout.xml

NaviationDrawerBaseUseAct.java

package com.turing.navigationdrawer;import android.os.Bundle;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.view.Gravity; import android.view.View; import android.widget.RadioGroup; import android.widget.Toast; public class NaviationDrawerBaseUseAct extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{ private DrawerLayout drawerLayout ; private RadioGroup rg_setScrimColor ,rg_openDrawer ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_naviation_drawer_base_use); initView(); initEvents(); } private void initView() { //DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.simple_navigation_drawer); //RadioGroup rg_setScrimColor = (RadioGroup) findViewById(R.id.rg_scrim_color); rg_openDrawer = (RadioGroup) findViewById(R.id.rg_open_drawer); } private void initEvents() { //监听DrawerLayout的侧滑 drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerSlide(View drawerView, float slideOffset) { } @Override public void onDrawerOpened(View drawerView) { Toast.makeText(NaviationDrawerBaseUseAct.this, "onDrawerOpened", Toast.LENGTH_SHORT).show(); } @Override public void onDrawerClosed(View drawerView) { Toast.makeText(NaviationDrawerBaseUseAct.this, "onDrawerClosed", Toast.LENGTH_SHORT).show(); } @Override public void onDrawerStateChanged(int newState) { } }); // RadioGroup 监听事件 rg_setScrimColor.setOnCheckedChangeListener(this); rg_openDrawer.setOnCheckedChangeListener(this); } /** * RadioButton被选中后的操作 * @param group * @param checkedId */ @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId){ case R.id.rbtn_pink: drawerLayout.setScrimColor(getResources().getColor(R.color.color_e81d62)); break; case R.id.rbtn_green: drawerLayout.setScrimColor(getResources().getColor(R.color.color_4bae4f)); break; case R.id.rbtn_blue: drawerLayout.setScrimColor(getResources().getColor(R.color.color_2095f2)); break; case R.id.rbtn_from_left: drawerLayout.openDrawer(Gravity.LEFT);//打开菜单栏 break; case R.id.rbtn_from_right: drawerLayout.openDrawer(Gravity.RIGHT); break; default: break; } } }

注意事项

DrawerLayout 为 v4包中的 android.support.v4.widget.DrawerLayout

DrawerLayout的监听事件 new DrawerLayout.DrawerListener(){…}

Google为我们提供了DrawerLayout常用的API，比如打开或者关闭侧滑栏、控制侧滑栏的方向、设置滑动时渐变的阴影颜色和监听滑动事件等，详见

DrawerLayout 中的android:layout_width需要设置成match_parent，不能设置成wrap_content，否则会抛出 DrawerLayout must be measured with MeasureSpec.EXACTLY error -

效果图

这里写图片描述

NavigationView

官方文档

Represents a standard navigation menu for application. The menu contents can be populated by a menu resource file.

NavigationView is typically placed inside a DrawerLayout.

概述

在Google推出NavigationDrawer设计中，NavigationView和DrawerLayout是官方推荐的最佳组合。

NavigationView是一个导航菜单框架，使用menu资源填充数据，使我们可以更简单高效的实现导航菜单。它提供了不错的默认样式、选中项高亮、分组单选、分组子标题、以及可选的Header.

在使用NavigationView之前，因为它Android Design Support Library（Material Design的兼容包）中，所以我们需要在build.gradle中加入 compile ‘com.android.support:design:23.1.1’

apply plugin: 'com.android.application'android {    compileSdkVersion 23    buildToolsVersion "23.0.2"    defaultConfig {        applicationId "com.turing.navigationdrawer"        minSdkVersion 10 targetSdkVersion 23 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1' }

引用注意事项：

工程配置的 compileSdkVersion 是 23 ，所以需要引入 com.android.support:design：23.x.x 的版本。需要吐槽的是，这里如果你引入了 com.android.support:design：23.1.0 ，工程运行后 NavigationView 会报一个 android.view.InflateException：xxxxxx 的错误

运行效果

这里写图片描述

Code

最主要的两个属性分别是：

app:headerLayout接收一个layout，作为导航菜单顶部的Header，可选项。

app:menu接收一个menu，作为导航菜单的菜单项，几乎是必选项，不然这个控件就失去意义了。但也可以在运行时动态改变menu属性。

用于NavigationView的典型menu文件，应该是一个可选中菜单项的集合。其中checked=”true”的item将会高亮显示，这可以确保用户知道当前选中的菜单项是哪个。item的选中状态也可以在代码中设置。

activity_navigation_view_base_use.xml

navigation_drawer_header.xml

menu/navigation_drawer_menu.xml

在menu目录下

NavigationViewBaseUseAct.java

package com.turing.navigationdrawer;import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity; import android.view.MenuItem; import android.view.Window; import android.widget.Toast; public class NavigationViewBaseUseAct extends AppCompatActivity { private DrawerLayout drawerLayout; private NavigationView navigationView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_navigation_view_base_use); drawerLayout = (DrawerLayout) findViewById(R.id.drawer); navigationView = (NavigationView) findViewById(R.id.navigation_view); //设置菜单图标恢复本来的颜色,不设置的话 是没有颜色的...... navigationView.setItemIconTintList(null); // 设置监听事件 navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { switch (item.getItemId()){ case R.id.subitem_01: Toast.makeText(NavigationViewBaseUseAct.this, "sub item 01", Toast.LENGTH_SHORT).show(); break; default: break; } // 关闭drawerlayout drawerLayout.closeDrawers(); return true; } }); } }

注意事项：

-第一次运行代码的时候，图标的颜色居然都是灰色的….代码中可以调用下面这个APInavigationView.setItemIconTintList(null);//设置菜单图标恢复本来的颜色

NavigationView 基本已经规定设置好了大小距离，留给我们可以改动的空间并不多。详见如果你想调整一下菜单的布局宽高之类的，基本是不可能的了

仿网易云音乐的 NavigationDrawer 实现

官方运行图

这里写图片描述

里面的图标，可以下载APP，解压后，去文件夹里取出来~

主要就是一个线性布局的菜单并结合了的特性。

Code

activity_cloud_music.xml

沉浸式主题样式，需要在不同SDK的values目录下，设置样式，在Manifest.xml中通过 android:theme引用主题，别忘了 android:fitsSystemWindows=”true”。

效果图

这里写图片描述

左上角的导航动画效果实现

效果

这里写图片描述

ActionBarDrawerToggle实现

之前想要引入这种效果，都是来自第三方的开源代码，诸如下面两个比较有名的：

自从MaterialDesign出来之后，就再也需要了，Google提供了ActionBarDrawerToggle

activity_animation_left_top.xml

AnimationLeftTopAct.java

package com.turing.navigationdrawer;import android.content.res.Configuration;import android.os.Bundle;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.MenuItem; import android.view.Window; public class AnimationLeftTopAct extends AppCompatActivity { private Toolbar mToolbar; private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mActionBarDrawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_animation_left_top); mToolbar = (Toolbar) findViewById(R.id.toolbar); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer); mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close); mDrawerLayout.setDrawerListener(mActionBarDrawerToggle); } @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); mActionBarDrawerToggle.syncState(); } @Override public boolean onOptionsItemSelected(MenuItem item) { if (mActionBarDrawerToggle.onOptionsItemSelected(item)) { return true; } return super.onOptionsItemSelected(item); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); mActionBarDrawerToggle.onConfigurationChanged(newConfig); } }