Android开发：如何在Bottom Sheet顶部添加ImageView

没问题，我来帮你搞定这个需求！要实现带顶部ImageView的Bottom Sheet，我们可以借助AndroidX的CoordinatorLayout和BottomSheetBehavior来实现，同时把你的列表内容换成更高效的RecyclerView（这也是你注释里提到的优化点，替代嵌套LinearLayout）。

步骤1：创建主布局（包含Bottom Sheet） #

首先在你的主布局里加入CoordinatorLayout，里面放触发Bottom Sheet的控件和Bottom Sheet本身：

<?xml version="1.0" encoding="utf-8"?>
<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">

    <!-- 触发Bottom Sheet的按钮 -->
    <Button
        android:id="@+id/btn_show_bottom_sheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="打开Bottom Sheet"
        android:layout_gravity="center"/>

    <!-- Bottom Sheet核心布局 -->
    <LinearLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:behavior_peekHeight="0dp" <!-- 默认完全隐藏，可调整为露出一部分 -->
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <!-- 顶部ImageView -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:src="@drawable/your_top_banner" <!-- 替换成你的图片资源 -->
            android:scaleType="centerCrop"
            android:contentDescription="Bottom Sheet顶部图片"/>

        <!-- 分割线，区分顶部图片和列表 -->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#E0E0E0"/>

        <!-- 列表区域，用RecyclerView替代嵌套LinearLayout -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_bottom_sheet_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp"/>

    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

步骤2：创建列表项布局 #

接下来写RecyclerView的单个item布局，整理成独立的item_bottom_sheet.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground"
    android:orientation="horizontal"
    android:padding="8dp">

    <ImageView
        android:id="@+id/iv_item_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginRight="32dp"
        android:src="@drawable/ic_menu_camera"
        android:tint="#737373"/>

    <TextView
        android:id="@+id/tv_item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Preview"
        android:textColor="#737373"
        android:textSize="16sp"/>

</LinearLayout>

步骤3：代码逻辑实现 #

最后在Activity里初始化Bottom Sheet和RecyclerView，处理显示逻辑：

Kotlin代码示例：

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import com.google.android.material.bottomsheet.BottomSheetBehavior

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 初始化Bottom Sheet Behavior
        val bottomSheet = findViewById<LinearLayout>(R.id.bottom_sheet)
        val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet)

        // 点击按钮展开Bottom Sheet
        findViewById<Button>(R.id.btn_show_bottom_sheet).setOnClickListener {
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
        }

        // 设置RecyclerView
        val recyclerView = findViewById<RecyclerView>(R.id.rv_bottom_sheet_list)
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = BottomSheetAdapter(getSampleItems())
    }

    // 模拟列表数据
    private fun getSampleItems(): List<String> {
        return listOf("Preview", "Share", "Edit", "Delete", "Settings")
    }
}

// RecyclerView适配器
class BottomSheetAdapter(private val items: List<String>) :
    androidx.recyclerview.widget.RecyclerView.Adapter<BottomSheetAdapter.ViewHolder>() {

    inner class ViewHolder(itemView: android.view.View) :
        androidx.recyclerview.widget.RecyclerView.ViewHolder(itemView) {
        val itemText: TextView = itemView.findViewById(R.id.tv_item_text)
        val itemIcon: ImageView = itemView.findViewById(R.id.iv_item_icon)
    }

    override fun onCreateViewHolder(parent: android.view.ViewGroup, viewType: Int): ViewHolder {
        val view = android.view.LayoutInflater.from(parent.context)
            .inflate(R.layout.item_bottom_sheet, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemText.text = items[position]
        // 可以根据不同item设置对应的图标
        when(items[position]) {
            "Preview" -> holder.itemIcon.setImageResource(R.drawable.ic_menu_camera)
            "Share" -> holder.itemIcon.setImageResource(R.drawable.ic_menu_share)
            "Edit" -> holder.itemIcon.setImageResource(R.drawable.ic_menu_edit)
            // 其他item的图标自行补充
        }
    }

    override fun getItemCount(): Int = items.size
}

额外说明 #

• 如果你只是少量列表项，也可以用LinearLayout替代RecyclerView，但RecyclerView对于长列表性能更好，更推荐使用。
• app:behavior_peekHeight可以设置Bottom Sheet默认露出的高度，比如设为50dp就能让用户看到一部分，提示可以上拉展开。
• 顶部ImageView的高度和scaleType可以根据你的UI需求调整，比如用fitCenter或者centerInside。

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