一、效果图

BottomSheetBehavior使用（仿百度地图） - 图1
iShot2020-08-2218.56.15.gif

二、实现

  1. <RelativeLayout
  2.     android:id="@+id/design_bottom_sheet_bar"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="60dp"
  5.     android:background="@color/colorAccent"
  6.     app:layout_anchor="@+id/design_bottom_sheet"
  7.     app:layout_anchorGravity="top"
  8.     android:layout_gravity="bottom"
  9.     android:visibility="invisible"
  10.     >
  11.     <ImageView
  12.         android:layout_width="23dp"
  13.         android:layout_height="23dp"
  14.         android:layout_marginLeft="23dp"
  15.         android:src="@mipmap/ic_navigation_back_white"
  16.         android:layout_centerVertical="true"/>
  17.     <TextView
  18.         android:layout_width="wrap_content"
  19.         android:layout_height="wrap_content"
  20.         android:text="点击收起BottomSheet"
  21.         android:textColor="#ffffff"
  22.         android:layout_centerInParent="true"/>
  23. </RelativeLayout>
  24. <RelativeLayout
  25.     android:id="@+id/design_bottom_sheet"
  26.     android:layout_width="match_parent"
  27.     android:layout_height="match_parent"
  28.     android:minHeight="100dp"
  29.     app:behavior_peekHeight="56dp"
  30.     app:behavior_hideable="false"
  31.     app:layout_behavior="@string/bottom_sheet_behavior"
  32.     android:background="#ffffff"
  33.     >
  34.     <TextView
  35.         android:id="@+id/bottom_sheet_tv"
  36.         android:layout_width="wrap_content"
  37.         android:layout_height="56dp"
  38.         android:layout_centerHorizontal="true"
  39.         android:gravity="center"
  40.         android:text="这是一个BottomSheet"/>
  41.     <ImageView
  42.         android:id="@+id/bottom_sheet_iv"
  43.         android:layout_width="wrap_content"
  44.         android:layout_height="match_parent"
  45.         android:layout_centerInParent="true"
  46.         android:src="@mipmap/wuhuang"
  47.         android:padding="10dp"
  48.         android:minHeight="100dp"
  49.         android:adjustViewBounds="true"
  50.         android:scaleType="centerInside"
  51.         android:layout_gravity="center"/>
  52. </RelativeLayout>
  55. <!--    <RelativeLayout-->

  2. - 2. activity

class FBaiDuMapActivity : AppCompatActivity(R.layout.activity_fbaidu) { private var isSetBottomSheetHeight: Boolean = false

  1. override fun onCreate(savedInstanceState: Bundle?) {
  2.     super.onCreate(savedInstanceState)
  4.     //关联

// val behavior = BottomSheetBehavior.from(rl_fbaidu_bottom) // //设置展开时的标题相关,点击关闭对话框 // rl_fbaidu_top.setOnClickListener { // behavior.setState(BottomSheetBehavior.STATE_COLLAPSED) // } // behavior.addBottomSheetCallback(object :BottomSheetBehavior.BottomSheetCallback(){ // override fun onSlide(bottomSheet: View, slideOffset: Float) { // if(bottomSheet.top <2rl_fbaidu_top.height){ // rl_fbaidu_top.visibility = View.VISIBLE; // rl_fbaidu_top.alpha = slideOffset // rl_fbaidu_top.translationY = // (bottomSheet.top -2rl_fbaidu_top.height).toFloat(); // } else{ // rl_fbaidu_top.visibility = View.VISIBLE // } // } // // override fun onStateChanged(bottomSheet: View, newState: Int) { // if(newState!=BottomSheetBehavior.STATE_COLLAPSED&&bottom_sheet_tv.visibility ==View.VISIBLE){ // bottom_sheet_tv.visibility = View.GONE // bottom_sheet_iv.visibility = View.VISIBLE // }else if(newState==BottomSheetBehavior.STATE_COLLAPSED&&bottom_sheet_tv.visibility ==View.GONE){ // bottom_sheet_tv.visibility = View.VISIBLE // bottom_sheet_iv.visibility = View.GONE // } // } // // }) setListener() }

  1. private fun setListener() {
  2.     //val toolbar: Toolbar = findViewById<View>(R.id.toolbar) as Toolbar
  3.     //setSupportActionBar(toolbar)
  5.     val behavior = BottomSheetBehavior.from(design_bottom_sheet)
  6.     //底栏状态改变的监听
  7.     //底栏状态改变的监听
  8.     behavior.addBottomSheetCallback(object : BottomSheetCallback() {
  9.         override fun onStateChanged(bottomSheet: View, newState: Int) {
  10.             if (newState != BottomSheetBehavior.STATE_COLLAPSED && bottom_sheet_tv.visibility === View.VISIBLE) {
  11.                 bottom_sheet_tv.visibility = View.GONE
  12.                 bottom_sheet_iv.visibility = View.VISIBLE
  13.                 //mAdapter.setOnItemClickListener(null) //底栏展开状态下屏蔽RecyclerView item的点击
  14.             } else if (newState == BottomSheetBehavior.STATE_COLLAPSED && bottom_sheet_tv.visibility === View.GONE) {
  15.                 bottom_sheet_tv.visibility = View.VISIBLE
  16.                 bottom_sheet_iv.visibility = View.GONE
  17.                 //mAdapter.setOnItemClickListener(this@BottomSheetActivity) //底栏折叠状态下恢复RecyclerView item的点击
  18.             }
  19.         }
  21.         override fun onSlide(bottomSheet: View, slideOffset: Float) {
  22.             if (bottomSheet.getTop() < 2 * design_bottom_sheet_bar.height) {
  23.                 //设置底栏完全展开时，出现的顶部工具栏的动画
  24.                 design_bottom_sheet_bar.visibility = View.VISIBLE
  25.                 design_bottom_sheet_bar.alpha = slideOffset
  26.                 design_bottom_sheet_bar.translationY =
  27.                     (bottomSheet.getTop() - 2 * design_bottom_sheet_bar.height).toFloat()
  28.             } else {
  29.                 design_bottom_sheet_bar.visibility = View.INVISIBLE
  30.             }
  31.         }
  32.     })
  34.     design_bottom_sheet_bar.setOnClickListener {
  35.         behavior.setState(BottomSheetBehavior.STATE_COLLAPSED) //点击顶部工具栏 将底栏变为折叠状态
  36.     }
  37. }
  39. override fun onWindowFocusChanged(hasFocus: Boolean) {
  40.     super.onWindowFocusChanged(hasFocus)
  41.     //修改SetBottomSheet的高度 留出顶部工具栏的位置

// if (!isSetBottomSheetHeight) { // val linearParams = rl_fbaidu_bottom.layoutParams // linearParams.height = cl_fbaidu_outer.height - rl_fbaidu_top.height // rl_fbaidu_bottom.layoutParams = linearParams // isSetBottomSheetHeight = true //设置标记 只执行一次 // } if (!isSetBottomSheetHeight) { val linearParams = design_bottom_sheet.layoutParams as CoordinatorLayout.LayoutParams linearParams.height = bottom_sheet_demo_coordinatorLayout.getHeight() - design_bottom_sheet_bar.height design_bottom_sheet.layoutParams = linearParams isSetBottomSheetHeight = true } }

} ```

三、地址和参考

demo
一个神奇的控件——Android CoordinatorLayout与Behavior使用指南
Android BottomSheet 的使用（仿高德地图的列表效果）
Android 仿高德地图可拉伸的BottomSheet