2023/10/25

【Kotlin/Android Studio】RecyclerViewでグリッドレイアウトを実装する方法！

この記事からわかること

Android Studio/Kotlinでグリッドレイアウトの実装方法
RecyclerViewとGridLayoutManagerの使い方
CardViewでカード型のUIを構築する
個数の変更方法

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Flamingo
Kotlin：1.8.20

Kotlinでグリッドレイアウト

グリッドレイアウトとはデザインの1つで格子状に分割され、ブロックを並べたようにコンテンツを配置する手法のことです。画像やカード形式のUIを並べる際などに利用されることが多いです。

Androidアプリで縦型のリスト表示を実装できるRecyclerViewを使用してグリッドレイアウトを実装することができるので実際の使い方についてまとめていきます。

RecyclerViewでグリッドレイアウトを実装する

実装方法はRecyclerViewの通常の実装方法とほぼ変わらず適用させるレイアウトクラスをGridLayoutManagerに変更するだけです。

RecyclerView.ViewHolder・・・リスト1行1行のViewを保持するホルダー
RecyclerView.Adapter・・・Viewに対して操作/描画する(ViewとDataの橋渡し)
GridLayoutManager・・・グリッドレイアウト
Data Class・・・データ本体

なので実装の流れもRecyclerViewで縦型のレイアウト(LayoutManager)を実装する時と変わりません。

Data Classの準備
RecyclerViewレイアウトの追加
グリッドリストリストアイテムのレイアウトを構築する
Adapterの実装
ViewHolderと紐付け
ActivityからRecyclerViewにGridLayoutManagerとAdapterのセット

RecyclerViewで縦型のリストレイアウトを実装する詳細な手順などは以下の記事を参考にしてください。

Data Classの準備

まずは表示するデータクラスを用意します。

User.kt
data class User(
    val id: Int,
    val name: String,
    val age: Int,
    val hobby: String
){
    companion object {
        fun getDemoData(): List<User> {
            return listOf(
                User(1, "ame", 25, "ボルタリング"),
                User(2, "mahiro", 30, "お菓子作り"),
                User(3, "sho", 22, "ヒッチハイク"),
                User(4, "Joseph", 27, "カフェ巡り"),
                User(5, "ito", 42, "小説"),
                User(6, "riku", 67, "麻雀"),
                User(7, "yoru", 25, "ダイエット"),
                User(8, "risa", 31, "映画")
            )
        }
    }
}

RecyclerViewレイアウトの追加

続いてRecyclerViewレイアウトを実装します。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="グリッドレイアウト"
        android:textSize="34sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="80dp" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/main_list"
        android:layout_width="match_parent"
        android:layout_height="600dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />
</androidx.constraintlayout.widget.ConstraintLayout>

グリッドリストアイテムのレイアウトを構築する

グリッドレイアウトで表示させるのでカード型のビューを実装できるCardViewを使用してレイアウトを作成していきます。

fragment_list_item.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="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="6dp"
    app:cardElevation="6dp"
    app:contentPadding="8dp"
    app:cardUseCompatPadding="true">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        >

        <TextView
            android:id="@+id/user_name"
            android:textSize="20sp"
            android:textColor="@android:color/black"
            android:textAlignment="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:id="@+id/user_hobby"
            android:textSize="20sp"
            android:textColor="@android:color/black"
            android:textAlignment="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</androidx.cardview.widget.CardView>

Adapterの実装&ViewHolderと紐付け

Adapterを実装しViewHolderと紐付けしていきます。

MainAdapter.kt
class MainAdapter(userList: List<User>) :RecyclerView.Adapter<MainAdapter.MainViewHolder>() {

    private val _userList: MutableList<User> = userList.toMutableList()
    override fun getItemCount(): Int = _userList.size

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MainViewHolder {
        return MainViewHolder(
            // XMLレイアウトファイルからViewオブジェクトを作成
            LayoutInflater.from(parent.context).inflate(R.layout.fragment_list_item, parent, false)
        )
    }

    override fun onBindViewHolder(holder: MainViewHolder, position: Int) {
        val user = _userList[position]

        holder.name.text = user.name
        holder.hobby.text = user.hobby
    }

    class MainViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val name: TextView = itemView.findViewById(R.id.user_name)
        val hobby: TextView = itemView.findViewById(R.id.user_hobby)
    }
}

ActivityからRecyclerViewにGridLayoutManagerとAdapterのセット

最後にRecyclerViewのlayoutManagerにGridLayoutManagerクラスを渡せば完了です。引数で渡す値からグリッドレイアウトの個数や向きを設定することが可能です。

MainActivity.kt
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val recyclerView: RecyclerView = findViewById(R.id.main_list)
        recyclerView.layoutManager = GridLayoutManager(this, 3, RecyclerView.VERTICAL, false)
        recyclerView.addItemDecoration(
            DividerItemDecoration(this, DividerItemDecoration.VERTICAL)
        )
        recyclerView.adapter = MainAdapter(User.getDemoData())
    }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Android