2016年3月3日 星期四

Android 開發(115) new Design lib bottomSheet

最新發佈的support library 23.2.0 多了一個新的ui bottomSheet

算是一種蓋半頁的ui,常常可以在電商的app裡看到類似的用法






















以前要做這種ui真的是要自己想辦法處理,現在google提供了新的方案
讓我們可以輕鬆做到這個功能

接下來讓我們看看這個lib 實際運作的樣子



要怎麼做到? 方法其實很簡單
只要在想要使用bottomsheet的 layout 上面加上
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"即可
就會出現像上面的運作樣式

如下圖



那如果你希望可以有背景暗掉的感覺bottomsheet也提供使用dialog的做法
如下圖



你需要將想要放入bottomSheetDialog的 ui 利用dialog.setContentView塞進去之後
接著call dialog.show即可



如果在ui 出現或藏起來的情況下,想要自動讓ui 彈出來或縮起來的話
則必須使用BottomSheetBehavior 的setState method ,
裡面有個STATE_EXPANDED的參數



不過這個方法很hardcode,你可以看到先將LayoutParams強轉成CoordinateLayoutParams然後再強轉成bottomSheetBehavior

還好google 有提供比較簡單的做法



只需要使用BottomSheetBehavior.from就可以達到我們的目標了


最後要再提一個peekheight
我們常常可以看到有部分的ui 會凸出一小部分,讓你知道是可以滑動的
google 也提供了類似的功能
我們只需要設定peekheight,當bottomsheet在縮下去的時候就不會縮到完全不見
而是根據你給定的高度顯示



好了,說了那麼多,相信大家都對bottomsheet有基本的了解了
最近google真的出了很多新的ui ,真的讓開發app簡單很多啊!!!

沒有留言:

張貼留言