最详细的 Android NavigationDrawer 开发实践总结

2024-08-30 16:08
文章标签 android 总结 实践 开发 详细 navigationdrawer

本文主要是介绍最详细的 Android NavigationDrawer 开发实践总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

继前面写的两篇文章之后（ 有问题欢迎反馈哦 ）：

  1. Android开发：Translucent System Bar 的最佳实践
  2. Android开发：最详细的 Toolbar 开发实践总结

接着来写写Android系统UI新特性，本文是我对最近开发过程中应用 NavigationDrawer 特性的详细总结。 本文涉及到的所有代码实现细节，会在文末附上源码地址。有问题欢迎在下方留言讨论 。

NavigationDrawer 简介

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

网易云音乐侧滑导航栏效果

Google 为了支持这样的导航效果，推出一个新控件 —— DrawerLayout 。而在 DrawerLayout 没诞生之前，需求中需要实现侧滑导航效果时，我们必然会选择去选择一些成熟的第三方开源库（如最有名的 SlidingMenu ）来完成开发 。效果上，普遍都像 手Q 那样：

手Q的SlidingMenu实现侧滑效果

在对比过 DrawerLayout 和 SlidingMenu 的实现效果后，基于以下的几点，我认为完全可以在开发中使用 DrawerLayout 取代以前的 SlidingMenu ：

  1. 从动画效果上看，你会发现两者仅仅是在移动的效果上有些差别外，其他地方并没有太大的差异
  2. 在交互效果上，我认为这两者都差不多的，就算你把 网易云音乐 的效果套到了 手Q 上，也不会影响到用户的交互
  3. DrawerLayout 用起来比 SlidingMenu 更简单，代码量更少(往下看就知道了)
  4. DrawerLayout 是向下兼容的，所以不会存在低版本兼容性问题
  5. Google 亲儿子，没理由不支持啊！！！！！！

到这里，要是你还没有引入 DrawerLayout 开发的冲动，请继续听我为你好好安利一番。

初识 DrawerLayout

一般情况下，在 DrawerLayout 布局下只会存在两个子布局，一个 内容布局 和 一个 侧滑菜单布局 ，这两个布局关键在于 android:layout_gravity 属性的设置。如果你想把其中一个子布局设置成为左侧滑菜单，只需要设置 android:layout_gravity=”start” 即可（也可以是 left，右侧滑则为 end 或 right ），而没有设置的布局则自然成为 内容布局 。那么，使用 DrawerLayout 到底有多简单呢，我们先直接看看下面的布局文件

layout/activity_simple_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v4.widget.DrawerLayoutandroid:id="@+id/simple_navigation_drawer"android:layout_width="match_parent"android:layout_height="match_parent"><!--内容视图--><includeandroid:id="@+id/tv_content"layout="@layout/drawer_content_layout"android:layout_width="match_parent"android:layout_height="match_parent" /><!--左侧滑菜单栏--><includelayout="@layout/drawer_menu_layout"android:layout_width="250dp"android:layout_height="match_parent"android:layout_gravity="start" /><!--右侧滑菜单栏--><includelayout="@layout/drawer_menu_layout"android:layout_width="250dp"android:layout_height="match_parent"android:layout_gravity="end" /></android.support.v4.widget.DrawerLayout></RelativeLayout>

到此，你在 Activity 里面什么都不用做，就已经完成了下面侧滑效果的实现了，简单到害怕有木有。

最简单的侧滑效果实现

在欣赏着 DrawerLayout 简单方便的同时，Google 也为我们提供了 DrawerLayout 很多常用的API，其中包括：打开或关闭侧滑栏、控制侧滑栏的方向、设置滑动时渐变的阴影颜色和监听滑动事件等。

SimpleDrawerActivity运行效果

具体详细代码请参加工程中的 SimpleDrawerActivity，此处就不贴代码了。还有一处 DrawerLayout 使用的小细节需要温馨提醒一下，有一次，我手误把 DrawerLayout 的 android:layout_width 设置成 wrap_content ，就出现下面的异常了

DrawerLayout的wrap_content错误

遇到过相同情况的童鞋，只需要把 android:layout_width 设置成 match_parent 即可。

再识 NavigationView

在 Google 推出 NavigationDrawer 设计中， NavigationView 和 DrawerLayout 是官方推荐的最佳组合。在使用 NavigationView 前，因为它是在 Material Design 的兼容包中，所以需要先在 build.gradle 中引入

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 的错误（又是一个大坑）。

接下来简单的介绍一下 NavigationView 的使用，我们继续看看几个相关布局文件 layout/activity_simple_navigation_drawer.xml 、 layout/navigation_drawer_header.xml 、 menu/navigation_drawer_menu.xml 和 实现效果：

layout/activity_simple_navigation_drawer.xml
<?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"android:id="@+id/drawer"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="NavigationDrawerContent" /></LinearLayout><android.support.design.widget.NavigationViewandroid:id="@+id/navigation_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"app:headerLayout="@layout/navigation_drawer_header"app:menu="@menu/navigation_drawer_menu" /></android.support.v4.widget.DrawerLayout>
layout/navigation_drawer_header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="250dp"android:background="@color/color_512da8"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentLeft="true"android:layout_margin="10dp"android:text="HeaderLayout"android:textColor="@android:color/white"android:textSize="18sp" />
</RelativeLayout>
menu/navigation_drawer_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><itemandroid:id="@+id/item_green"android:icon="@mipmap/green"android:title="Green" /><itemandroid:id="@+id/item_blue"android:icon="@mipmap/blue"android:title="Blue" /><itemandroid:id="@+id/item_pink"android:icon="@mipmap/pink"android:title="Pink" /></group><item android:title="SubItems"><menu><itemandroid:id="@+id/subitem_01"android:icon="@mipmap/ic_launcher"android:title="SubItem01" /><itemandroid:id="@+id/subitem_02"android:icon="@mipmap/ic_launcher"android:title="SubItem02" /><itemandroid:id="@+id/subitem_03"android:icon="@mipmap/ic_launcher"android:title="SubItem03" /></menu></item><item android:title="SubItems"><menu><itemandroid:id="@+id/subitem_04"android:icon="@mipmap/ic_launcher"android:title="SubItem04" /><itemandroid:id="@+id/subitem_05"android:icon="@mipmap/ic_launcher"android:title="SubItem05" /><itemandroid:id="@+id/subitem_06"android:icon="@mipmap/ic_launcher"android:title="SubItem06" /></menu></item>
</menu>

