最详细的 NavigationDrawer 开发实践总结(上)
来源:互联网 发布:狗镇 知乎 编辑:程序博客网 时间:2024/05/18 15:29
最详细的 NavigationDrawer 开发实践总结
继前面写的两篇文章之后(有问题欢迎反馈哦):
Translucent System Bar 的最佳实践
最详细的 Toolbar 开发实践总结
接着来写写Android系统UI新特性,本文是我对最近开发过程中应用 NavigationDrawer 特性的详细总结。本文涉及到的所有代码实现细节,会在文末附上源码地址。有问题欢迎在下方留言讨论 。
NavigationDrawer 简介
NavigationDrawer 是 Google 在 Material Design 中推出的一种侧滑导航栏设计风格。说起来可能很抽象,我们直接来看看 网易云音乐 的侧滑导航栏效果
网易云音乐侧滑导航栏效果
Google 为了支持这样的导航效果,推出一个新控件 —— DrawerLayout 。而在 DrawerLayout 没诞生之前,需求中需要实现侧滑导航效果时,我们必然会选择去选择一些成熟的第三方开源库(如最有名的 SlidingMenu)来完成开发 。效果上,普遍都像 手Q 那样:
手Q的SlidingMenu实现侧滑效果
在对比过 DrawerLayout 和 SlidingMenu 的实现效果后,基于以下的几点,我认为完全可以在开发中使用 DrawerLayout 取代以前的 SlidingMenu:
从动画效果上看,你会发现两者仅仅是在移动的效果上有些差别外,其他地方并没有太大的差异
在交互效果上,我认为这两者都差不多的,就算你把 网易云音乐 的效果套到了 手Q 上,也不会影响到用户的交互
DrawerLayout 用起来比 SlidingMenu 更简单,代码量更少(往下看就知道了)
DrawerLayout 是向下兼容的,所以不会存在低版本兼容性问题
Google 亲儿子,没理由不支持啊!!!!!!
到这里,要是你还没有引入 DrawerLayout 开发的冲动,请继续听我为你好好安利一番。
初识 DrawerLayout
一般情况下,在 DrawerLayout 布局下只会存在两个子布局,一个 内容布局 和 一个 侧滑菜单布局,这两个布局关键在于 android:layout_gravity 属性的设置。如果你想把其中一个子布局设置成为左侧滑菜单,只需要设置 android:layout_gravity=”start” 即可(也可以是 left,右侧滑则为 end 或 right ),而没有设置的布局则自然成为 内容布局 。那么,使用 DrawerLayout 到底有多简单呢,我们先直接看看下面的布局文件
layout/activity_simple_drawer.xml
<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="@+id/simple_navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容视图-->
<include
android:id="@+id/tv_content"
layout="@layout/drawer_content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--左侧滑菜单栏-->
<include
layout="@layout/drawer_menu_layout"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
<!--右侧滑菜单栏-->
<include
layout="@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
<?xmlversion="1.0"encoding="utf-8"?>
<android.support.v4.widget.DrawerLayoutxmlns: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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="NavigationDrawerContent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android: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
<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@color/color_512da8">
<TextView
android: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
<?xmlversion="1.0"encoding="utf-8"?>
<menuxmlns:android="http://schemas.android.com/apk/res/android">
<groupandroid:checkableBehavior="single">
<item
android:id="@+id/item_green"
android:icon="@mipmap/green"
android:title="Green" />
<item
android:id="@+id/item_blue"
android:icon="@mipmap/blue"
android:title="Blue" />
<item
android:id="@+id/item_pink"
android:icon="@mipmap/pink"
android:title="Pink" />
</group>
<itemandroid:title="SubItems">
<menu>
<item
android:id="@+id/subitem_01"
android:icon="@mipmap/ic_launcher"
android:title="SubItem01" />
<item
android:id="@+id/subitem_02"
android:icon="@mipmap/ic_launcher"
android:title="SubItem02" />
<item
android:id="@+id/subitem_03"
android:icon="@mipmap/ic_launcher"
android:title="SubItem03" />
</menu>
</item>
<itemandroid:title="SubItems">
<menu>
<item
android:id="@+id/subitem_04"
android:icon="@mipmap/ic_launcher"
android:title="SubItem04" />
<item
android:id="@+id/subitem_05"
android:icon="@mipmap/ic_launcher"
android:title="SubItem05" />
<item
android: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 开发实践总结(上)
- 最详细的 NavigationDrawer 开发实践总结
- 最详细的 NavigationDrawer 开发实践总结(下)
- Android开发:最详细的 NavigationDrawer 开发实践总结
- 最详细的 Android NavigationDrawer 开发实践总结
- 最详细的Toolbar开发实践总结
- 最详细的 Toolbar 开发实践总结
- 最详细的 Toolbar 开发实践总结
- 最详细的 Toolbar 开发实践总结
- Android开发:最详细的 Toolbar 开发实践总结
- Android开发:最详细的 Toolbar 开发实践总结
- Android开发:最详细的 Toolbar 开发实践总结
- Android开发:最详细的 Toolbar 开发实践总结
- Android开发:最详细的 Toolbar 开发实践总结
- Android开发:最详细的 Toolbar 开发实践总结
- 最详细的 Android Toolbar 开发实践总结
- 最详细的 Android Toolbar 开发实践总结
- 最详细的 Android Toolbar 开发实践总结
- The surface has been released
- 利用java的异常处理自己写个一个图书借阅系统的小案例
- 【IOS学习】CocoaPods安装使用及配置私有库
- CSDN 博客文章误删到回收站 恢复
- UVa 397 - Equation Elation
- 最详细的 NavigationDrawer 开发实践总结(上)
- 通过rosjava实现android订阅ROS自定义消息
- 九度1023
- Android开源项目大全 - 视图View类
- 51Nod 1344 走格子
- vp9 命令行参数
- 详解 CSS 属性 - 伪类和伪元素的区别
- 1005 Number Sequence
- 项目发布: error CS0103: 当前上下文中不存在名称“*****”