天天看點

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

繼續閱讀