100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > RecyclerView实现单选和多选功能

RecyclerView实现单选和多选功能

时间:2019-01-20 22:40:44

相关推荐

RecyclerView实现单选和多选功能

又来更新小功能了,项目中经常会遇到单选多选功能,总是草草的写下没有系统总结,今天来记录一下。这篇是用RecyclerView实现单选多选功能,下一篇再来讲用RecyclerView实现折叠效果的树形结构。

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="/apk/res/android"android:layout_width="72dp"android:layout_height="92dp"android:background="@drawable/bg_selector"xmlns:app="/apk/res-auto"><TextViewandroid: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="/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 =-1override fun onBindViewHolder(holder: MyViewHolder, position: Int) {holder.date.text = mDataList[position]holder.itemView.isSelected = holder.layoutPosition==selPositionholder.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 出现的问题

看动画,你会发现当点击新的位置时,旧位置会发生闪烁,这是因为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 == selPositionholder.itemView.setOnClickListener {//已选中则取消选中,更新原位置if (it.isSelected) {it.isSelected = falsenotifyItemChanged(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 = falseLog.i(TAG, "onBindViewHolder: 取消选中")} else {mutilSelectedList.add(position)holder.ivSelect.isSelected = trueLog.i(TAG, "onBindViewHolder: 选中")}}}}

总结

总体上还是很简单的,无非就是用isSelect属性配合Selector来实现选中和未选中的效果,然后就是Adapter内点击事件里选中和未选中的逻辑设定,没有太多难点。以后遇到的无论是横向还是纵向,什么样的布局,无非就是item布局更改一下方向改变一下,具体的操作没什么难点。项目Github地址

如果本文对你有帮助,请别忘记三连,如果有不恰当的地方也请提出来,下篇文章见。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。