博客
关于我
Android滑动导航菜单的快速构建
阅读量:108 次
发布时间:2019-02-26

本文共 3333 字,大约阅读时间需要 11 分钟。

李济洲 算的上是本公众号的“老司机”了,今天就由他开车带大家学习——如何快速构建导航菜单。他的博客原文分为上下两篇,我这里给他整合成一篇了,希望不要超载~~:)

李济洲 的博客地址:

http://blog.csdn.net/leejizhou

序言

滑动导航菜单一直都是移动App中比较流行的UI设计,随着 Material Design 的盛行,Android也越来越多采用这种设计,当然这种滑动菜单样式也是各种各样五花八门,这篇文章就来总结下如何利用 Android Api 去快速构建各种类型的滑动导航菜单效果。

样式一

先看第一种样式,这也是QQ客户端V6版本的滑动菜单样式

快速实现这个UI效果需要 利用V4包的SlidingPaneLayout控件,这是一个帮助开发者实现 水平的多层滑动的Layout,继承自 ViewGroup

下面看下具体的实现代码:

layout:

代码还是很简单的,最外层是 SlidingPaneLayout 这个容器控件,里面放了两个子布局,第一个用来放置导航菜单布局,第二个放置主视图布局。

SlidingPaneLayout  一些主要方法:

  • setParallaxDistance(int parallaxBy) 设置滑动视差

  • setCoveredFadeColor(int color) 导航菜单视图的滑动颜色渐变

  • setSliderFadeColor(int color) 主视图的滑动颜色渐变

  • setPanelSlideListener(SlidingPaneLayout.PanelSlideListener listener) 滑动监听

  • openPane() 打开导航菜单 

  • closePane() 关闭导航菜单 

https://developer.android.com/reference/android/support/v4/widget/SlidingPaneLayout.html

OK,这样就实现了滑动导航的效果,注意在滑动监听中的这个方法里面,跟据 slideOffset 参数0~1的变化可以去改变视图大小就会做出更多种类的效果,这里我们设置滑动过程中改变主视图的大小,代码如下:

运行效果:

样式二

下面介绍第二种滑动导航菜单的效果,主视图不动,然后在边缘划出菜单

快速实现这个效果需要利用 V4包的DrawerLayout 这个布局容器,可见V4包下面有多少好东西,另外其实 SlidingPaneLayout 和这个 DrawerLayout 都是利用 V4的ViewDragHelper 去实现的,这是一个帮助类,这里就不多做介绍了,对它感兴趣的可以深入了解下。

看下代码实现:

layout:

需要注意的是主视图的布局代码要放在侧滑菜单布局的前面,侧滑菜单布局的代码中 android:layout_gravity=”start” 从左侧滑动,反之 end 右侧滑动。

DrawerLayout 的一些主要方法:

  • addDrawerListener(DrawerLayout.DrawerListener listener) 添加滑动监听

  • openDrawer(int gravity) 开启导航菜单 参数:GravityCompat.START GravityCompat.END 要跟 XML 设置相同

  • closeDrawer(int gravity) 关闭导航菜单

  • isDrawerOpen(int drawerGravity) 菜单是否开启 

https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html

DrawerLayout ActionBarDrawerToggle 配合快速就可以快速构建出具有动画交互的滑动导航菜单效果,是不是很简单。

当下的设计标准

接下来总结“当下”如何按照Android的设计标准去设计滑动导航菜单,我为什么说的“当下呢?因为这个设计标准是会变的。

material design 之前,官方对滑动导航菜单的设计标准是这样的:

图片来自:

http://www.androiduipatterns.com/2014/10/navigation-drawer-where-does-it-belong.html

滑动导航菜单需要在 Actionbar(Toolbar)下面,这在 Android 4.X 时代是比较常见的设计,也是当时的 Android Design 标准设计。

随着时间的推移,到了 Android 5.0 时代,google带来了 material design,新的设计风格变化比较大, 当然滑动导航菜单的设计标准也跟着改变了,下面是最新官方的滑动导航菜单设计文档:

在新的标准化设计当中,滑动导航菜单一跃来到了所有界面的顶端,这跟之前的设计是截然不同的。

新的滑动导航菜单结构介绍完,再看一下官方设计标准的排版样式:

图片看着可能有些小,官网地址:

https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-specs

当你看到这个精确到像素级的设计标准的时候,相信你也要气的关网页了吧,还好  Android 给我提供了一个叫 NavigationView 这个布局容器,我们可以很快的实现标准设计的滑动导航菜单栏,这也是 NavigationView 的最主要的用途,当出现新技术的时候,我们不仅仅需要会使用,还要去了解为什么使用它。

当然  NavigationView 如何使用已经遍地都是了,为了文章的完整性我还是放一些主要的实现代码吧。

NavigationView 是和 DrawLayout 配合使用的,把上面介绍的DrawLayout 使用示例中的菜单布局换成 NavigationView 就OK了。

实现步骤

因为 NavigationView Design库 中,需要添加依赖:

compile 'com.android.support:design:24.0.0'

DrawLayout 中添加 NavigationView

layout

因为属于 DrawLayout 的导航菜单布局,所以 NavigationView 要加上android:layout_gravity=”start” 代表从左面滑动,反之是“end”。 

其中的 app:headerLayout=”@layout/nv_header” 需要传入一个导航菜单的头部布局,它的作用如图绿框部分:

layout/nv_header.xml:

app:menu=”@menu/main_drawer” 用于设置导航菜单中的菜单部分,如图绿框中:

menu/main_drawer.xml:

最后是java中代码实现:

其中下面代码和布局代码中的 android:fitsSystemWindows=”true” 起到一个半透明状态栏的作用,半透明状态栏效果有各种实现方式,google也没能给一个好的实现方式,后续可能会考虑写一个全面的了解透明状态效果的文章,这里就不多做介绍了。

if(Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {           //透明状态栏    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);}

OK, 介绍了 Google最新的滑动导航菜单设计标准,欢迎大家在最后留言,谢谢。

点击下方 阅读原文 可查看源码下载地址。


如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。


欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号:

你可能感兴趣的文章
MySQL(4)运算符 | 关联查询详解
查看>>
MySQL(5)条件查询 | 单行函数 | 事务详解
查看>>
Mysql,group by分组查询、order by排序查询、join连接查询、union联合查询
查看>>
Mysql,sql文件导入和导出
查看>>
MYSQL:int类型升级到bigint,对PHP开发语言影响
查看>>
Mysql:mysql 5.X 报错 ERROR 1193 (HY000): Unknown system variable ‘validate_password_length‘
查看>>
MySQL:MySQL执行一条SQL查询语句的执行过程
查看>>
Mysql:SQL性能分析
查看>>
mysql:SQL按时间查询方法总结
查看>>
MySQL:什么样的字段适合加索引?什么样的字段不适合加索引
查看>>
MySQL:判断逗号分隔的字符串中是否包含某个字符串
查看>>
MySQL:某个ip连接mysql失败次数过多,导致ip锁定
查看>>
MySQL:索引失效场景总结
查看>>
Mysql:避免重复的插入数据方法汇总
查看>>
MyS中的IF
查看>>
M_Map工具箱简介及地理图形绘制
查看>>
m_Orchestrate learning system---二十二、html代码如何变的容易
查看>>
M×N 形状 numpy.ndarray 的滑动窗口
查看>>
m个苹果放入n个盘子问题
查看>>
n = 3 , while n , continue
查看>>