RecyclerView 구성요소

안녕하세요.

이번에는 RecyclerView를 사용하기 위해 필요한 구성요소에 대해 알아보겠습니다.

 

RecyclerView 구성요소

1. RecyclerView: 데이터에 해당하는 뷰가 포함된 ViewGroup. 뷰 자체를 뜻하며, 레이아웃에 RecyclerView를 추가해 주어야 합니다.
2. RecyclerView.Adapter: 뷰에 데이터를 바인딩합니다.
3. RecyclerView.ViewHolder: 목록의 각 개별 요소를 정의합니다. 뷰홀더의 생성 시점에는 연결된 데이터가 없고, 생성 이후 RecyclerView가 뷰홀더를 데이터에 바인딩합니다.
4. LayoutManager: 목록의 개별 요소를 정렬합니다.

 

1. RecyclerView

데이터에 해당하는 뷰가 포함된 ViewGroup

실제 화면에서 목록이 표시되어야 하는 곳에 배치합니다.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutManager="LinearLayoutManager" />
</FrameLayout>

위 코드처럼 간단하게 목록을 표시할 수 있습니다. 이렇게 하면 화면 전체에 리스트가 표시됩니다.

LayoutManager는 위의 코드처럼 xml에서 지정할 수도 있고, 코드에서 지정할 수도 있습니다.

 

---

 

2. RecyclerView.Adapter

 

스타벅스  어플리케이션 주문 화면

위의 예시를 잠깐 봅시다.

위 리스트의 각 항목을 보면, 왼쪽에는 상품을 나타내는 사진이 있고 오른쪽에는 상품 이름, 영문 이름, 가격이 순서대로 세로로 나열되어 있습니다.

그러나 서버에서 데이터를 받아올 때는 저 그림 그대로 오지는 않겠죠.

{
  "콜드_브루": {
    "사진": "url1",
    "영문이름": "Cold_Brew",
    "가격": "6900"
  },
  "아이스_자몽_허니_블랙_티": {
    "사진": "url2",
    "영문이름": "Iced_Grapefruit_Honey_Black_Tea",
    "가격": "7700"
  },
  "딸기_아사이_레모네이드_스타벅스_리프레셔": {
    "사진": "url3",
    "영문이름": "Strawberry_Acai_with_Lemonade_Starbucks_Refreshers",
    "가격": "7900"
  }
}

JSON 형식으로 데이터를 주고받는다면 대강 이런 내용으로 오지 않을까요?

그럼 이제 이 데이터가 어떤 곳에 어떻게 표시되어야 하는지 정의하고, 각 음료에 따라 아이템 뷰를 만들어야 합니다.

아래 사진처럼 말입니다.

예시 아이템 뷰

즉, Adapter는 데이터에 따라 각 항목의 뷰를 생성합니다.

 

---

 

3. RecyclerView.ViewHolder

목록의 각 개별 요소를 정의

ViewHolder는 그 이름처럼, 간단히 말해서 각 항목의 뷰를 "홀드"하고 있는 요소입니다.

Adapter에서 각 항목의 뷰 객체를 생성했습니다. 그럼 그 뷰를 그대로 리스트에 차례대로 사용할 수는 없을까요?

없습니다. Recyclerview에 항목을 표시하기 위해서는 단순히 뷰만 있어서는 안 됩니다.

onClickListener같은 콜백도 붙여야 하고, index와 id도 붙여야 하고, 재활용을 위한 정보나 뭐 그런 내부 동작을 위한 메타데이터들...

사용자에게 보이는 ItemView와 재활용이 가능한 리스트 구현을 위한 메타데이터들까지 포함한 Wrapper Class가 바로 ViewHolder라고 할 수 있겠습니다.

 

---

 

4. LayoutManager

LayoutManager는 RecyclerView의 정렬 형식을 관리합니다.

RecyclerView의 각 아이템이 화면에 표시되는 방식으로는 크게 세 가지가 있습니다.

1. Linear: 아래로 쭉쭉 내리거나 옆으로 밀 수 있는, 흔히 볼 수 있는 리스트 형태
2. Grid: 여러 항목들을 표시하기 좋은 격자 형태
3. StaggerdGrid: 격자 형태에서 세로 길이 지정이 자유로운 형태

새로 추가되는 아이템의 화면 표시를 관리하는 만큼, 아이템 뷰의 재활용 정책도 LayoutManager에서 제어합니다.

 

---

 

정리

대략적인 RecyclerView의 구성 요소들을 살펴보았습니다.

다음 포스팅은 RecyclerView의 자세한 코드들을 제가...힘닿는 데까지 이해하고 나서 올라올 예정이에요.

13501줄의 코드를 잘 읽어보고 돌아오겠습니다.

그나저나 폰트를 바꿔 봤는데 글이 아주 예뻐졌네요.

진작 쓸걸...