Lesson 10: Advanced RecyclerView use cases

💡 Teach Android Development

구글에서 제공하는 교육자료를 정리하기 위한 포스트입니다.

Android Development Resources for Educators

RecyclerView recap

RecyclerView overview

• 데이터 list를 표시하기 위한 위젯.
• 스크롤 성능을 높이기 위해 item view를 재사용.
• dataset의 각 item에 대한 layout을 지정할 수 있습니다.
• animation, transition 지원.

View recycling in RecyclerView

• item이 화면 밖으로 스크롤 되면 파괴되지 않고 재활용을 위해 pool에 넣습니다.
• onBindViewHolder()는 View에 새로운 값으로 바인딩 한 다음 list에 재 입력합니다.

Adapter for RecyclerViewDemo

class NumberListAdapter(var data: List<Int>):
        RecyclerView.Adapter<NumberListAdapter.IntViewHolder>() {
   class IntViewHolder(val row: View): RecyclerView.ViewHolder(row) {
       val textView = row.findViewById<TextView>(R.id.number)
   }

Functions for RecyclerViewDemo

onCreateViewHolder()를 통해 레이아웃을 inflate 합니다.

onBindViewHolder()를 통해 데이터를 bind 합니다.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):
              IntViewHolder {
   val layout = LayoutInflater.from(parent.context)
       .inflate(R.layout.item_view, parent, false)
   return IntViewHolder(layout)
}

override fun onBindViewHolder(holder: IntViewHolder, position: Int) {
   holder.textView.text = data.get(position).toString()
}

Set the adapter onto the RecyclerView

Activity에서 RecyclerView에 adapter를 설정합니다.

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

   val rv: RecyclerView = findViewById(R.id.rv)
   rv.layoutManager = LinearLayoutManager(this)

   rv.adapter = NumberListAdapter(IntRange(0,100).toList())
}

Make items in the list clickable

ViewHolder가 생성될 때 클릭 리스너를 설정해줍니다.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): IntViewHolder{
    val layout = LayoutInflater.from(parent.context).inflate(R.layout.item_view,
         parent, false)
    val holder = IntViewHolder(layout)
    holder.row.setOnClickListener {
        // Do something on click
    }
    return holder
}

ListAdapter

• RecyclerView.Adapter
  • 업데이트할 때마다 UI 데이터를 삭제합니다.
  • 비용이 많이 들고 낭비가 될 수 있습니다.
• ListAdapter
  • 현재 표시된 것과 표시해야 할 것의 차이를 계산합니다.
  • 변경 사항은 백그라운드 스레드에서 계산됩니다.

Sort using RecyclerView.Adapter

Sort using ListAdapter

ListAdapter example

RecyclerView.Adapter<ViewHolder>대신 ListAdapter<Int, ViewHolder>를 extend 합니다.

list 비교 방법을 결정하는 DiffUtil.ItemCallback을 전달합니다.

 class NumberListAdapter: ListAdapter<Int,  
        NumberListAdapter.IntViewHolder>(RowItemDiffCallback()) {

    class IntViewHolder(val row: View):RecyclerView.ViewHolder(row) {
        val textView = row.findViewById<TextView>(R.id.number)
    }

    ...

DiffUtil.ItemCallback

현재 list를 다른 list로 변환하는데 필요한 방식을 결정합니다.

• areContentsTheSame(oldItem: T, newItem: T): Boolean
  • 동일한 데이터를 가지고 있는지 확인하기 위해 호출됩니다.
• areItemsTheSame(oldItem: T, newItem: T): Boolean
  • 기존 item과 동일한 item 인지 확인하기 위해 호출됩니다.
  • 고유 ID가 있는 경우 동일한지 확인해야 합니다.

DiffUtil.ItemCallback example

class RowItemDiffCallback : DiffUtil.ItemCallback<Int>() {

   override fun areItemsTheSame(oldItem: Int, newItem: Int): Boolean {
       return oldItem.id == newItem.id
   }

   override fun areContentsTheSame(oldItem: Int, newItem: Int): Boolean {
       return oldItem == newItem
   }
}

Advanced binding

ViewHolders and data binding

class IntViewHolder private constructor(val binding: ItemViewBinding):
        RecyclerView.ViewHolder(binding.root) {
    companion object {
        fun from(parent: ViewGroup): IntViewHolder {
            val layoutInflater = LayoutInflater.from(parent.context)
            val binding = ItemViewBinding.inflate(layoutInflater,
                parent, false)
            return IntViewHolder(binding)
        }
    }
}

Using the ViewHolder in a ListAdapter

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):
        IntViewHolder {
    return IntViewHolder.from(parent)
}

