BottomSheet的使用

一、需求

产品需要实现地图上层放一个类似抽屉效果的表单，我想到可以用BottomSheet实现。

BottomSheet有三种：

BottomSheets，BottomSheetDialog，BottomSheetDialogFragment。

而上面三种又可以分为两种：

一种是没有蒙层的，可以对没有遮盖住的地方进行操作，如BottomSheets ：

它依赖于CoordinatorLayout和BottomSheetBehavior，需要将底部菜单布局作为CoordinatorLayout的子View，实现简单但不够灵活，适用于底部菜单布局稳定的情况。

第二种是有蒙层的，类似于popupWindow，如BottomSheetDialog何BottomSheetDialogFragment。底下被遮挡的地方无法操作。

因为需求是这个界面既能操作地图又能填写表单，所以所以我使用了BottomSheets。

二、使用

整个布局使用CoordinatorLayout，mapView所在布局与抽屉式表单作为它的子View，而地图上的定位按钮要跟随表单移动，所以将它放在表单布局中。

<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"
    android:orientation="vertical">


    <include layout="@layout/roadrescue_content_map" />

    <include layout="@layout/roadrescue_bottom_sheet" />
</android.support.design.widget.CoordinatorLayout>

roadrescue_content_map里主要是放mapView

<android.support.constraint.ConstraintLayout 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="450dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:orientation="vertical">

    <include
        android:id="@+id/rel_title"
        layout="@layout/layout_common_title" />

    <com.amap.api.maps.TextureMapView
        android:id="@+id/amapView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:clickable="true"
        android:background="@color/transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/estimate_payment" />
</android.support.constraint.ConstraintLayout>

roadrescue_bottom_sheet放置地图定位按钮与表单。因为UI图上表单底部有阴影，在地图上会有一种浮动的效果，所以设置

elevation（elevation要在设置了background才会生效）。bottomSheet布局要设置layout_behaviar: 

android.support.design.widget.BottomSheetBehavior

behavior_hideable表示默认是否完全隐藏

behavior_peekHeight表示折叠状态时残留的高度

 

