又来更新小功能了，项目中经常会遇到单选多选功能，总是草草的写下没有系统总结，今天来记录一下。这篇是用RecyclerView实现单选多选功能，下一篇再来讲用RecyclerView实现折叠效果的树形结构。
1. 效果图
单选.gif
单选取消.gif
多选.gif
2. RecyclerView实现单选功能
2.1 实现思路
- itemView布局内的字体颜色和背景使用
selector来控制，所以当RecyclerView的itemView的isSelect属性为true时，该布局内的颜色和字体会变为选中状态下的颜色。 - 当点击新的itemView时，将旧的itemView设置为false，新的点击位置设置为true，即可实现单选的效果。
2.2 具体实现
2.2.1创建布局
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="72dp"
android:layout_height="92dp"
android:background="@drawable/bg_selector"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="@+id/tvDate"
android:text="10/28"
android:textSize="15sp"
android:textColor="@color/text_sel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="20dp"/>
......
</androidx.constraintlayout.widget.ConstraintLayout>
bg_selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorBlue" android:state_selected="true"></item>
<item android:drawable="@color/colorWhite" android:state_selected="false"></item>
</selector>
text_sel 同理
这里的selector主要用到了state_selected属性，当为true时代表选中，设置背景为蓝色，否则设置为灰色
2.2.2 创建适配器逻辑
class SingleSelectAdapter(var mDataList: MutableList<String>) :
RecyclerView.Adapter<SingleSelectAdapter.MyViewHolder>() {
//选择的位置
var selPosition = 0
//临时记录上次选择的位置
var temp =-1
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
holder.date.text = mDataList[position]
holder.itemView.isSelected = holder.layoutPosition==selPosition
holder.itemView.setOnClickListener {
holder.itemView.isSelected =true
//将旧的位置保存下来，用于后面把旧的位置颜色变回来
temp = selPosition
//设置新的位置
selPosition = holder.layoutPosition
//更新旧位置
notifyItemChanged(temp)
}
}
}
在该适配器中，我们使用到两个变量，一个变量用来记录当前点击的位置，即选中的位置；一个变量用来临时记录当点击新的位置时，旧的位置，防止selPosition赋新值后旧的位置找不到了。
具体的逻辑在onBindViewHolder()方法内
holder.itemView.isSelected = holder.layoutPosition==selPosition当 当前的itemView位置是selPosition时，将其设置为true，否则设置为false。当点击新位置时，先将点击位置itemView的
isSelected设置为true代表选中，然后用temp记录下原先选中的位置，将新的位置保存在selPosition中，然后再将旧位置进行更新。
2.2.4 出现的问题
单选闪烁.gif
看动画，你会发现当点击新的位置时，旧位置会发生闪烁，这是因为RecyclerView默认设置了DefaultItemAnimator动画，所以在调用notifyItemChanged()方法时，会产生动画，发生闪烁现象。
解决方案：
(mRecyclerView.itemAnimator as DefaultItemAnimator).supportsChangeAnimations = false
将其设置为不支持数据更改时的动画即可。
2.3 可取消的单选
2.3.1 实现思路
要实现可取消的单选，只需要将上面的Adapter更改两个地方
- 将selPosition设置为-1，代表默认不选中任何选项
- 更改
onBindViewHolder()内ItemView的点击事件逻辑
2.3.2 具体实现
class SingleSelectAdapter(var mDataList: MutableList<String>) :
RecyclerView.Adapter<SingleSelectAdapter2.MyViewHolder>() {
private var mItemClickListener: MyItemClickListener?=null
//选择的位置(-1则代表默认没有选中)
private var selPosition = -1
//临时记录上次选择的位置
private var temp = -1
.....
override fun onBindViewHolder(holder: SingleSelectAdapter2.MyViewHolder, position: Int) {
holder.date.text = mDataList[position]
holder.itemView.isSelected = holder.layoutPosition == selPosition
holder.itemView.setOnClickListener {
//已选中则取消选中，更新原位置
if (it.isSelected) {
it.isSelected = false
notifyItemChanged(selPosition)
selPosition = -1
//更新旧位置
mItemClickListener?.onClick(holder.layoutPosition,false)
}else{
holder.itemView.isSelected = true
//将旧的位置保存下来，用于后面把旧的位置颜色变回来
temp = selPosition
//设置新的位置
selPosition = holder.layoutPosition
//更新旧位置
notifyItemChanged(temp)
mItemClickListener?.onClick(holder.layoutPosition,true)
}
}
}
interface MyItemClickListener{
fun onClick(position:Int,isSelect:Boolean)
}
fun setOnMyItemClickListener(listener:MyItemClickListener){
this.mItemClickListener = listener
}
}
3. RecyclerView实现多选功能
3.1 实现思路
- 相比及单选，多选就容易多了，布局和单选的一样，也是使用
selector来控制选中和未选中状态的颜色。 - 用集合来保存选中的位置下标。
- 当点击itemView时，若该itemView的下标不存在于集合中，则将该位置放入集合，且该位置的isSelect属性设置为true；若存在于集合中，则将其从集合中remove掉，然后将该位置的isSelect属性设置为false即可。
3.2 具体实现
class MutilSelectAdapter(val dataList:MutableList<String>):RecyclerView.Adapter<MutilSelectAdapter.MyViewHolder>() {
//用来记录已经勾选的位置(set集合是为了防止放入重复数据)
var mutilSelectedList = mutableSetOf<Int>()
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
holder.tvContent.text = dataList[position]
holder.ivSelect.isSelected = mutilSelectedList.contains(position)
holder.itemView.setOnClickListener {
if (mutilSelectedList.contains(position)) {
mutilSelectedList.remove(position)
holder.ivSelect.isSelected = false
Log.i(TAG, "onBindViewHolder: 取消选中")
} else {
mutilSelectedList.add(position)
holder.ivSelect.isSelected = true
Log.i(TAG, "onBindViewHolder: 选中")
}
}
}
}
总结
总体上还是很简单的，无非就是用isSelect属性配合Selector来实现选中和未选中的效果，然后就是Adapter内点击事件里选中和未选中的逻辑设定，没有太多难点。以后遇到的无论是横向还是纵向，什么样的布局，无非就是item布局更改一下方向改变一下，具体的操作没什么难点。项目Github地址
如果本文对你有帮助，请别忘记三连，如果有不恰当的地方也请提出来，下篇文章见。
