如何实现RecyclerView项颜色切换及Tab式按钮交互功能

核心思路 #

维护一个选中位置的变量，点击按钮时更新该变量，通知RecyclerView刷新，在Adapter中根据选中位置动态设置文字颜色。

具体实现步骤 #

1. 准备RecyclerView项布局

创建item_recycler.xml，包含用于展示文字的TextView：

<TextView
    android:id="@+id/tv_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:textColor="@color/black" />

2. 编写RecyclerView Adapter

Adapter中持有选中位置变量，在绑定视图时根据位置判断选中状态，设置对应颜色：

class MyAdapter(private val dataList: List<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    private var selectedPosition = -1 // 默认无选中项

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val tvItem: TextView = itemView.findViewById(R.id.tv_item)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.tvItem.text = dataList[position]
        // 根据选中状态切换文字颜色
        holder.tvItem.setTextColor(if (position == selectedPosition) Color.RED else Color.BLACK)
    }

    override fun getItemCount() = dataList.size

    // 更新选中位置并触发刷新
    fun setSelectedPosition(position: Int) {
        selectedPosition = position
        notifyDataSetChanged()
    }
}

3. 主布局与逻辑绑定

主布局activity_main.xml包含按钮组和RecyclerView：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <Button
            android:id="@+id/btn_tab1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Tab 1" />

        <Button
            android:id="@+id/btn_tab2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Tab 2" />

        <Button
            android:id="@+id/btn_tab3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Tab 3" />
    </LinearLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

在Activity中绑定按钮点击事件，调用Adapter的选中方法：

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

        val dataList = listOf("项1", "项2", "项3")
        val adapter = MyAdapter(dataList)
        recyclerView.apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            this.adapter = adapter
        }

        btn_tab1.setOnClickListener { adapter.setSelectedPosition(0) }
        btn_tab2.setOnClickListener { adapter.setSelectedPosition(1) }
        btn_tab3.setOnClickListener { adapter.setSelectedPosition(2) }
    }
}

4. 性能优化（可选）

如果不想全量刷新RecyclerView，可以只刷新前后两个选中项：

fun setSelectedPosition(newPosition: Int) {
    val oldPosition = selectedPosition
    selectedPosition = newPosition
    if (oldPosition != -1) notifyItemChanged(oldPosition)
    notifyItemChanged(newPosition)
}

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