如何用Kotlin结合RecyclerView实现带滚动底部效果的Android动态项设计

第一步：编写布局文件 #

先根据示例效果准备主布局和相关资源，这里分两种常见的底部效果场景：渐变遮罩和粘性底部栏。

场景1：滚动时底部渐变淡出 #

主布局（activity_main.xml）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 列表区域，给底部渐变留空间 -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="60dp" />

    <!-- 底部渐变遮罩 -->
    <View
        android:id="@+id/bottomGradientView"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/bottom_gradient" />

</RelativeLayout>

渐变背景资源（drawable/bottom_gradient.xml）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="@color/white"
        android:angle="90" />
</shape>

场景2：固定粘性底部栏 #

主布局（activity_main.xml）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 列表区域，布局在底部栏上方 -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomBar" />

    <!-- 固定底部栏 -->
    <LinearLayout
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:gravity="center"
        android:elevation="8dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="底部操作栏"
            android:textSize="16sp"
            android:textStyle="bold" />

    </LinearLayout>

</RelativeLayout>

第二步：实现RecyclerView的Adapter和Item布局 #

先写列表项的布局（item_list.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:padding="16dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/itemTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/itemContent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="@color/gray"
        android:layout_marginTop="8dp" />

</LinearLayout>

然后写Kotlin的Adapter代码：

class ListAdapter(private val itemList: List<ListItem>) : RecyclerView.Adapter<ListAdapter.ViewHolder>() {

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val title: TextView = itemView.findViewById(R.id.itemTitle)
        val content: TextView = itemView.findViewById(R.id.itemContent)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = itemList[position]
        holder.title.text = item.title
        holder.content.text = item.content
    }

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

// 数据实体类
data class ListItem(val title: String, val content: String)

第三步：配置RecyclerView并实现滚动效果 #

在Activity中初始化列表，同时针对渐变遮罩场景添加滚动监听，动态调整透明度：

MainActivity.kt代码 #

class MainActivity : AppCompatActivity() {
    private lateinit var recyclerView: RecyclerView
    private var bottomGradientView: View? = null // 渐变场景才需要

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

        recyclerView = findViewById(R.id.recyclerView)
        // 如果是渐变场景，初始化渐变视图
        bottomGradientView = findViewById(R.id.bottomGradientView)

        // 生成测试数据
        val itemList = mutableListOf<ListItem>()
        for (i in 1..50) {
            itemList.add(ListItem("列表项 $i", "这是第$i项的内容"))
        }

        // 配置RecyclerView
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = ListAdapter(itemList)

        // 渐变场景：添加滚动监听调整透明度
        bottomGradientView?.let { gradientView ->
            recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
                override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                    super.onScrolled(recyclerView, dx, dy)
                    val layoutManager = recyclerView.layoutManager as LinearLayoutManager
                    val lastVisiblePos = layoutManager.findLastVisibleItemPosition()
                    val totalItemCount = layoutManager.itemCount

                    // 滚动到最后3项时，逐渐显示渐变遮罩
                    val alpha = if (lastVisiblePos >= totalItemCount - 3) {
                        1f - ((totalItemCount - 1 - lastVisiblePos) / 3f)
                    } else {
                        0f
                    }
                    gradientView.alpha = alpha
                }
            })
        }
    }
}

关键调整说明 #

• 如果示例的底部效果是渐变淡出：通过滚动监听计算列表滚动位置，动态设置渐变视图的透明度，可根据实际需求调整触发渐变的阈值（比如最后5项开始渐变）。
• 如果示例是粘性底部栏：不需要滚动监听，布局固定即可，列表会自动在底部栏上方滚动。
• 可以根据示例的具体视觉效果，修改渐变的颜色、底部栏的样式和高度。

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