You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否让Standard Bottom Sheet停靠至STATE_HALF_EXPANDED等三种状态?

实现Standard Bottom Sheet三种停靠状态(含半展开)

默认情况下,Material Design 2的Standard Bottom Sheet仅支持STATE_EXPANDED(完全展开)和STATE_COLLAPSED(折叠)两种停靠状态,但我们可以通过自定义BottomSheetBehavior来实现添加STATE_HALF_EXPANDED(半展开)状态的支持。

实现步骤:

  1. 自定义BottomSheetBehavior
    继承官方的BottomSheetBehavior,重写核心方法添加半展开状态的判断逻辑:

    class ThreeStateBottomSheetBehavior<V : View>(context: Context, attrs: AttributeSet?) :
        BottomSheetBehavior<V>(context, attrs) {
    
        private var halfExpandedRatio = 0.5f // 半展开高度为父容器高度的50%,可自定义
    
        override fun onLayoutChild(parent: CoordinatorLayout, child: V, layoutDirection: Int): Boolean {
            setHalfExpandedRatio(halfExpandedRatio)
            return super.onLayoutChild(parent, child, layoutDirection)
        }
    
        override fun onStopNestedScroll(coordinatorLayout: CoordinatorLayout, child: V, target: View, type: Int) {
            val currentY = child.top
            val parentHeight = coordinatorLayout.height
            val halfExpandedHeight = (parentHeight * halfExpandedRatio).toInt()
            val collapsedHeight = peekHeight
    
            when {
                currentY <= halfExpandedHeight / 2 -> state = STATE_EXPANDED
                currentY <= collapsedHeight + (halfExpandedHeight - collapsedHeight) / 2 -> state = STATE_HALF_EXPANDED
                else -> state = STATE_COLLAPSED
            }
        }
    
        fun setHalfExpandedRatio(ratio: Float) {
            if (ratio in 0.1f..0.9f) {
                halfExpandedRatio = ratio
                super.setHalfExpandedRatio(ratio)
            }
        }
    }
    
  2. 布局中绑定自定义Behavior
    在BottomSheet容器的布局属性中指定自定义Behavior:

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <!-- 主内容区域 -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!-- 你的主界面内容 -->
        </FrameLayout>
    
        <!-- 三状态Bottom Sheet -->
        <LinearLayout
            android:id="@+id/bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_behavior="com.yourpackage.ThreeStateBottomSheetBehavior"
            app:behavior_peekHeight="120dp"
            app:behavior_halfExpandedRatio="0.5">
    
            <!-- Bottom Sheet内容 -->
        </LinearLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    
  3. 主动切换状态(可选)
    如果需要在代码中主动触发半展开状态:

    val bottomSheet = findViewById<LinearLayout>(R.id.bottom_sheet)
    val behavior = ThreeStateBottomSheetBehavior.from(bottomSheet)
    behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
    

注意事项:

  • 半展开比例建议设置在0.3-0.7之间,保证交互合理性;
  • Java版本实现逻辑与Kotlin一致,仅需调整语法适配。

内容的提问来源于stack exchange,提问作者Augusto Carmo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.02 08:00:24