[Android] RecyclerView로 GridLayout 구현하기

RecyclerView

RecyclerView에는 LinearLayoutManager와 GridLayoutManager가 있다.

그 중에 GridLayoutManager로 만들어 볼려고 한다.

activity_main.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">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="20dp">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="GridLayout"
            android:textStyle="bold"
            android:textSize="30sp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@id/rv_list"/>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginVertical="20dp"
            app:layoutManager="GridLayoutManager"
            app:spanCount="2"
            app:layout_constraintTop_toBottomOf="@id/tv_title"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">
        </androidx.recyclerview.widget.RecyclerView>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

rv_list로 RecyclerView를 만들어 주고
한 행에 2개씩 보이도록 spanCount를 2로 주었다.

하나씩 나타낼 item의 xml도 하나 만들어 준다.
cardview로 이미지를 띄워보고자 한다.

item_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="150dp"
    android:layout_height="150dp"
    app:cardCornerRadius="20dp">

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

        <ImageView
            android:id="@+id/iv_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/img1"
            android:scaleType="fitXY"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

GridLayout을 구현할려면 Adapter, ViewHolder가 필요하다.
ViewHolder는 목록에 있는 각각의 개별 항목의 레이아웃을 포함하고
adapter는 필요에 따라 ViewHolder객체를 만들고 데이터를 바인딩(뷰를 데이터에 연결하는 프로세스)한다.

GridItem

class GridItem {
	var img: Int
}

ViewHolder

class GridItemViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

    var iv_item: ImageView

    init {
        iv_item = itemView.findViewById(R.id.iv_item)
    }

    fun onBind(data: GridItem) {
        iv_item.setImageResource(data.img)
    }
}

Adapter

class GridItemAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    private val listData: ArrayList<GridItem> = ArrayList()
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        val view: View =
            LayoutInflater.from(parent.context).inflate(R.layout.item_grid, parent, false)
        return GridItemViewHolder(view)
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        (holder as GridItemViewHolder).onBind(listData[position])
    }

    override fun getItemCount(): Int = listData.size

    fun addItem(data: GridItem) {
        listData.add(data)
    }
}

MainActivity

var adapter: GridItemAdapter? = null

override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    
    val recyclerView = findViewById<RecyclerView>(R.id.rv_list)
    
    adapter = GridItemAdapter()
    recyclerView?.adapter = adapter
    
    //임의로 데이터를 넣어줌
    getItem()
}

private fun getItem() {
    var data = GridItem(R.drawable.img1)
    gridadapter?.addItem(data)
    data = GridItem(R.drawable.img2)
    gridadapter?.addItem(data)
    data = GridItem(R.drawable.img3)
    gridadapter?.addItem(data)
    data = GridItem(R.drawable.img4)
    gridadapter?.addItem(data)
    data = GridItem(R.drawable.img1)
    gridadapter?.addItem(data)
    data = GridItem(R.drawable.img2)
    gridadapter?.addItem(data)
    data = GridItem(R.drawable.img3)
    gridadapter?.addItem(data)
    data = GridItem(R.drawable.img4)
    gridadapter?.addItem(data)
}

결과 화면

소스코드

Github