最终得到下面的效果

activity_simple_navigation_drawer.xml实现效果

总的来说， NavigationView 比较关键的属性就只有 app:headerLayout 和 app:menu ，它们分别对应效果图中顶部的 紫色区域（layout/navigation_drawer_header.xml） 和 下方的 填充菜单项(menu/navigation_drawer_menu.xml) 。其实是用起来也和 DrawerLayout 一样，非常简单。

不实用的 NavigationView

其实谈到 NavigationView，个人认为它设计并不实用，而且是比较呆板的。最直接的一点是，它的菜单图标

NavigationView默认图标颜色

第一次运行代码的时候，把我五颜六色的图标居然跑出来这效果，差点没一口水喷在屏幕上。好在代码中可以调用下面这个API

    mNavigationView.setItemIconTintList(null);//设置菜单图标恢复本来的颜色

还原菜单图标庐山真面目。（着实看不懂 Google 的设计了…）

其次，是关于菜单相中图标大小和文字间距之类的设置，从 Google 的设计文档来看，

NavigationView设计

NavigationView 基本已经规定设置好了大小距离，留给我们可以改动的空间并不多。如果你想调整一下菜单的布局宽高之类的，基本是不可能的了（即使可能，也估计非常蛋疼）。所以，目前我基本还没见过国内哪个 app 是直接使用了 NavigationView 来做导航（如果有的话，欢迎告知一下）。

以上关于 NavigationView 不实用，仅是本人的一些看法，如果你有不同看法，欢迎留言讨论。为了加深一下 NavigationDrawer 设计的实践，下面来大致的模仿实现网易云音乐的导航效果。

仿网易云音乐的 NavigationDrawer 实现

先来看看网易云音乐的效果

云音乐导航菜单

主要就是一个线性布局的菜单并结合了 Translucent System Bar 的特性（还不知道的童鞋请看我前面写的文章哈），下面就直接看看大致实现的布局文件 :

layout/activity_cloud_music.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/drawer"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/color_cd3e3a"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="65dp"android:background="@color/color_cd3e3a"android:gravity="center"android:text="网易云音乐"android:textColor="@android:color/white"android:textSize="18sp" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/white"android:orientation="vertical"></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/navigation_view"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"android:background="@android:color/white"android:fitsSystemWindows="true"android:orientation="vertical"><ImageViewandroid:layout_width="match_parent"android:layout_height="180dp"android:scaleType="centerCrop"android:src="@mipmap/topinfo_ban_bg" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:gravity="center_vertical"android:orientation="horizontal"><ImageViewandroid:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:src="@mipmap/topmenu_icn_msg" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="我的消息"android:textColor="@android:color/black"android:textSize="15sp" /></LinearLayout>.........</LinearLayout>
</android.support.v4.widget.DrawerLayout>

最终即可实现类似网易云音乐的效果。

仿造网易云音乐

彩蛋

彩蛋一：左上角的导航动画效果实现

左上角的导航动画

经常会看有些 app 的左上角有这些带感的导航动画，之前想要引入这种效果，都是来自第三方的开源代码，诸如下面两个比较有名的：

  1. LDrawer
  2. android-ui

而现在再也不需要了，Google 推出的 ActionBarDrawerToggle 也能实现这样的效果了，具体查看我在 NavigationDrawerAnimationActivity 中的实现代码

ActionBarDrawerToggle实现效果

如果你对上面这种动画，效果不满意，也可以考虑一下 material-menu 的另一种实现效果。

material-menu动画效果

彩蛋二：比 NavigationView 更好的选择

前面提到 NavigationView 的不实用性，如果你真的要实现 NavigationView那样的效果，又渴望比较高的自由度。这个功能强大且自由度很高的开源库 MaterialDrawer 应该是个很不错的选择。

MaterialDrawer 效果图一

MaterialDrawer 效果图二

总结

到此，对于 NavigationDrawer 的实践总结基本结束。整体给我的感觉是，自从 Material Design 设计开始推出后，Google 推出的这些新控件使用起来更加简单，这能让我们更好的把精力放在编写业务代码上。很多以前需要借助第三方开源库才能实现的效果，现在已经慢慢的不需要了。当然，我们依旧可以去深入的学习这些优秀开源代码，沉淀到更多的干货。这样，小菜也就慢慢成为大牛了。

分享即美德，源代码请看： https://github.com/D-clock/AndroidSystemUiTraining ，本篇的主要实现代码如下红圈所示

主要示例代码

转自：http://www.codeceo.com/article/android-navigationdrawer.html

这篇关于最详细的 Android NavigationDrawer 开发实践总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1121289。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
学习hash总结

学习hash总结

2014/1/29/   最近刚开始学hash，名字很陌生，但是hash的思想却很熟悉，以前早就做过此类的题，但是不知道这就是hash思想而已，说白了hash就是一个映射，往往灵活利用数组的下标来实现算法，hash的作用：1、判重；2、统计次数；
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2