Android实现主布局右边缘Fragment双向滑动展开/收起 求示例代码

核心实现思路 #

• 无需从零编写触摸拦截逻辑，直接使用Android官方提供的DrawerLayout组件即可快速实现对应交互，组件本身自带滑动跟手、展开/收起动画、边缘触发的基础能力，对入门开发者适配成本极低
• 基础逻辑是将DrawerLayout作为页面根容器，主页面内容与右侧侧边Fragment作为容器的两个子View，通过配置抽屉的位置为右侧，即可匹配预期的滑动交互

分步落地流程 #

• 替换主Activity布局的根节点为DrawerLayout，按顺序放置两个子View：
  • 第一个子View为常规主页面的内容布局
  • 第二个子View为右侧抽屉占位容器，通过android:layout_gravity="end"指定抽屉位于屏幕右侧，设置固定宽度（比如300dp）用于承载侧边Fragment
• 通过FragmentManager将自定义侧边Fragment加载到抽屉对应的占位容器中
• 调整DrawerLayout的边缘触发宽度，实现仅屏幕右边缘小范围滑动可展开抽屉的效果，避免和主页面的横向滚动逻辑冲突

关键示例代码 #

主布局文件（activity_main.xml） #

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主页面内容占位 -->
    <FrameLayout
        android:id="@+id/main_content_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- 右侧侧边栏占位 -->
    <FrameLayout
        android:id="@+id/right_side_container"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:background="#FFFFFF"/>

</androidx.drawerlayout.widget.DrawerLayout>

Activity初始化逻辑（MainActivity.kt） #

class MainActivity : AppCompatActivity() {
    private lateinit var drawerLayout: DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        drawerLayout = findViewById(R.id.drawer_layout)

        // 加载侧边Fragment到右侧容器
        supportFragmentManager.beginTransaction()
            .replace(R.id.right_side_container, YourCustomSideFragment())
            .commit()

        // 设置仅右边缘20dp范围可触发滑出
        drawerLayout.setDrawerEdgeSize(GravityCompat.END, dpToPx(20))
    }

    // dp转px工具方法
    private fun dpToPx(dp: Int): Int {
        return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dp.toFloat(),
            resources.displayMetrics
        ).toInt()
    }
}

交互效果校验 #

• 从屏幕右边缘向左滑动时，侧边Fragment会跟手移动展开，松手后滑动进度超过阈值即自动完全展开
• 侧边Fragment完全展开时，在Fragment覆盖的屏幕区域内向右滑动，即可触发收起逻辑
• 可通过drawerLayout.isDrawerOpen(GravityCompat.END)方法实时获取抽屉展开状态，适配后续业务逻辑

内容的提问来源于stack exchange，提问作者SoT