Android 간단한 RecyclerView 사용법

RecyclerView를 사용해보자. 참고로 이 예제는 View Binding을 사용하였다.

최종 결과물을 미리 보자면 아래와 같다.

1. RecyclerView가 추가될 위치에 삽입하기

먼저, xml 파일 상에서 원하는 위치에 RecyclerView를 추가한다. 나는 mainactivity에 추가할 것이기 때문에, activity_main.xml에 recyclerview를 아래와 같이 추가하였다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

2. 하나의 Row 디자인 만들기

RecyclerView 내부에 보여질 열(Row) view의 xml을 만들어 주자. 이 예제에서는 row_item.xml에 해당 파일을 만들어 주었다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/headText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="HeadText"/>
    <TextView
        android:id="@+id/descriptionText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Description"/>

</LinearLayout>

위 xml의 디자인은 아래와 같다.

RecyclerView는 위 디자인의의 열에 적절한 값이 들어가고, 이것이 반복되는 꼴이 될 것이다.

단, 간단한 디자인의 경우에는 따로 xml을 생성하지 않고 android.R.layout.simple_list_item_1, android.R.layout.simple_list_item_2 와 같이 android.R.layout~~의 내용을 사용할 수 있다.

3. 각 View에 적용될 Data 형식을 정하기

View에 적용될 값의 형식을 정해주어야 한다. 이 예제의 경우 두개의 String만이 필요하기 때문에 단순히 Pair<String,String>을 사용할 것이다. Pair 의 first 값은 headText에, second 값은 descriptionText에 적용된다.

필요하다면, class를 하나 생성하여 사용해도 된다.

4. Adapter class 추가하기

RecyclerView에 적용될 Adapter를 추가하자.

package com.kazakan.recyclervieexample

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.kazakan.recyclervieexample.databinding.RowItemBinding

class MyRecycleAdapter(
    var data : MutableList<Pair<String,String>>
) : RecyclerView.Adapter<MyRecycleAdapter.MyViewHolder>() {

    inner class MyViewHolder(private val binding : RowItemBinding) : RecyclerView.ViewHolder(binding.root){
        fun bind(data:Pair<String,String>){
            binding.headText.text = data.first
            binding.descriptionText.text = data.second
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val binding = RowItemBinding.inflate(LayoutInflater.from(parent.context),parent,false)
        return MyViewHolder(binding)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.bind(data[position])
    }

    override fun getItemCount() = data.size
}

MyViewHolder 의 bind 에서 view를 값에 맞게 설정한다.

onBindViewHolder 에서는 리스트로 들어온 data 중에서 어느것을 몇번째 view에 bind할것인지 정해준다.

getItemCount 는 Data의 수를 반환한다.

5. RecyclerView, Adapter 연결하기

recyclerView를 adapter에 연결해야 한다. 연결하기 전, recyclerView의 layoutmanager를 설정하여야 한다. 이 예제에서는 단순 나열임으로 LinearLayoutManager 로 정해주었다.

위에서 만들어준 MyRecycleAdapter class의 instance를 만들어 주고, 해당 instance를 recyclerview의 adapter로 정해주면 된다.

이를 적용한 MainActivity.kt의 모습은 아래와 같다.

package com.kazakan.recyclervieexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import com.kazakan.recyclervieexample.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    lateinit var binding : ActivityMainBinding
    lateinit var adapter : MyRecycleAdapter

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

        // set data
        val data = mutableListOf(
            Pair("Do","a deer a female deer"),
            Pair("Re","a drop of golden sun"),
            Pair("Mi","a name, I call myself"),
            Pair("Fa","a long, long way to run"),
            Pair("So","a needle pulling thread"),
            Pair("La","a note to follow So"),
            Pair("Ti","a drink with jam and bread"),
            Pair("Do","That will bring us back to Do, oh oh oh~"),
            Pair("Doremifasolasido Sodo!","- fin -")
        )

        // set adapter
        adapter = MyRecycleAdapter(data)

        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        binding.recyclerView.adapter = adapter

        setContentView(binding.root)
    }
}

이제 빌드를 하면, 맨 처음 보았던 사진의 결과를 볼 수 있다!