RecyclerView : GridLayout

• 리사이클러뷰에는 layoutManager가 있음
  • LinearLayout : 수평 및 수직 목록
  • GridLayout : 그리드 레이아웃
  • 보다 복잡하게 사용하려면 커스텀으로 LayoutManager를 구현해야 함

Linear Layout

• 이전에 xml의 리사이클러뷰에 layoutManager에 LinearLayoutManager를 추가한 건 custom 없이 data를 수직 목록으로 표시한 것

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

• LinearLayout은 child view의 vertical, horizontal 배치를 모두 지원함

---

Grid Layout

• 데이터를 스크롤 가능한 grid 형태로 child view를 배치함
• 이미지 리스트 등 아이콘이나 이미지로 나타낼 수 있는 리스트에 최적
• Grid Layout 항목 배치 방법
  • rows and columns로 item을 정렬함
  • 기본으로 vertical 스크롤을 가정하며, 각 줄의 아이템은 한 개의 span을 차지함
  • item이 여러 개의 span을 차지할 수도 있음
  • 한 개의 span은 한 개의 column width와 같음

• 1, 2 그림은 각행이 3개의 span으로 구성됨
• GridLayoutManager는 기본적으로 사용자가 지정한 span count가 될 때까지 각 item을 한 개의 span에 배치함
  • span count에 이르면 다음 행으로 넘김
• 기본적으로 각 항목은 하나의 span을 차지하지만 점유할 span 수를 지정하여 항목을 더 넓게 만들 수 있음
  • 3번 그림의 맨 위 항목은 3개의 span을 차지함

** span 은 row 또는 column을 의미하며, GridLayoutManager에서는 spanCount를 사용하여 grid가 몇 개의 rows나 columns를 가지는지 가리킴, 또한 수평 또는 수직으로 차지하는 그리드 공간을 나타냄

** GridLayoutManager를 생성할 때, span의 수와 별도로 방향을 지정하면 span은 direction-agnoestic임. vertical 구성에서는 span과 column이 동일함

---

Grid Layout 구현

1. LayoutManager 변경

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager

• Kotlin 파일을 열고, OnCreateView()의 return문 직전에, GridLayoutManager를 생성함
  • create a new vertical, top-to-bottom GridLayoutManager with 3 spans
  • GridLayoutManager의 constructor는 4개의 인자를 받음
    • context : activity의 context
    • number spans : columns, in the default vertical layout
    • an orientation : default is vertical
    • reverse인지 여부 : default is false

val manager = GridLayoutManager(activity, 3, GridLayoutManager.VERTICAL, false)

• 그 줄 아래에, Recyclerview에게 이 GridLayoutMangaer를 사용하도록 알림

binding.sleepList.layoutManager = manager

2. 레이아웃 변경

• 현재 리사이클러뷰 아이템의 layout은 하루에 1행 전체를 사용하여 데이터를 표시함
• 이제는 그리드에 맞게 더 간결히 나타낼 것
• sleep_length 텍스트뷰를 삭제하고 quality_string 텍스트뷰를 ImageView 아래족에 표시되도록 이동

<ImageView
   android:id="@+id/quality_image"
   android:layout_width="@dimen/icon_size"
   android:layout_height="60dp"
   android:layout_marginTop="8dp"
   android:layout_marginBottom="8dp"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   tools:srcCompat="@drawable/ic_sleep_5"
   app:sleepImage="@{sleep}"/>

<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:layout_marginEnd="16dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   app:sleepQualityString="@{sleep}"
   tools:text="Excellent!"/>

• Data binding을 사용했기 때문에 뭘 변경하지 않아도 Adapter 코드는 작동하고 list도 grid로 표시됨

---

• ConstraintLayout이 full width를 차지함!
• GridLayoutManager는 span을 기반으로 fixed width를 view에 제공함
• GridLayoutManager는 grid를 배치하거나 공백 공간을 추가하거나 item을 clipping할 때 모든 ocnstraints를 충족하기 위해 최선을 다함

• span 수를 10으로 변경하거나 방향을 horizontal로 바꾸는 등의 시도를 통해 변화를 보면 이해하기 쉬움!

val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)