bottonsheet和bottomsheetdialog的简单应用

这个应用场景是在选择规格或者查看详情的时候（例如：淘宝 ，京东 购物界面），从界面底部弹出视图。

（1）bottomsheet

代码

public class BottonSheetActivity extends Activity {
    private LinearLayout ll;
    private int heigth;
    private int width;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_botton_sheet);
        //2、通过Resources获取屏幕宽高
        DisplayMetrics dm = getResources().getDisplayMetrics();
        heigth = dm.heightPixels;
        width = dm.widthPixels;
        LinearLayout design_bottom_sheet1 = findViewById(R.id.design_bottom_sheet1);
        ViewGroup.LayoutParams params = design_bottom_sheet1.getLayoutParams();
        params.height = (int) (heigth * 0.8);//设置bottonsheet的高度为屏幕的80%高
        design_bottom_sheet1.setLayoutParams(params);
        final BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.design_bottom_sheet1));
        //设置默认先隐藏
        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

//        以下四种状态：
//
//        STATE_COLLAPSED：默认折叠状态， bottom sheet只在底部显示一部分布局。显示高度可以通过 app:behavior_peekHeight 设置（默认是0）
//
//        STATE_DRAGGING：拖动状态，此时用户正在向上或者向下拖动bottom sheet
//
//        STATE_SETTLING：自由滑动状态，视图从脱离手指自由滑动到最终停下的这一小段时间
//
//        STATE_EXPANDED：完全展开的状态，当bottom sheet的高度低于CoordinatorLayout容器时，整个bottom sheet都可见；或者CoordinatorLayout容器已经被bottom sheet 填满
//
//        STATE_HIDDEN：完全隐藏状态（可通过app:behavior_hideable =true启用此状态），启用后用户将能通过向下滑动完全隐藏 bottom sheet

        ll = (LinearLayout) findViewById(R.id.ll);

        findViewById(R.id.bt).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //根据状态不同显示隐藏
                if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                    ll.setVisibility(View.VISIBLE);
                } else if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                    ll.setVisibility(View.GONE);
                }
            }
        });
        //设置监听事件
        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                //拖动
                //禁止拖拽，
                if (newState == BottomSheetBehavior.STATE_DRAGGING) {
                    //设置为收缩状态
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                }
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                //状态变化
            }
        });
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/bt"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".BottonSheetActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#ffffff"
                android:text="打开" />
        </LinearLayout>


        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#66000000"
            android:orientation="vertical"
            android:visibility="gone" />

        <!--app:behavior_peekHeight="400dp" 默认高度 -->
        <LinearLayout
            android:id="@+id/design_bottom_sheet1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent"
            android:orientation="vertical"
            app:behavior_hideable="true"
            app:elevation="200dp"
            app:layout_behavior="@string/bottom_sheet_behavior">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="20dp"
                android:src="@mipmap/ic_launcher" />
        </LinearLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</FrameLayout>

（2） bottomsheetdialog

代码

				if (dialog == null){
                    dialog = new BottomSheetDialog(this);
                }
                dialog.setCancelable(false);
                dialog.setCanceledOnTouchOutside(true);
                View view = LayoutInflater.from(RefundOrAfterSaleDetailActivity.this).inflate(R.layout.bottomsheetdialog,null);
                TextView tvWechat = view.findViewById(R.id.one);
                tvWechat.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(RefundOrAfterSaleDetailActivity.this,"one",Toast.LENGTH_SHORT).show();
                        dialog.dismiss();
                    }
                });
                dialog.setContentView(view);
                //设置背景透明
                dialog.getDelegate().findViewById(android.support.design.R.id.design_bottom_sheet)
                        .setBackgroundColor(RefundOrAfterSaleDetailActivity.this.getResources().getColor(android.R.color.transparent));
                dialog.show();

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:padding="@dimen/dp_20"
    android:background="@color/transparent"
    android:layout_height="wrap_content">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottonsheet_bg"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:id="@+id/one"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginBottom="@dimen/dp_10"
            android:textColor="#ffafafaf"
            android:text="选择原因"/>

        <TextView
            android:id="@+id/two"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/dp_10"
            android:text="bottonsheet" />

        <View
            android:background="@color/color_f2"
            android:layout_width="match_parent"
            android:layout_height="1dp"/>

        <TextView
            android:id="@+id/three"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/dp_10"
            android:text="bottomsheetdialog"/>

        <View
            android:background="@color/color_f2"
            android:layout_width="match_parent"
            android:layout_height="1dp"/>

    </LinearLayout>
</LinearLayout>