不多說了，開始我們今天的內(nèi)容吧！今天介紹一下5.0新出的一個控件，這個控件的作用呢就是從底部彈出一個對話框，有點和照片選擇的對話框類似，但是寫法上呢就和對話框有很大的區(qū)別了。
其實BottomSheet是根據(jù)CoordinatorLayout基礎(chǔ)上實現(xiàn)的，基本上都是依據(jù)layout_behavior進行實現(xiàn)的，這里不準備講關(guān)于自定義behavior的實現(xiàn)，這里只是講BottomSheet的behavior使用.
主要包括的內(nèi)容:
- BottomSheet
- BottomSheetDialog
- BottomSheetDialogFragment
BottomSheet簡單的使用:
1.在布局中使用BottomSheet
說下可以使用的XML屬性
- app:behavior_peekHeight 當Bottom Sheets關(guān)閉的時候，底部我們能看到的高度,默認是0不可見。
- app:behavior_hideable 是當我們拖拽下拉的時候，bottom sheet是否能全部隱藏。
-app:layout_behavior="@string/bottom_sheet_behavior" 這個是使用BottomSheet所必須的
這里貼一下XML文件:
<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"
tools:context="com.hejin.materialdesign.activity.BottomSheetActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="展示"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable="false"
app:behavior_peekHeight="50dp"
app:layout_behavior="@string/bottom_sheet_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#333444"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center"
android:text="hehe"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
這里我一直有一個疑問,為什么上面的布局的LinearLayout當我設(shè)置成具體高度的時候BottomSheet總是顯示不出來???還請知道的在這里留個言,先謝謝了!
這里其實很簡單,就是你自己些一個布局,然后在布局添加一個app:layout_behavior="@string/bottom_sheet_behavior"就可以使這個控件能從底部出來了,如果這個控件足夠大的話,還能填滿全屏.但是這里zhu
2.在代碼中控制BottomSheet
2.1BottomSheetBehavior的幾種狀態(tài)說明:
- STATE_DRAGGING 過渡狀態(tài)，此時用戶正在向上或者向下拖動bottom sheet
- STATE_SETTLING 視圖從脫離手指自由滑動到最終停下的這一小段時間
- STATE_EXPANDED bottom sheet 處于完全展開的狀態(tài)：當bottom sheet的高度低于CoordinatorLayout容器時，整個bottom sheet都可見；或者CoordinatorLayout容器已經(jīng)被bottom sheet填滿。
- STATE_COLLAPSED 默認的折疊狀態(tài)， bottom sheets只在底部顯示一部分布局。顯示高度可以通過 app:behavior_peekHeight 設(shè)置（默認是0）
- STATE_HIDDEN 默認無此狀態(tài)（可通過app:behavior_hideable 啟用此狀態(tài)），啟用后用戶將能通過向下滑動完全隱藏 bottomSheet
/*當為折疊狀態(tài)或者是打開狀態(tài)的話就隱藏視圖*/
if (mEasySheet.getState() == BottomSheetBehavior.STATE_HIDDEN) {
mEasySheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else if (mEasySheet.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
mEasySheet.setState(BottomSheetBehavior.STATE_EXPANDED);
}
這里說下我踩的坑:
- 這個里面沒有關(guān)閉狀態(tài),只有一個折疊狀態(tài),但是看好啊這個是折疊的狀態(tài),只有當你把折疊狀態(tài)設(shè)置成0的時候才能完全關(guān)閉底部的BottomSheet,否則會顯示你peek設(shè)置的高度,只有你手指下滑的時候才能關(guān)閉它.
2.STATE_HIDDEN 這個狀態(tài)只有設(shè)置了app:behavior_hideable為true的時候才能向下滑動的時候完全隱藏bottomSheet這里一定要注意.
3.setBottomSheetCallback監(jiān)聽
BottomSheetBehavio.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
/*狀態(tài)改變的監(jiān)聽*/
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
/*當?shù)撞康腂ottomSheet被拖動的時候回調(diào)*/
}
});
BottomSheetDialog的使用
1.簡單的使用
- 首先要寫一個xml的布局,這個布局可以不被CooordinatorLayout包裹,但是還是推薦使用滑動控件NestedScrillView
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:onClick="doclick"
android:text="啦啦啦啦啦啦啦啦啦"
android:textColor="@color/white"
android:textSize="18sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="doclick"
android:scaleType="centerCrop"
android:src="@mipmap/photo"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
這里說明一下就是,如果你彈出的Dialog布局比較大都得話,會和你設(shè)置peek的高度似的,不會全部顯示,但是你要是上滑的時候就會完全顯示出來...
- 展示對話框
BottomSheetDialog sheetDialog = new BottomSheetDialog(this);
sheetDialog.setContentView(R.layout.sheet_dialog);
sheetDialog.show();
剩下的和Dialog的使用都差不多...
BottomSheetDialogFragment的使用
BottomSheetDialogFragment可以幫助我們實現(xiàn)全屏的BottomSheet展示效果。新建一個類繼承BottomSheetDialogFragment
xml使用BottomSheetDialog的布局樣式,我們直接看java代碼
public class FullSheetDialogFragment extends BottomSheetDialogFragment {
private BottomSheetBehavior mBehavior;
@Override
public Dialog onCreateDialog(Bundle savedInstanceState)
{
BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
View view = View.inflate(getContext(), R.layout.dialog_bottom_sheet, null);
dialog.setContentView(view);
mBehavior = BottomSheetBehavior.from((View) view.getParent());
return dialog;
}
@Override
public void onStart()
{
super.onStart();
//默認全屏展開
mBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
public void doclick(View v)
{
//點擊任意布局關(guān)閉
mBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
}
調(diào)用BottomSheetDialogFragment展示
new FullSheetDialogFragment().show(getSupportFragmentManager(), "dialog");
BottomSheetDialogFragment的效果跟BottomSheetDialog差不多,根據(jù)情況選擇。但是我覺得這個寫著比較費勁,感覺還是Dialog比較好!!!
