RecyclerView 만으로는 화면에 출력되지 않는다.

RecyclerView의 구성요소

• ViewHolder(필수) : 항목에 필요한 뷰 객체를 가진다.
• Adapter(필수) : 항목을 구성한다.
• LayoutManager(필수) : 항목을 배치한다.
• ItemDecoration(옵션) : 항목을 꾸민다.

RecyclerView 사용법 예시

1. RecyclerView를 사용하려면 gradle 파일에 아래의 dependency를 선언한다.

implementation'androidx.recyclerview:recyclerview:1.2.1'

2. RecyclerView를 레이아웃 xml 파일에 등록한다.

activity_main.xml에 아래와 같이 RecyclerView를 추가해주었다.

<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/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
  
</androidx.constraintlayout.widget.ConstraintLayout>

3. 목록을 표시할 항목을 디자인한 레이아웃 xml 준비

여기서는 item_main.xml 파일에 아래와 같이 작성한다. 액티비티로 만들 필요 없고 레이아웃 파일만 만들어주면 된다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_root"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">
    <TextView
        android:id="@+id/item_data"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:text="temp"/>
</LinearLayout>

4. 아이템 클래스 생성

내부에 넣을 아이템에 해당하는 클래스를 생성해준다. 여기서는 간단하게 문자열 text 하나만을 가진다.

data class Item(
    var text: String? = ""
)

5. 어댑터 및 뷰홀더 준비

어댑터는 뷰 홀더의 뷰에 데이터를 출력해 각 항목을 만들어 주는 역할을 한다.어댑터는 RecyclerView.Adapter를 상속받아 작성한다.
여기서는 뷰홀더를 어댑터 내부의 inner class로 생성해주었다. 뷰홀더는 RecyclerView.ViewHolder를 상속받아 작성한다.

class MyAdapter(private val itemList: ArrayList<Item>) :
    RecyclerView.Adapter<MyAdapter.MyViewHolder>() {

    // 뷰 홀더 클래스
    inner class MyViewHolder(private val binding: ItemMainBinding) :
        RecyclerView.ViewHolder(binding.root) {
        fun bind(item: Item) {
            binding.itemData.text = item.text
        }
    }

    // ViewHolder 객체를 생성하여 리턴
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): MyAdapter.MyViewHolder {
        val binding: ItemMainBinding =
            ItemMainBinding.inflate(LayoutInflater.from(viewGroup.context), viewGroup, false)

        return MyViewHolder(binding)
    }

    // 데이터 갯수 리턴
    override fun getItemCount(): Int = itemList.size

    // ViewHolder 안의 내용을 position에 해당되는 데이터로 교체한다.
    override fun onBindViewHolder(holder: MyAdapter.MyViewHolder, position: Int) {
        holder.bind(itemList[position])
    }
}

어댑터에서 override 해야하는 함수 목록

• onCreateViewHolder() :
  항목의 뷰를 가지는 뷰 홀더 객체를 준비하기 위해 자동으로 호출된다.
  아래 코드는 뷰 홀더 객체를 생성해 반환한다. 반환된 뷰 홀더 객체는 자동으로 onBindViewHolder() 의 매개변수로 전달된다.
• getItemCount() :
  항목의 개수를 판단하기 위해 자동으로 호출된다.
  이 함수가 반환한 숫자만큼 onBindViewHolder() 가 호출되어 항목을 만든다.
• onBindViewHolder() :
  뷰 홀더의 뷰에 데이터를 출력하기 위해 자동으로 호출된다.
  매개변수로 전달된 뷰 홀더 객체의 뷰에 데이터를 출력하거나 필요한 이벤트를 등록한다. 두 번째 매개변수가 항목의 인덱스이다.

5. 리사이클러 뷰 출력

리사이클러 뷰에 어댑터와 레이아웃 매니저를 등록해 화면에 출력한다.

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        var list = ArrayList<Item>()

        for(i in 1..10){
            list.add(Item("item $i"))
        }
        val myAdapter = MyAdapter(list)
        binding.recyclerview.adapter = myAdapter
        binding.recyclerview.layoutManager = LinearLayoutManager(applicationContext)
        binding.recyclerview.addItemDecoration(DividerItemDecoration(this, LinearLayoutManager.VERTICAL))

    }
}

RecyclerView에 동적으로 아이템 추가하는 방법

// 동적으로 데이터 추가
list.add(Item("new Item"))
myAdapter.notifyDataSetChanged()

레이아웃 매니저

레이아웃 매니저는 어댑터로 만든 항목을 RecyclerView에 배치한다. RecyclerView.LayoutManager를 상속받아 만든다.

LinearLayoutManager

항목을 가로나 세로 방향으로 배치한다.

1. 항목을 세로로 배치한다.

binding.recyclerview.layoutManager = LinearLayoutManager(this)

2. 항목을 가로로 배치한다.

val layoutManager = LinearLayoutManager(this)
layoutManager.orientation = LinearLayoutManager.HORIZONTAL
binding.recyclerview.layoutManager = layoutManager

GridLayoutManager

항목을 그리드로 배치한다.

GridLayoutManager의 두번째 파라미터는 column의 개수이다. 방향도 설정할 수 있으며, 기본은 세로이다.

1. 세로로 배치

val layoutManager = GridLayoutManager(this, 2)
binding.recyclerview.layoutManager = layoutManager

2. 가로로 배치

val layoutManager = GridLayoutManager(this, 3, GridLayoutManager.HORIZONTAL, false)
binding.recyclerview.layoutManager = layoutManager

StaggeredGridLayoutManger

GridLayoutManager처럼 그리드로 배치하며, 각 뷰의 크기가 다르면 지그재그 형태로 배치한다.

val layoutManager = StaggeredGridLayoutManger(2, StaggeredGridLayoutManger.VERTICAL)
binding.recyclerview.layoutManager = layoutManager

참고 자료

• Do it 안드로이드 도서