在使用elevation过程中遇到过设置了elevation的控件始终在最顶层，无法被其他控件覆盖，解决方法是可以给这个带阴影的控件外部再包一层linearlayout并留下一部分显示阴影的空间。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/ll_content_bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:orientation="vertical"
    app:behavior_hideable="false"
    app:behavior_peekHeight="350dp"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <ImageView
        android:id="@+id/im_location"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_gravity="right"
        android:layout_margin="10dp"
        android:background="@drawable/roadrescue_location_btn_selector"
        android:clickable="true"
        android:elevation="2dp"
        android:scaleType="center"
        android:src="@drawable/location_btn"
        app:layout_constraintRight_toRightOf="parent" />

    <android.support.constraint.ConstraintLayout
        android:id="@+id/rl_send_rescue"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/roadrescue_bottomsheet_shape"
        android:elevation="5dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@id/im_location">

        <ImageView
            android:id="@+id/bottom_sheet_expand_icon"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:paddingTop="8dp"
            android:scaleType="centerInside"
            android:src="@drawable/sheet_bottom_collapsed"
            app:layout_constraintTop_toTopOf="parent" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_FindFragment_title"
            android:layout_width="match_parent"
            android:layout_height="53dp"
            app:layout_constraintTop_toBottomOf="@id/bottom_sheet_expand_icon"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/red_homepage_select"
            app:tabIndicatorHeight="3dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/black_common_title"
            app:tabTextAppearance="@style/tab_text" />

        <View
            android:id="@+id/tab_divider"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/gray_fenge_line"
            app:layout_constraintTop_toBottomOf="@id/tab_FindFragment_title" />

        <HorizontalScrollView
            android:id="@+id/hsv_road_rescue_scene"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:visibility="gone"
            app:layout_constraintTop_toBottomOf="@id/tab_divider">

            <RadioGroup
                android:id="@+id/rg_road_rescue_scene"
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:gravity="center"
                android:orientation="horizontal"></RadioGroup>
        </HorizontalScrollView>


        <ImageView
            android:id="@+id/diliver1"
            style="@style/division_line"
            app:layout_constraintTop_toBottomOf="@id/hsv_road_rescue_scene" />

        <LinearLayout
            android:id="@+id/ll_car_location"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/normal_40"
            android:paddingRight="@dimen/normal_40"
            app:layout_constraintTop_toBottomOf="@id/diliver1">

            <TextView
                android:id="@+id/tv_loc_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:text="@string/client_car_location"
                android:textColor="@color/color_2d354c"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/tv_loc_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="17dp"
                android:layout_weight="1"
                android:gravity="right"
                android:maxLines="2"
                android:textColor="@color/color_2d354c"
                android:textSize="15sp" />
        </LinearLayout>

        <ImageView
            android:id="@+id/division2"
            style="@style/division_line"
            app:layout_constraintTop_toBottomOf="@id/ll_car_location" />

        <LinearLayout
            android:id="@+id/ll_road_rescue_store"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/normal_40"
            android:paddingRight="@dimen/normal_40"
            app:layout_constraintTop_toBottomOf="@id/division2">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/store_location"
                android:textColor="@color/color_2d354c"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/tv_store_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="17dp"
                android:layout_weight="10"
                android:gravity="right"
                android:maxLines="2"
                android:text="@string/roadrescue_please_choose_store"
                android:textColor="@color/color_2d354c"
                android:textSize="15sp" />

            <TextView
                android:id="@+id/tv_specially"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="8dp"
                android:layout_toLeftOf="@+id/tv_store_distance"
                android:background="@drawable/bg_rb_road_rescue_scene_sel"
                android:padding="2dp"
                android:text="@string/specially"
                android:textColor="@color/color_fff72e3c"
                android:textSize="11sp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/tv_store_distance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="8dp"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:textColor="@color/color_2d354c"
                android:textSize="15sp" />

            <ImageView
                style="@style/image_user_right"
                android:layout_marginRight="0dp"
                android:src="@drawable/arrow_right" />
        </LinearLayout>

        <ImageView
            android:id="@+id/diliver3"
            style="@style/division_line"
            app:layout_constraintTop_toBottomOf="@id/ll_road_rescue_store" />

        <LinearLayout
            android:id="@+id/ll_broken_car"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/normal_40"
            android:paddingRight="@dimen/normal_40"
            app:layout_constraintTop_toBottomOf="@id/diliver3">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/broken_car"
                android:textColor="@color/color_2d354c"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/tv_broken_car_info"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="17dp"
                android:layout_weight="1"
                android:gravity="right"
                android:maxLines="2"
                android:text="@string/roadrescue_please_choose_broken_car"
                android:textColor="@color/color_2d354c"
                android:textSize="15sp" />

            <ImageView
                style="@style/image_user_right"
                android:layout_marginRight="0dp"
                android:src="@drawable/arrow_right" />
        </LinearLayout>

        <ImageView
            android:id="@+id/diliver11"
            style="@style/division_line"
            app:layout_constraintTop_toBottomOf="@id/ll_broken_car" />

        <LinearLayout
            android:id="@+id/ll_trafic_crash"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/normal_40"
            android:paddingRight="@dimen/normal_40"
            app:layout_constraintTop_toBottomOf="@id/diliver11">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/roadrescue_traffic_crash"
                android:textColor="@color/color_2d354c"
                android:textSize="14sp" />

            <RadioGroup
                android:id="@+id/rg_traffic"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="right"
                android:orientation="horizontal">

                <RadioButton
                    android:id="@+id/rb_traffic_yes"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:button="@null"
                    android:drawableLeft="@drawable/roadrescue_traffic_selector"
                    android:gravity="center"
                    android:text="@string/roadrescue_yes" />

                <RadioButton
                    android:id="@+id/rb_traffic_no"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="25dp"
                    android:button="@null"
                    android:checked="true"
                    android:drawableLeft="@drawable/roadrescue_traffic_selector"
                    android:gravity="center"
                    android:text="@string/roadrescue_no" />
            </RadioGroup>
        </LinearLayout>

        <ImageView
            android:id="@+id/diliver4"
            style="@style/division_line"
            app:layout_constraintTop_toBottomOf="@id/ll_trafic_crash" />

        <LinearLayout
            android:id="@+id/ll_name"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/normal_40"
            android:paddingRight="@dimen/normal_40"
            app:layout_constraintTop_toBottomOf="@id/diliver4">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/roadrescue_name"
                android:textColor="@color/color_2d354c"
                android:textSize="14sp" />

            <EditText
                android:id="@+id/et_user_name"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="17dp"
                android:layout_weight="1"
                android:background="@color/white"
                android:gravity="right"
                android:maxLines="1"
                android:maxLength="5"
                android:textColor="@color/color_2d354c"
                android:textSize="15sp" />
        </LinearLayout>

        <ImageView
            android:id="@+id/diliver5"
            style="@style/division_line"
            app:layout_constraintTop_toBottomOf="@id/ll_name" />

        <LinearLayout
            android:id="@+id/ll_phone"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/normal_40"
            android:paddingRight="@dimen/normal_40"
            app:layout_constraintTop_toBottomOf="@id/ll_name">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/phone_number"
                android:textColor="@color/color_2d354c"
                android:textSize="14sp" />

            <EditText
                android:id="@+id/et_phone_number"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="17dp"
                android:layout_weight="1"
                android:background="@color/white"
                android:gravity="right"
                android:inputType="phone"
                android:maxLength="11"
                android:maxLines="1"
                android:textColor="@color/color_2d354c"
                android:textSize="15sp" />
        </LinearLayout>

        <ImageView
            android:id="@+id/diliver6"
            style="@style/division_line"
            app:layout_constraintTop_toBottomOf="@id/ll_phone" />


        <TextView
            android:id="@+id/tv_submit"
            style="@style/text_red_bg"
            android:layout_marginTop="@dimen/normal_40"
            android:layout_marginBottom="@dimen/normal_40"
            android:text="@string/request_assistance"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/diliver6" />
    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

java代码中：

根据BottomSheetBehavior设置表单折叠还是展开的状态图片

private BottomSheetBehavior mBehavior;
@InjectView(R.id.ll_content_bottom_sheet)
ConstraintLayout mCLContentBottomSheet;


private void initBottomSheet() {
        mBehavior = BottomSheetBehavior.from(mCLContentBottomSheet);
        mBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                switch (newState) {
                    //完全展开状态
                    case BottomSheetBehavior.STATE_EXPANDED:
                        mImBottomSheetExpand.setImageDrawable(getDrawable(R.drawable.sheet_bottom_expanded));
                        break;
                    //拖动状态
                    case BottomSheetBehavior.STATE_DRAGGING:
                        mImBottomSheetExpand.setImageDrawable(getDrawable(R.drawable.sheet_bottom_collapsed));
                        break;
                    //折叠状态
                    case BottomSheetBehavior.STATE_COLLAPSED:
                        mImBottomSheetExpand.setImageDrawable(getDrawable(R.drawable.sheet_bottom_collapsed));
                        break;
                }
            }
            
            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                
            }
        });
    }