不怕跌倒，所以飞翔

不多说了，开始我们今天的内容吧！今天介绍一下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文件:

这里我一直有一个疑问,为什么上面的布局的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

这里说明一下就是,如果你弹出的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比较好!!!

这一系列文章的地址,希望对大家有帮助

MaterialDesign系列文章(一)转场动画
MaterialDesign系列文章(二)Theme主题设置
MaterialDesign系列文章(三)Palette库来获取图片的主要色彩
MaterialDesign系列文章(四)RecealAnimation动画的使用
MaterialDesign系列文章(五)ToolBar的使用
MaterialDesign系列文章(六)沉浸式状态栏的使用
MaterialDesign系列文章(七)TabLayout的使用
MaterialDesign系列文章(八)CollapsingToolbarLayout的使用
MaterialDesign系列文章(九)AppBarLayout的使用
MaterialDesign系列文章(十)NavigationView和DrawerLayout的使用
MaterialDesign系列文章(十一)NestedScrollView的使用
MaterialDesign系列文章(十二)TextInputLayout的使用
MaterialDesign系列文章(十三)FloatingActionButton的使用
MaterialDesign系列文章(十四)SnackBar的使用
MaterialDesign系列文章(十五)BottomSheet的使用
MaterialDesign系列文章(十六)BottomNavigationView的使用
MaterialDesign系列文章(十七)Behavior的相关问题
CoordinatorLayout的分析

MaterialDesign系列文章(十五)BottomSheet的使用