算是一種蓋半頁的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簡單很多啊!!!
沒有留言:
張貼留言