override fun onBindViewHolder(holder: NumberListAdapter.IntViewHolder,
        position: Int) {
    holder.binding.num = getItem(position)
}

Binding adapters

XML 속성에 함수를 매핑할 수 있습니다.

기존 프레임워크 동작.

android:text = "foo" →  TextView.setText("foo") is called

Custom 속성 생성.

app:base2Number = "5" → TextView.setBase2Number("5") is called

Custom attribute

Custom 속성을 사용하여 추가합니다.

<TextView
   android:id="@+id/base2_number"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textSize="24sp"         
   app:base2Number="@{num}"/>

Add a binding adapter

binding adapter를 정의합니다.

@BindingAdapter("base2Number")
fun TextView.setBase2Number(item: Int) {
    text = Integer.toBinaryString(item)
}

BindingAdapter를 통해 이미지 로드 또는 시간을 소모하는 처리가 있을 때 executePendingBindings()를 호출하는 것이 중요합니다.

override fun onBindViewHolder(holder: NumberListAdapter.IntViewHolder,
        position: Int) {
    holder.binding.num = getItem(position)
    holder.binding.executePendingBindings()
}

Multiple item view types

Add a new item view type

1. 새로운 XML을 만듭니다.
2. 새로운 유형을 보유하도록 adapter를 수정합니다.
3. getItemViewType() 함수를 재정의합니다.
4. 새로운 ViewHolder를 만듭니다.
5. onCreateViewHolder(), onBindViewHolder에 조건을 추가하여 새 유형을 처리합니다.

Declare new color item layout

<layout ...>
   <data>
       <variable
           name="color"
           type="android.graphics.Color" />
   </data>
   <androidx.constraintlayout.widget.ConstraintLayout ...>
       <TextView
           ...
           android:backgroundColor="@{color.toArgb()}" />
       <TextView
           ...
           android:text="@{color.toString()}" />
   </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

New view type

• adapter에서 두 가지 유형에 대해 알아야 합니다.

  • 숫자를 표시하는 항목
  • 색상을 표시하는 항목

  enum class ITEM_VIEW_TYPE { NUMBER, COLOR }

• getItemViewType()을 수정하여 적절한 유형을 반환합니다.
  override fun getItemViewType(position: Int): Int

Override getItemViewType

override fun getItemViewType(position: Int): Int {
    return when(getItem(position)) {
        is Int -> ITEM_VIEW_TYPE.NUMBER.ordinal
        else -> ITEM_VIEW_TYPE.COLOR.ordinal
    }
}

Define new ViewHolder

class ColorViewHolder private constructor(val binding: ColorItemViewBinding): 
      RecyclerView.ViewHolder(binding.root) {

    companion object {
        fun from(parent: ViewGroup): ColorViewHolder {
            val layoutInflater = LayoutInflater.from(parent.context)
            val binding = ColorItemViewBinding.inflate(layoutInflater,
                parent, false)
            return ColorViewHolder(binding)
        }
    }
}

Update onCreateViewHolder()

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): 
         RecyclerView.ViewHolder {

    return when(viewType) {
        ITEM_VIEW_TYPE.NUMBER.ordinal -> IntViewHolder.from(parent)
        else -> ColorViewHolder.from(parent)
    }
}

Update onBindViewHolder()

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
    when (holder) {
        is IntViewHolder -> {
            holder.binding.num = getItem(position) as Int
            holder.binding.executePendingBindings()
        }
        is ColorViewHolder -> {
            holder.binding.color = getItem(position) as Color
            holder.binding.executePendingBindings()
        }
    }
}

Grid layout

Specifying a LayoutManager

• LinearLayoutManager로 표시할 경우
  recyclerView.layoutManager = LinearLayoutManager(this)
• GridLayoutManager로 표시할 경우
  recyclerView.layoutManager = GridLayoutManager(this, 2)
• 다른 layout manager 사용(또는 직접 생성)

GridLayoutManager

• 행과 열의 테이블로 정렬합니다.
• 방향은 세로, 가로로 스크롤 할 수 있습니다.
• 기본적으로 각 항목은 1 span을 차지합니다.
• 항목이 차지하는 span 수를 변경할 수 있습니다.

Set span size for an item

SpanSizeLookup 인스턴스를 만들고 getSpanSize(position) 재정의합니다.

val manager = GridLayoutManager(this, 2)
manager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
    override fun getSpanSize(position: Int): Int {
        return when (position) {
            0,1,2 -> 2
            else -> 1
        }
    }
}