- MaterialDesign系列文章(十五)BottomShee
- MaterialDesign风格学习笔记
- MaterialDesign系列文章（六）Coordinator
- MaterialDesign系列文章（七）AppbarLayou
- MaterialDesign系列文章（四）FloatingAct
- MaterialDesign系列文章(九)AppBarLayou
- MaterialDesign系列文章(四)RecealAnima
- MaterialDesign系列文章(八)CollapsingT
- MaterialDesign系列文章(十三)FloatingAc
- MaterialDesign系列文章(十一)NestedScro
不多说了，开始我们今天的内容吧！今天介绍一下5.0新出的一个控件，这个控件的作用呢就是从底部弹出一个对话框，有点和照片选择的对话框类似，但是写法上呢就和对话框有很大的区别了。
其实BottomSheet是根据CoordinatorLayout基础上实现的，基本上都是依据layout_behavior进行实现的，这里不准备讲关于自定义behavior的实现，这里只是讲BottomSheet的behavior使用.
主要包括的内容:
- BottomSheet
- BottomSheetDialog
- BottomSheetDialogFragment
BottomSheet简单的使用:
1.在布局中使用BottomSheet
说下可以使用的XML属性
- app:behavior_peekHeight 当Bottom Sheets关闭的时候，底部我们能看到的高度,默认是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当我设置成具体高度的时候BottomSheet总是显示不出来???还请知道的在这里留个言,先谢谢了!
这里其实很简单,就是你自己些一个布局,然后在布局添加一个app:layout_behavior="@string/bottom_sheet_behavior"就可以使这个控件能从底部出来了,如果这个控件足够大的话,还能填满全屏.但是这里zhu
2.在代码中控制BottomSheet
2.1BottomSheetBehavior的几种状态说明:
- STATE_DRAGGING 过渡状态，此时用户正在向上或者向下拖动bottom sheet
- STATE_SETTLING 视图从脱离手指自由滑动到最终停下的这一小段时间
- STATE_EXPANDED bottom sheet 处于完全展开的状态：当bottom sheet的高度低于CoordinatorLayout容器时，整个bottom sheet都可见；或者CoordinatorLayout容器已经被bottom sheet填满。
- STATE_COLLAPSED 默认的折叠状态， bottom sheets只在底部显示一部分布局。显示高度可以通过 app:behavior_peekHeight 设置（默认是0）
- STATE_HIDDEN 默认无此状态（可通过app:behavior_hideable 启用此状态），启用后用户将能通过向下滑动完全隐藏 bottomSheet
/*当为折叠状态或者是打开状态的话就隐藏视图*/
if (mEasySheet.getState() == BottomSheetBehavior.STATE_HIDDEN) {
mEasySheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else if (mEasySheet.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
mEasySheet.setState(BottomSheetBehavior.STATE_EXPANDED);
}
这里说下我踩的坑:
- 这个里面没有关闭状态,只有一个折叠状态,但是看好啊这个是折叠的状态,只有当你把折叠状态设置成0的时候才能完全关闭底部的BottomSheet,否则会显示你peek设置的高度,只有你手指下滑的时候才能关闭它.
2.STATE_HIDDEN 这个状态只有设置了app:behavior_hideable为true的时候才能向下滑动的时候完全隐藏bottomSheet这里一定要注意.
3.setBottomSheetCallback监听
BottomSheetBehavio.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
/*状态改变的监听*/
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
/*当底部的BottomSheet被拖动的时候回调*/
}
});
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布局比较大都得话,会和你设置peek的高度似的,不会全部显示,但是你要是上滑的时候就会完全显示出来...
- 展示对话框
BottomSheetDialog sheetDialog = new BottomSheetDialog(this);
sheetDialog.setContentView(R.layout.sheet_dialog);
sheetDialog.show();
剩下的和Dialog的使用都差不多...
BottomSheetDialogFragment的使用
BottomSheetDialogFragment可以帮助我们实现全屏的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)
{
//点击任意布局关闭
mBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
}
调用BottomSheetDialogFragment展示
new FullSheetDialogFragment().show(getSupportFragmentManager(), "dialog");
BottomSheetDialogFragment的效果跟BottomSheetDialog差不多,根据情况选择。但是我觉得这个写着比较费劲,感觉还是Dialog比较好!!!
网友评论