Material Design学习之 Bottom Sheets (顺便提提CoordinatorLayout)

687 查看

昨天连续上了2篇介绍第三方库的文章,正直好久没提交自己写东西了,那么就补一篇之前MD系列漏的部分 Bottom Sheets

Bottom Sheets–底部动作条

底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。

在一个标准的列表样式的底部动作条(Bottom Sheets)中,每一个操作应该有一句描述和一个左对齐的 icon。如果需要的话,也可以使用分隔符对这些操作进行逻辑分组,也可以为分组添加标题或者副标题。

像这样:
这里写图片描述

请记得遵循MD严谨的设计规则,统一编剧,字体等尺寸规范,像这样

这里写图片描述

上面那种是类似于ListView的呈现,要变成类似于GridView的样子也行,像这样

这里写图片描述

原文地址:http://www.google.com/design/spec/components/bottom-sheets.html


CoordinatorLayout (不知道怎么称呼,泪目。。)

CoordinatorLayout实现了多种Material Design中提到的滚动效果(传送门:http://www.google.com/design/spec/patterns/scrolling-techniques.html)

打不开的话我就简单描述下,就是手势上下滑动的一些操作,像这样

这里写图片描述

只要使用CoordinatorLayout作为基本布局,将自动产生向上移动的动画。

也就是这样

更多介绍可以看:http://blog.csdn.net/xyz_lmn/article/details/48055919

接下来我们来看今天的例子

先上下效果图
这里写图片描述

这里写图片描述

这里把最上方的2种样式分别实现了一下(无视具体item 还是请跟着规范走)

这样的实现以前用PopupWindow我也写过一篇,效果大致差不多不过,Popup那一系列方法都得自己重写,还是比较麻烦的,这里也补下传送门:http://blog.csdn.net/ddwhan0123/article/details/50379340

OK,那我们来看下如何实现的

包结构

这里写图片描述

如果你不需要RecycleView的分割线的话就Copy走MainActivity内的内容即可DividerItemDecoration这个类是翔哥之前写的分割线

直接贴代码,然后在 // 里做解释

更多介绍可以看:http://blog.csdn.net/xyz_lmn/article/details/48055919

接下来我们来看今天的例子

先上下效果图
这里写图片描述

这里写图片描述

这里把最上方的2种样式分别实现了一下(无视具体item 还是请跟着规范走)

这样的实现以前用PopupWindow我也写过一篇,效果大致差不多不过,Popup那一系列方法都得自己重写,还是比较麻烦的,这里也补下传送门:http://blog.csdn.net/ddwhan0123/article/details/50379340

OK,那我们来看下如何实现的

包结构

这里写图片描述

如果你不需要RecycleView的分割线的话就Copy走MainActivity内的内容即可DividerItemDecoration这个类是翔哥之前写的分割线

直接贴代码,然后在 // 里做解释