[Android] RecyclerView 스크롤시 설정 해제되는 현상(체크박스, 백그라운드색상 등)해결법

유저 아이디, 유저 이름, 체크박스를 가지는 리사이클러뷰를 간단하게 구성해본다.

 

이번 포스팅에는 편하게 만들기 위해서 뷰 바인딩을 사용하였다.

 

뷰 바인딩이란?

[Android] ViewBinding (뷰바인딩)

 

간단하게 버튼을 누르면 리사이클러뷰 아이템이 추가되고, 체크박스를 선택할 수 있는 기능이 있는 것이다.

(샘플이기 때문에 삭제 구현은 하지 않았다.)

 

다음과 같이 구성한다.

 

메인

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private var userRecyclerViewAdapter: UserRecyclerViewAdapter? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        setUpRecyclerView()
    }

    private fun setUpRecyclerView(){
        binding.userRecyclerView.apply {
            userRecyclerViewAdapter = UserRecyclerViewAdapter()
            adapter = userRecyclerViewAdapter
            layoutManager = LinearLayoutManager(this@MainActivity)
        }

        addItem()
    }

    private fun addItem(){
        binding.btnAddItem.setOnClickListener {
            userRecyclerViewAdapter?.addUserItems(User("User", "바보"))
        }
    }

}

 

메인 xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_add_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/user_recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_add_item"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

유저 데이터 클래스

data class User(val userId: String, val userName: String)

 

리사이클러뷰 어뎁터

class UserRecyclerViewAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>(){

    private val userItems = arrayListOf<User>()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder
        = UserItemViewHolder(ItemUserBinding.inflate(LayoutInflater.from(parent.context), parent, false))


    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        if (holder is UserItemViewHolder)
            holder.bind(userItems[position])
    }

    override fun getItemCount(): Int = if (userItems.isNullOrEmpty()) 0 else userItems.size

    fun addUserItems(user: User){
        userItems.add(user)
        notifyItemInserted(userItems.size-1)
    }

    inner class UserItemViewHolder(private val binding: ItemUserBinding) : RecyclerView.ViewHolder(binding.root){
        fun bind(userItem: User) = with(binding){
            tvUserId.text = userItem.userId
            tvUserName.text = userItem.userName

            checkboxUser.setOnClickListener {
                Log.e("CheckBox", "$adapterPosition ${checkboxUser.isChecked}")
            }
        }
    }
}

 

리사이클러뷰 아이템 레이아웃

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv_userId"
        android:gravity="center"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        android:id="@+id/tv_userName"
        android:gravity="center"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintLeft_toRightOf="@id/tv_userId"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <CheckBox
        android:id="@+id/checkbox_user"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="@id/tv_userName"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

이렇게 구성하면 클릭 시 체크가 되지 않은 체크박스는 체크가 되고, 체크가 된 체크박스를 클릭하면 체크가 풀리게 된다.

(로그로 아이템 포지션과 체크 여부를 확인한다.)

 

완벽하게 구현된 것 같지만, 스크롤이 가능할 정도로 아이템을 생성한 뒤 스크롤을 해보면 중구난방으로 체크가 된다.(풀린 것도 있고, 체크하지 않았는데 체크가 된 것도 있다.)

 

이는 리사이클러뷰가 아이템을 스크롤하면 재생성하기 때문에 생긴 문제이다.

 

이것을 해결하기 위해 두 가지 방법이 존재한다.(더 있는지는 잘 모르겠다.)

 

1. sparseBooleanArray를 활용한다.
2. position과 상태를 저장할 변수를 가진 데이터 클래스를 이용한다.

 

첫 번째의 방법으로 수정을 하게 되면 어뎁터는 다음과 같이 변경된다.

class UserRecyclerViewAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>(){

    private val userItems = arrayListOf<User>()
    private val checkboxStatus = SparseBooleanArray()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder
        = UserItemViewHolder(ItemUserBinding.inflate(LayoutInflater.from(parent.context), parent, false))


    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        if (holder is UserItemViewHolder)
            holder.bind(userItems[position])
    }

    override fun getItemCount(): Int = if (userItems.isNullOrEmpty()) 0 else userItems.size

    fun addUserItems(user: User){
        userItems.add(user)
        notifyItemInserted(userItems.size-1)
    }

    inner class UserItemViewHolder(private val binding: ItemUserBinding) : RecyclerView.ViewHolder(binding.root){
        fun bind(userItem: User) = with(binding){
            tvUserId.text = userItem.userId
            tvUserName.text = userItem.userName

            checkboxUser.isChecked = checkboxStatus[adapterPosition]

            checkboxUser.setOnClickListener {
                if (!checkboxUser.isChecked)
                    checkboxStatus.put(adapterPosition, false)
                else
                    checkboxStatus.put(adapterPosition, true)
                notifyItemChanged(adapterPosition)
            }
        }
    }
}

 

두 번째 방법으로 수정하면 다음과 같이 변경된다.

 

상태를 저장할 데이터 클래스를 하나 만든다.

data class UserCheckStatus(val position: Int, var isChecked: Boolean)

 

어뎁터 클래스를 다음과 같이 수정한다.

class UserRecyclerViewAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>(){

    private val userItems = arrayListOf<User>()
    private val userCheckBoxStatus = arrayListOf<UserCheckStatus>()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder
        = UserItemViewHolder(ItemUserBinding.inflate(LayoutInflater.from(parent.context), parent, false))


    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        if (holder is UserItemViewHolder)
            holder.bind(userItems[position], userCheckBoxStatus[position])
    }

    override fun getItemCount(): Int = if (userItems.isNullOrEmpty()) 0 else userItems.size

    fun addUserItems(user: User){
        userItems.add(user)
        userCheckBoxStatus.add(UserCheckStatus(userItems.size - 1, false))
        notifyItemInserted(userItems.size-1)
    }

    inner class UserItemViewHolder(private val binding: ItemUserBinding) : RecyclerView.ViewHolder(binding.root){
        fun bind(userItem: User, userStatus: UserCheckStatus) = with(binding){
            tvUserId.text = userItem.userId
            tvUserName.text = userItem.userName

            checkboxUser.isChecked = userStatus.isChecked

            checkboxUser.setOnClickListener {
                userStatus.isChecked = checkboxUser.isChecked
                notifyItemChanged(adapterPosition)
            }
        }
    }
}

 

이렇게 변경하게 되면 아이템 상태변화(백그라운드 색상 및 체크박스 등등) 후에 스크롤을 하여도 값이 변경되지는 않는다.