MaterialDesign之BottomSheet（底部动作条）

底部动作条（BottomSheet）

• 底部动作条是一个从屏幕底部边缘向上滑出的面板，常见与高德地图里，你选中某个地点后，会从底部弹出相关信息，很好用。
• 关于BotoomSheet沉浸式显示参考这篇文章BottomSheetDialog沉浸式

使用步骤：

• 添加MaterialDesign依赖：

//保持与编译版本号一致
 implementation 'com.android.support:design:30.0.0-alpha1'

1、BottomSheetBehavior用法：

• MainActivity布局,注意：必须是CoordinatorLayout布局，否则会报错

• 主界面内容，content_main.xml布局，就是几个按钮监听

• 底层动作条布局，以及相关属性解释

• app:behavior_hideable = "true",代表底部布局可以完全隐藏，false代表不隐藏
• app:behavior_peekHeight = "60dp"，代表底层动作条布局的折叠高度
• app:layout_behavior="@string/bottom_sheet_behavior",代表这是底层动作条布局，必不可少
• 这种方式的优点:不会出现蒙层效果，所有条目均可以点击；
• 实现代码：

public class MainActivity extends AppCompatActivity {
    private BottomSheetBehavior bottomSheetBehavior;
    private LinearLayout llContentBottomSheet;
    private Button hide_btn, show_btn, hide_all_btn;
    //底部弹框显示2种效果：1.BottomSheetBehavior、2.BottomSheetDialog
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initBottomSheetBehavior()
    }

    //第一种方式
    private void initBottomSheetBehavior(){
        //第一种：BottomSheetBehavior，不会出现蒙层，可以点击
        hide_btn = findViewById(R.id.hide_btn);
        hide_all_btn = findViewById(R.id.hide_all_btn);
        show_btn = findViewById(R.id.show_btn);
        llContentBottomSheet = findViewById(R.id.ll_bottom_sheet);
        bottomSheetBehavior = BottomSheetBehavior.from(llContentBottomSheet);
        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View view, int state) {
                switch (state) {
                    case BottomSheetBehavior.STATE_COLLAPSED:
                        //折叠 ，可手动设置折叠高度，属性值为：peekHeight
                        break;
                    case BottomSheetBehavior.STATE_DRAGGING:
                        //拖动
                        break;
                    case BottomSheetBehavior.STATE_EXPANDED:
                        //完全显示
                        break;
                    case BottomSheetBehavior.STATE_HIDDEN:
                        //完全隐藏
                        break;
                    case BottomSheetBehavior.STATE_SETTLING:
                        //视图自由滑动
                        break;
                }

            }

            @Override
            public void onSlide(@NonNull View view, float v) {

            }
        });

       //折叠
        hide_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
            }
        });
       //完全展示
        show_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });

       //完全隐藏
        hide_all_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
            }
        });
    }
}

最终效果如下:

result.gif

1、BottomSheetBehavior用法：

• 与一般Dialog使用方式差不多，有蒙层效果,代码如下：

    //第二种
    private void initBottomSheetDialog(){
        //第二种：BottomSheetDialog，会出现蒙层，不可以点击，类似于常见的Dialog
        if (bottomSheetDialog == null){
            bottomSheetDialog = new BottomSheetDialog(this);
        }
        bottomSheetDialog.setCancelable(false);
        bottomSheetDialog.setCanceledOnTouchOutside(true);
        View view = LayoutInflater.from(this).inflate(R.layout.content_bottom_sheet,null);
        bottomSheetDialog.setContentView(view);
        bottomSheetDialog.show();
    }

效果如下:

result1.gif

在此做个记录，方便后面查询使用。