一、需求
产品需要实现地图上层放一个类似抽屉效果的表单,我想到可以用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) {
}
});
}
————————————————
版权声明:本文为CSDN博主「明月照松雪」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u014050788/article/details/89531874