天天看点

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

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

bottom sheets–底部动作条

底部动作条(bottom sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。 在一个标准的列表样式的底部动作条(bottom sheets)中,每一个操作应该有一句描述和一个左对齐的 icon。如果需要的话,也可以使用分隔符对这些操作进行逻辑分组,也可以为分组添加标题或者副标题。

像这样:

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

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

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

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

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

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

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

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

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

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

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

也就是这样

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

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

先上下效果图

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

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

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

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

包结构

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

如果你不需要recycleview的分割线的话就copy走mainactivity内的内容即可divideritemdecoration这个类是翔哥之前写的分割线

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

整体使用起来不复杂,而且拓展性好。只是对版本有一定的要求,至少21+的才可以作为.from()的寄存对象

源码地址:https://github.com/ddwhan0123/blogsample/blob/master/materialdesignbottomsheets.zip

继续阅读