[Android Kotlin] RecyclerView 안드로이드 코틀린 리사이클러뷰

항상 그렇듯 먼저 공식 문서를 봅시다.

https://developer.android.com/guide/topics/ui/layout/recyclerview?hl=ko#kotlin 

RecyclerView로 동적 목록 만들기  |  Android 개발자  |  Android Developers

 

역시나 공식 문서를 봐도 이해가 어렵네요.

이번에도 코드를 보며 천천히 따라가 봅시다!

 

자바와 마찬가지로 다음 순서로 작성합니다.

1. 리사이클러뷰 생성

2. 어댑터 객체 생성 및 데이터 넘기기

3. 어댑터에서 데이터 처리 및 뷰 아이템 표현

 

1) 우선 xml 파일에 리사이클러뷰를 추가합니다

 

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">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

2) res/layout 폴더에 새로운 레이아웃 리소스 파일을 만듭니다

   이 레이아웃 파일에 리사이클러 뷰에 나타날 아이템을 정의해 줍니다

   텍스트뷰 이외에도 이미지뷰 등 다양한 뷰를 추가 할 수 있습니다 

 

my_recyclerview.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:layout_width="wrap_content"
    android:layout_height="wrap_content">

    //각각의 리사이클러뷰 아이템에 번호를 써주는 뷰
    <TextView
        android:id="@+id/numberView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1."
        android:textColor="@color/black"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    //어댑터로 받은 문자열 출력하는 뷰
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="데이터 값"
        android:textColor="@color/black"
        android:textSize="28sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/numberView"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

3) 리사이클러뷰의 동작을 실행할 '어댑터'라는 새로운 클래스를 만듭니다.

 

MyAdapter.kt

package com.e.myapplication

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView


class MyAdapter(private val dataSet: Array<String>) : // 생성인자로 리사이클러뷰로 나타낼 데이터를 받아줍니다.
    RecyclerView.Adapter<MyAdapter.ViewHolder>() {

    // 뷰홀더 아이템 초기화 클래스
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val number: TextView
        val data: TextView

        init {
            number = view.findViewById(R.id.numberView)
            data = view.findViewById(R.id.textView)
        }
    }

    // 뷰홀더 생성, LayoutInflater로 레이아웃과 뷰를 연결
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(viewGroup.context)
            .inflate(R.layout.my_recyclerview, viewGroup, false)

        return ViewHolder(view)
    }

    // 뷰홀더의 각 아이템을 바인딩(묶는) 작업
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

        // 위에서 생성한 뷰홀더 클래스에서 각 아이템들을 가져옴
        // 추가적으로 해야할 작업들을 여기서 처리
        viewHolder.number.text = (position+1).toString()+". "
        viewHolder.data.text = dataSet[position]
    }

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

}

 

4) 이제 액티비티에서 실행해주면 끝!

 

MainActivity.kt

 

package com.e.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.RecyclerView

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

        // 데이터를 받아서 리사이클러뷰 어댑터에 적용시키는 작업
        val dataSet = arrayOf("사과","배","바나나","수박","포도")

        val recyclerView: RecyclerView = findViewById(R.id.my_recycler_view)
        
        // LayoutManager 는 리사이클러뷰의 모양을 잡아주는 역할을 합니다.
        // LinearLayoutManager 로 만들면 리니어레이아웃처럼 직선으로 뷰가 생성되고,
        // GridLayoutManager 로 만들면 그리드뷰 형식의 격자뷰가 생깁니다.
        val layoutManager = LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false)
        
        recyclerView.layoutManager = layoutManager
        recyclerView.adapter =  MyAdapter(dataSet)
    }
}

 

*실행화면