昨天连续上了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作为基本布局,将自动产生向上移动的动画。
也就是这样
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="sample.wjj.materialdesignbottomsheets.MainActivity"> RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> Button android:id="@+id/byRecycleView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:background="#c2cc" android:text="RecycleView方式" android:textColor="@android:color/white" /> RelativeLayout> ImageView android:src="@drawable/flash" android:id="@+id/fillView" android:layout_width="match_parent" android:layout_height="match_parent">ImageView> android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fff" app:behavior_hideable="false" app:behavior_peekHeight="10dp" app:layout_behavior="@string/bottom_sheet_behavior" /> android.support.design.widget.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这个类是翔哥之前写的分割线
直接贴代码,然后在 // 里做解释