Bottom Sheet

Bottom Sheet

上周android推出了Android Support Library 23.2版本，提供了一些新的API支持和对现有库增加新特性。

先来看看Bottom Sheet这个控件。

该控件一般用于底部划出表单，Material Design 设计官网上就有这种设计。

来看怎么用：

通过为CoordinatorLayout 的一个子view添加BottomSheetBehavior 表现行为即可。

layout_bottom_sheet.xml 里面定义的是sheet的布局，里面定义成什么就看你自己想怎么写了。

需要注意的就是，sheet的布局必须是CoordinatorLayout 的一个子view。

public static  BottomSheetBehavior from(V view) {
        ViewGroup.LayoutParams params = view.getLayoutParams();
        if (!(params instanceof CoordinatorLayout.LayoutParams)) {
            throw new IllegalArgumentException("The view is not a child of CoordinatorLayout");
        }
        CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) params)
                .getBehavior();
        if (!(behavior instanceof BottomSheetBehavior)) {
            throw new IllegalArgumentException(
                    "The view is not associated with BottomSheetBehavior");
        }
        return (BottomSheetBehavior) behavior;
    }

通过上面的代码可以看出，不是子view会出现IllegalArgumentException.

Bottom Sheet 一共有五个状态回调：

STATE_COLLAPSED
折叠状态。可通过app:behavior_peekHeight来设置默认显示的高度。

STATE_SETTING
拖拽松开之后到达终点位置（collapsed or expanded）前的状态。

STATE_EXPANDED
完全展开的状态。

STATE_HIDDEN
隐藏状态。默认是false，可通过app:behavior_hideable属性设置。

STATE_DRAGGING
被拖拽状态

View bottomSheet = findViewById(R.id.bottom_sheet);
        BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(View bottomSheet, int newState) {
                String state = "null";
                switch (newState) {
                    case 1:
                        state = "STATE_DRAGGING";
                        break;
                    case 2:
                        state = "STATE_SETTLING";
                        break;
                    case 3:
                        state = "STATE_EXPANDED";
                        break;
                    case 4:
                        state = "STATE_COLLAPSED";
                        break;
                    case 5:
                        state = "STATE_HIDDEN";
                        break;
                }
                Log.d("MainActivity", "newState:" + state);
            }
            @Override
            public void onSlide(View bottomSheet, float slideOffset) {
//                Log.d("MainActivity", "slideOffset:" + slideOffset);
            }
        });

注意：
如果Bottom Sheet中有需要滑动的视图，必须支持嵌套滑动才行。比如：NestedScrollView、RecyclerView或者API 21 + 上的ListView、ScrollView。

Support Library 23.2中还提供了BottomSheetDialog和BottomSheetDialogFragment。

用法与普通的dialog差不多。

Button dialogBtn = (Button) findViewById(R.id.bottom_sheet_dialog_btn);
        dialogBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                BottomSheetDialog dialog = new BottomSheetDialog(BottomSheetDemo.this);
                dialog.setContentView(R.layout.bottom_sheet_dialog_layout);
                dialog.show();
            }
        });

bottom_sheet_dialog_layout.xml

效果图：

Bottom Sheet介绍完毕。