[Kotlin/Android] RecyclerView (4) Change RecyclerView's Layout , GridLayoutManager

GridLayoutManager 개요

리사이클러뷰의 레이아웃은 가장 기본적인 Linear 레이아웃 뿐 만 아니라, Grid Layout 또한 존재한다.

 

LinearLayout과 GridLayout

 그리드 레이아웃은 위 오른쪽 그림과 같이 격자형으로 Item을 배치하는 레이아웃이다. Item에는 보통 아이콘이나 이미지를 사용하기에 적합하고 이용자가 한 눈에 많은 리스트 목록을 확인할 수 있는 것이 장점이다.

one_list_item.xml 을 그리드 레이아웃에 적합하게 바꾸기

 GirdLayout을 사용하기 위한 layout.xml파일을 만들어보자. 

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="sleep"
            type="com.example.android.trackmysleepquality.database.SleepNight" />


    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <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!"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

 다음과 같이 list 한 목록을 대표할 수 있는 이미지와 짤막한 글과 함께 layout을 배치하는 것이 그리드 레이아웃에 적합하다.

 이전까지는 LinearLayout을 사용할 때 RecycerView가 담긴 레이아웃에서 
"app:layoutManager" attribute를 통해 LinearLayout을 설정해주었다.

      <androidx.recyclerview.widget.RecyclerView
      	android:id="@+id/sleep_list"
        ...
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        />

  그러나 코드에서도 LayoutManager를 만들어 data binding을 이용해 리사이클러뷰에 적용할 수 있다. 위의 코드를 지운 뒤 리사이클러뷰가 작동하는 Fragment에서 직접 매니저를 설정해보자.

 

 

코틀린 코드에서 리사이클러뷰에 LayoutManager 설정하기

 

RecycelerView가 위치한 프래그먼트 코드

 

GridLayoutManager는 4개의 매개변수를 받는다.

1. activity
2. span의 단위
   
   span "간격, 한 뼘" 은 그리드의 column(한 줄의 간격)에 해당하는 단위를 정한다. 따라서 item이 해당 개수를 넘어가면 다음 줄로 item이 넘어간다.
   
   span 값을 너무나 많이 지정하면 다음 줄로 넘어가지 못하고 view들이 겹치는 경우가 발생할 수도 있다.
   
   
3. 넘기는 방향
4. 뭐였지.

	val manager = GridLayoutManager(activity, 3, GridLayoutManager.VERTICAL, false)
	binding.sleepList.layoutManager = manager
	return binding.root

 

binding.sleepList.layoutManager에 manager로 초기화.

결과