Android Bottom Sheet詳解

Android Bottom Sheet詳解

最近android更新了support library, 版本到了23.2, 從官方blog中我們還是可以看到幾個令人心動的特性的,例如夜間模式的支援,BottomSheet.今天我們就來介紹一下這個Bottom Sheet,這可能會給我們開發中需要的一些效果帶來便利.

雖然這裡我們準備用整整一篇部落格的時間來介紹它,不過這東西使用起來太簡單了也太方便了,這還要感謝Behavior機制的引入,我記得在部落格源碼看CoordinatorLayout.Behavior原理中說過,Behavior其實是CoordinatorLayout
的核心內容,Behavior允許我們在不用自訂控制項的前提下實現一些效果,Bottom Sheet正是通過Behavior實現的.

首先我們來看一個效果,

這個效果的實現很簡單,甚至基本不需要java代碼,我們只需要給我們的下面的這個可滑動<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPrXEdmlld9K7uPZiZWhhdmlvcr7Nb2sssNHV4rj2YmVoYXZpb3LWuLaozqo8Y29kZT5hbmRyb2lkLnN1cHBvcnQuZGVzaWduLndpZGdldC5Cb3R0b21TaGVldEJlaGF2aW9yPC9jb2RlPr7Nv8nS1LTvtb3V4tbW0Ke5+8HLLMrHsrvKx7rcvPK1pT8gwLS/tL+0tPrC67DJLDwvcD4NCjxwcmUgY2xhc3M9"brush:java;">windows="true" android:layout_height="match_parent" android:layout_width="match_parent" tools:context="org.loader.bottomsheetmodule.MainActivity" 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">

看到NestedScrollView的behavior了嗎? 我們僅僅指定了一下他的值就可以了,其他的地方沒有任何特殊的.
雖然說我們不需要任何java代碼就可以實現,不過這裡我們還是希望可以通過按鈕去控制它,從底部滑出畢竟太隱藏了,沒有幾個人可以猜到.

public void intro(View view) { BottomSheetBehavior behavior = BottomSheetBehavior.from(findViewById(R.id.scroll)); if(behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) { behavior.setState(BottomSheetBehavior.STATE_COLLAPSED); }else { behavior.setState(BottomSheetBehavior.STATE_EXPANDED); }}

代碼也很簡單,首先我們從NestedScrollView上擷取到他的Behavior,因為我們知道是 BottomSheetBehavior,所以這裡直接死用BottomSheetBehavior.from方法來擷取,然後通過getState方法來判斷現在的狀態,如果是展開的狀態,我們就讓它收縮起來,反之,展開它.

我們還可以給BottomSheetBehavior一個callback來監聽狀態,

behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, int newState) { } @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { }});

這個確實簡單,不過有沒有發現它的使用者不是那麼的廣,接下來我們就要來介紹一個使用者相對來說廣泛點的BottomSheetDialog,這個Dialog可以實現什麼效果呢? 舉個例子吧,現在我們在商城相關的app,當我們點擊購買的時候需要選擇一下要購買的商品的屬性,以前我們可能是在底部彈出一個Popupwindow來實現,現在好了,我們可以利用BottomSheetDialog輕鬆的實現這個功能了.首先繼續來看看效果吧.

這裡是一個含有一個List的dialog,當我們點擊按鈕顯示的時候,它會出現一部分,當我們拖動它的時候,他會佔滿螢幕,現在我們就來看一下代碼如何?,

public void select(View view) { RecyclerView recyclerView = (RecyclerView) LayoutInflater.from(this) .inflate(R.layout.list, null); recyclerView.setItemAnimator(new DefaultItemAnimator()); recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)); Adapter adapter = new Adapter(); recyclerView.setAdapter(adapter); final BottomSheetDialog dialog = new BottomSheetDialog(this); dialog.setContentView(recyclerView); dialog.show(); adapter.setOnItemClickListener(new Adapter.OnItemClickListener() { @Override public void onItemClick(int position, String text) { Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show(); dialog.dismiss(); } });}static class Adapter extends RecyclerView.Adapter { private OnItemClickListener mItemClickListener; public void setOnItemClickListener(OnItemClickListener li) { mItemClickListener = li; } @Override public Adapter.Holder onCreateViewHolder(ViewGroup parent, int viewType) { View item = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false); return new Holder(item); } @Override public void onBindViewHolder(final Adapter.Holder holder, int position) { holder.tv.setText("item " + position); if(mItemClickListener != null) { holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mItemClickListener.onItemClick(holder.getLayoutPosition(), holder.tv.getText().toString()); } }); } } @Override public int getItemCount() { return 50; } class Holder extends RecyclerView.ViewHolder { TextView tv; public Holder(View itemView) { super(itemView); tv = (TextView) itemView.findViewById(R.id.text); } } interface OnItemClickListener { void onItemClick(int position, String text); }}

別看代碼長,主要是Adapter的代碼!而且沒有任何難度!我們來看select方法,這個方法中我們通過LayoutInflater載入了一個布局,這個布局很簡單,就是一個RecyclerView.接下來的幾行代碼是配置RecyclerView和它的Adapter,相信不用多說大家也已經很熟悉了.關鍵是繼續往下的3行代碼,首先我們new了一個BottomSheetDialog,然後通過setContentView方法把我們inflate進來的布局設定到這個dialog上,最後調用dialog的show方法將dialog顯示出來,這個效果就是這麼容易就實現了,這個dialog特性的代碼我們一行也沒有寫,android都已經幫我們完成好了.最後我們還在item的click事件中將這個dialog隱藏掉了.

好了,今天這篇部落格很簡單,主要是最新的support包中這個bottomSheet的使用,以後大家在項目中又可以多一種實現dialog的方式了, 趕緊嘗試一下吧.