Kotlin RecyclerView 클릭 만들기 (with kotpref)

아마 이 방법말고 다른 방법이 많이 있을 텐데 

저의 경우에는 그냥 이렇게 만들었습니다.  

(참고로 만드는 방법만 설명하기 때문에 코드에대한 설명은 별로 없습니다.)

 

그래서 어떤거 만드냐고요? 

이거 만들겁니다.

 

 

일단 필요한거 먼저 설치 및 추가하고 시작할께요. 

(아래 포스트와 연관된 내용입니다.)

2023.02.28 - [Android 연습/Kotlin 익숙해지기] - Kotlin Kotpref 이용해서 간단하게 값 저장하기

 

1. build.gradle (:app)

implementation 'com.chibatching.kotpref:kotpref:2.13.1'
implementation 'com.chibatching.kotpref:gson-support:2.13.1'

2. MyApplication 생성

class MyApplication :Application(){
    override fun onCreate() {
        super.onCreate()
        Kotpref.init(this)
    }
}

3. UserData 생성

object UserData : KotprefModel(){
    var userAgeSelect : Int by intPref(-1) // 나이 셀 선택용
}

4. AndroidManifest 수정

<application
    android:name=".MyApplication"

여기까지는 kotpref 를 위한 준비입니다. 

 

그리고 선택시 저런 둥글한 사각형이 필요하겠죠?

 

5. selected_back.xml 추가 

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"  >
            <corners android:radius="16dp" />
            <solid android:color="#9FFF90" />
        </shape>
    </item>
</selector>

이제 어뎁터랑 메인만 만들면 됩니다.

6. adapter_age.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"
    android:id="@+id/age_generation_background_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/age_text_view"
        android:padding="12dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="20대 미만"
        android:textSize="20dp"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

7. AgeAdapter.kt 생성

class AgeAdapter (private val mContext: Context, private val dataSet: Array<String>): RecyclerView.Adapter<AgeAdapter.ViewHolder>() {

    private var itemClickListener : OnItemClickListener? = null
    class ViewHolder(context: Context, view: View) : RecyclerView.ViewHolder(view) {

        private val backGround : ConstraintLayout
        private val ageLbl : TextView
        private val mContext : Context
        init {
            backGround = view.findViewById(R.id.age_generation_background_layout)
            ageLbl = view.findViewById(R.id.age_text_view)
            mContext = context
        }
        fun  bind(age : String,on: Boolean){
            ageLbl.text = age
            isSelectedCell(on)
        }
        fun isSelectedCell(on: Boolean){
            if(on){
                backGround.background = mContext.getDrawable(R.drawable.selected_back)
            }else{
                backGround.background = null
            }
        }
    }

    fun setItemClickListener(onItemClickListener: OnItemClickListener) {
        this.itemClickListener = onItemClickListener
    }

    interface OnItemClickListener {
        fun onClick(view: View, position: Int) {
            val backGround = view.findViewById<ConstraintLayout>(R.id.age_generation_background_layout)
            backGround.background = view.context.getDrawable(R.drawable.selected_back)

        }
    }
    // Create new views (invoked by the layout manager)
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        // Create a new view, which defines the UI of the list item
        val view = LayoutInflater.from(viewGroup.context)
            .inflate(R.layout.adapter_age, viewGroup, false)

        return ViewHolder(mContext,view)
    }

    // Replace the contents of a view (invoked by the layout manager)
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

        if(UserData.userAgeSelect == position) {
            viewHolder.bind(dataSet[position],true)
        }else{
            viewHolder.bind(dataSet[position],false)
        }
        viewHolder.itemView.setOnClickListener {
            itemClickListener?.onClick(it,position)
        }

    }


    // Return the size of your dataset (invoked by the layout manager)
    override fun getItemCount() = dataSet.size
}

7.activity_main.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"
    android:background="#FFFFFF">

    <TextView
        android:id="@+id/introText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="56dp"
        android:layout_marginEnd="24dp"

        android:text="연령대를 선택해 주세요."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:textColor="@color/black"
        android:textSize="32dp"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/age_generation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginEnd="24dp"
        android:orientation="vertical"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/introText"
        app:layout_constraintVertical_bias="0.2" />



</androidx.constraintlayout.widget.ConstraintLayout>

8. MainActivity.kt 생성

class MainActivity : AppCompatActivity() {
    private var ageCycleView : RecyclerView? = null

    private val ageList: Array<String> = arrayOf("20대 미만","20대","30대","40대","50대","60대","70대","80대 이상")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        this.setUIView()
        this.setAgeGeneration()
    }
    private fun setUIView(){
        ageCycleView = findViewById<RecyclerView>(R.id.age_generation_view)
    }
    private fun setAgeGeneration(){
        ageCycleView?.adapter = AgeAdapter(this,ageList)
        val listAdapter = ageCycleView?.adapter as AgeAdapter    // 어댑터
        listAdapter.setItemClickListener(object: AgeAdapter.OnItemClickListener {
            override fun onClick(view: View, position: Int) {
                super.onClick(view, position) // 미리 정의해둔 onClick 호출
                println(position)
                UserData.userAgeSelect = position
                listAdapter.notifyDataSetChanged() // 리스트 새로고침
            }
        })
    }
}

 

여기까지 하시면 위와 같이 작동하시는걸 알수있습니다.

 

전체 코드를 올려두긴 했지만 혹시라도 필요하신 분들을 위해 

프로젝트파일을 올려두었으니 참고해주시길 바랍니다.

ClickEventRecycle.zip

19.97MB

 

제가 아직 이 부분은 많이 다루어 보질 않아 이렇게 만들었는데 

저처럼 아직 익숙하지 않으신 분들에게 도움이 되었으면 하는 마음에서 올려봅니다. 

 

그럼 오늘도 파이팅입니다.