Android相册开发：如何实现图片详情页上滑显示描述面板？

Hey there! 要实现你想要的上滑照片触发显示描述布局的效果，用Material Design的BottomSheetBehavior来实现最省心，它自带了滑动展开/收起的交互逻辑，完全贴合你的需求。我帮你调整布局并补充实现步骤：

第一步：修改布局结构 #

把原来的ConstraintLayout替换为CoordinatorLayout（因为BottomSheetBehavior需要依赖CoordinatorLayout的布局协调能力），并添加底部的描述栏布局：

<androidx.coordinatorlayout.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:background="#000000"
    tools:context=".DetailActivity"
    android:clipToPadding="false">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"
        android:elevation="0dp"
        android:translationZ="0dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_detail"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#50000000"
        app:elevation="0dp"
        android:clipToPadding="false"
        android:fitsSystemWindows="true">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar_detail"
            style="@style/Theme.MaterialComponents.Light"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#00000000"
            app:title="@string/app_name"
            app:titleTextColor="#FFFFFF">
        </androidx.appcompat.widget.Toolbar>

    </com.google.android.material.appbar.AppBarLayout>

    <!-- 照片描述栏：默认隐藏/半隐藏，上滑展开 -->
    <LinearLayout
        android:id="@+id/photo_desc_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#CC000000"
        android:orientation="vertical"
        android:padding="16dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <TextView
            android:id="@+id/photo_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="照片标题"
            android:textColor="#FFFFFF"
            android:textSize="18sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/photo_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="这里是照片的详细描述，支持多行显示，还可以添加拍摄时间、地点等信息~"
            android:textColor="#EEEEEE"
            android:textSize="14sp"
            android:layout_marginTop="8dp"/>
    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

第二步：控制描述栏的显示逻辑 #

在DetailActivity里，我们可以设置描述栏的初始状态，并且监听用户的上滑手势来触发展开：

import com.google.android.material.bottomsheet.BottomSheetBehavior
import android.view.MotionEvent

class DetailActivity : AppCompatActivity() {
    private var initialTouchY = 0f

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_detail)

        // 初始化BottomSheetBehavior
        val descContainer = findViewById<LinearLayout>(R.id.photo_desc_container)
        val bottomSheetBehavior = BottomSheetBehavior.from(descContainer)
        // 默认设置为隐藏状态，也可以设置peekHeight让它显示一小部分
        bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN

        // 监听ViewPager的触摸事件，判断上滑动作
        val viewPager = findViewById<ViewPager>(R.id.pager)
        viewPager.setOnTouchListener { _, event ->
            when(event.action) {
                MotionEvent.ACTION_DOWN -> {
                    initialTouchY = event.rawY
                }
                MotionEvent.ACTION_UP -> {
                    val slideDistance = initialTouchY - event.rawY
                    // 上滑距离超过50px时，展开描述栏
                    if (slideDistance > 50 && bottomSheetBehavior.state != BottomSheetBehavior.STATE_EXPANDED) {
                        bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
                    }
                    // 也可以添加下滑收起的逻辑
                    else if (slideDistance < -50 && bottomSheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED) {
                        bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN
                    }
                }
            }
            // 返回false，让ViewPager继续处理自身的滑动切换逻辑
            false
        }
    }
}

额外优化点 #

• 如果希望描述栏展开时能全屏滑动，可以设置bottomSheetBehavior.isFitToContents = false，再配合bottomSheetBehavior.setExpandedHeight(ViewGroup.LayoutParams.MATCH_PARENT)
• 可以给描述栏添加阴影效果，增强层次感：android:elevation="8dp"
• 切换ViewPager页面时，记得更新描述栏的内容哦~

效果参考你提供的截图：

• Photo 1：初始状态，描述栏隐藏在屏幕底部
• Photo 2：用户上滑照片后，描述栏平滑展开显示内容

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