如何用RecyclerView实现颜色选择器？滑动卡片改色方案咨询

阿华AIGC实验室

2026-5-20

实现滑动卡片+底部调色板改色的方案

嘿，我完全懂你想要的效果——一个可滑动的卡片列表（用RecyclerView实现），底部搭配一个能点击切换颜色的调色板，选中颜色后卡片的背景跟着变对吧？之前用ItemDecoration确实走偏了，因为它的定位本来就是给RecyclerView的Item添加装饰性元素（比如分割线、内边距、额外绘制的图形），完全不适合做带交互的调色板控件。给你分享一套落地性强的实现思路：

一、整体布局结构

把RecyclerView和调色板分成两个独立的控件，用垂直布局容器（比如LinearLayout或ConstraintLayout）组合：

上方是展示滑动卡片的RecyclerView
下方是调色板容器：如果颜色选项少，用LinearLayout横向排列颜色块；如果选项多需要横向滑动，就用横向的RecyclerView来做调色板

二、调色板的实现

1. 简单版（少量颜色）

直接在布局里放多个View（比如AppCompatImageView或者空的View），设置不同的背景色，给每个View加点击事件：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="8dp">

    <View
        android:id="@+id/color_red"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginHorizontal="4dp"
        android:background="#FF4444"
        android:clickable="true"
        android:focusable="true"/>

    <!-- 更多颜色块... -->
</LinearLayout>

2. 进阶版（多颜色/可滑动）

用横向RecyclerView实现调色板，每个Item是一个颜色块，绑定颜色列表数据，点击时回调选中的颜色：

// 调色板Adapter
class ColorPaletteAdapter(
    private val colorList: List<Int>,
    private val onColorPick: (Int) -> Unit
) : RecyclerView.Adapter<ColorPaletteAdapter.ColorVH>() {

    private var selectedPos = 0

    inner class ColorVH(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val colorBlock: View = itemView.findViewById(R.id.color_block)
    }

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

    override fun onBindViewHolder(holder: ColorVH, position: Int) {
        val color = colorList[position]
        holder.colorBlock.setBackgroundColor(color)
        // 给选中的颜色块加个选中标识（比如边框）
        holder.colorBlock.isSelected = position == selectedPos
        holder.itemView.setOnClickListener {
            selectedPos = position
            notifyDataSetChanged()
            onColorPick(color)
        }
    }

    override fun getItemCount() = colorList.size
}

三、卡片RecyclerView的颜色更新逻辑

在卡片Adapter里维护当前选中的颜色值，提供方法接收调色板传来的颜色，然后更新Item的背景：

// 卡片Adapter
class CardAdapter(private val dataList: List<String>) : RecyclerView.Adapter<CardAdapter.CardVH>() {

    // 默认卡片颜色
    private var currentCardColor = Color.parseColor("#FFFFFF")

    inner class CardVH(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val cardContainer: CardView = itemView.findViewById(R.id.card_container)
        val cardContent: TextView = itemView.findViewById(R.id.card_content)
    }

    // 对外提供更新颜色的方法
    fun updateCardColor(newColor: Int) {
        currentCardColor = newColor
        // 如果要更新所有卡片，调用notifyDataSetChanged
        notifyDataSetChanged()
        // 如果只更新选中的单个卡片，就记录选中位置，调用notifyItemChanged(selectedPos)
    }

    override fun onBindViewHolder(holder: CardVH, position: Int) {
        holder.cardContent.text = dataList[position]
        // 设置卡片背景色
        holder.cardContainer.setCardBackgroundColor(currentCardColor)
    }

    override fun getItemCount() = dataList.size
}

四、关联调色板和卡片

在Activity/Fragment里，给调色板的点击事件绑定卡片颜色更新逻辑：

// 初始化调色板（以横向RecyclerView为例）
val colorList = listOf(
    Color.parseColor("#FF4444"),
    Color.parseColor("#4CAF50"),
    Color.parseColor("#2196F3"),
    // 更多颜色...
)
val paletteAdapter = ColorPaletteAdapter(colorList) { selectedColor ->
    // 收到选中的颜色，更新卡片
    cardAdapter.updateCardColor(selectedColor)
}
colorPaletteRv.apply {
    layoutManager = LinearLayoutManager(requireContext(), LinearLayoutManager.HORIZONTAL, false)
    adapter = paletteAdapter
}