不多說(shuō)了，開(kāi)始我們今天的內(nèi)容吧斩启！今天介紹一下5.0新出的一個(gè)控件序调，這個(gè)控件的作用呢就是從底部彈出一個(gè)對(duì)話框，有點(diǎn)和照片選擇的對(duì)話框類似兔簇，但是寫(xiě)法上呢就和對(duì)話框有很大的區(qū)別了发绢。
其實(shí)BottomSheet是根據(jù)CoordinatorLayout基礎(chǔ)上實(shí)現(xiàn)的硬耍，基本上都是依據(jù)layout_behavior進(jìn)行實(shí)現(xiàn)的，這里不準(zhǔn)備講關(guān)于自定義behavior的實(shí)現(xiàn)边酒，這里只是講BottomSheet的behavior使用.
主要包括的內(nèi)容:
- BottomSheet
- BottomSheetDialog
- BottomSheetDialogFragment
BottomSheet簡(jiǎn)單的使用:
1.在布局中使用BottomSheet
說(shuō)下可以使用的XML屬性
- app:behavior_peekHeight 當(dāng)Bottom Sheets關(guān)閉的時(shí)候经柴，底部我們能看到的高度,默認(rèn)是0不可見(jiàn)。
- app:behavior_hideable 是當(dāng)我們拖拽下拉的時(shí)候墩朦，bottom sheet是否能全部隱藏坯认。
-app:layout_behavior="@string/bottom_sheet_behavior" 這個(gè)是使用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>
這里我一直有一個(gè)疑問(wèn),為什么上面的布局的LinearLayout當(dāng)我設(shè)置成具體高度的時(shí)候BottomSheet總是顯示不出來(lái)???還請(qǐng)知道的在這里留個(gè)言,先謝謝了!
這里其實(shí)很簡(jiǎn)單,就是你自己些一個(gè)布局,然后在布局添加一個(gè)app:layout_behavior="@string/bottom_sheet_behavior"就可以使這個(gè)控件能從底部出來(lái)了,如果這個(gè)控件足夠大的話,還能填滿全屏.但是這里zhu
2.在代碼中控制BottomSheet
2.1BottomSheetBehavior的幾種狀態(tài)說(shuō)明:
- STATE_DRAGGING 過(guò)渡狀態(tài)，此時(shí)用戶正在向上或者向下拖動(dòng)bottom sheet
- STATE_SETTLING 視圖從脫離手指自由滑動(dòng)到最終停下的這一小段時(shí)間
- STATE_EXPANDED bottom sheet 處于完全展開(kāi)的狀態(tài)：當(dāng)bottom sheet的高度低于CoordinatorLayout容器時(shí)氓涣，整個(gè)bottom sheet都可見(jiàn)牛哺；或者CoordinatorLayout容器已經(jīng)被bottom sheet填滿。
- STATE_COLLAPSED 默認(rèn)的折疊狀態(tài)劳吠， bottom sheets只在底部顯示一部分布局引润。顯示高度可以通過(guò) app:behavior_peekHeight 設(shè)置（默認(rèn)是0）
- STATE_HIDDEN 默認(rèn)無(wú)此狀態(tài)（可通過(guò)app:behavior_hideable 啟用此狀態(tài)），啟用后用戶將能通過(guò)向下滑動(dòng)完全隱藏 bottomSheet
/*當(dāng)為折疊狀態(tài)或者是打開(kā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);
}
這里說(shuō)下我踩的坑:
- 這個(gè)里面沒(méi)有關(guān)閉狀態(tài),只有一個(gè)折疊狀態(tài),但是看好啊這個(gè)是折疊的狀態(tài),只有當(dāng)你把折疊狀態(tài)設(shè)置成0的時(shí)候才能完全關(guān)閉底部的BottomSheet,否則會(huì)顯示你peek設(shè)置的高度,只有你手指下滑的時(shí)候才能關(guān)閉它.
2.STATE_HIDDEN 這個(gè)狀態(tài)只有設(shè)置了app:behavior_hideable為true的時(shí)候才能向下滑動(dòng)的時(shí)候完全隱藏bottomSheet這里一定要注意.
3.setBottomSheetCallback監(jiān)聽(tīng)
BottomSheetBehavio.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
/*狀態(tài)改變的監(jiān)聽(tīng)*/
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
/*當(dāng)?shù)撞康腂ottomSheet被拖動(dòng)的時(shí)候回調(diào)*/
}
});
BottomSheetDialog的使用
1.簡(jiǎn)單的使用
- 首先要寫(xiě)一個(gè)xml的布局,這個(gè)布局可以不被CooordinatorLayout包裹,但是還是推薦使用滑動(dòng)控件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>
這里說(shuō)明一下就是,如果你彈出的Dialog布局比較大都得話,會(huì)和你設(shè)置peek的高度似的,不會(huì)全部顯示,但是你要是上滑的時(shí)候就會(huì)完全顯示出來(lái)...
- 展示對(duì)話框
BottomSheetDialog sheetDialog = new BottomSheetDialog(this);
sheetDialog.setContentView(R.layout.sheet_dialog);
sheetDialog.show();
剩下的和Dialog的使用都差不多...
BottomSheetDialogFragment的使用
BottomSheetDialogFragment可以幫助我們實(shí)現(xiàn)全屏的BottomSheet展示效果痒玩。新建一個(gè)類繼承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();
//默認(rèn)全屏展開(kāi)
mBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
public void doclick(View v)
{
//點(diǎn)擊任意布局關(guān)閉
mBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
}
調(diào)用BottomSheetDialogFragment展示
new FullSheetDialogFragment().show(getSupportFragmentManager(), "dialog");
BottomSheetDialogFragment的效果跟BottomSheetDialog差不多,根據(jù)情況選擇淳附。但是我覺(jué)得這個(gè)寫(xiě)著比較費(fèi)勁,感覺(jué)還是Dialog比較好!!!
