Jetpack Composeでリストとグリッドを使う

Overview

https://developer.android.com/jetpack/compose/lists?hl=ja
Jetpack Composeで、文字を縦に並べるリストとカラーボックスを横２列に並べるグリッドを使ってみた。
詳しくは公式を見てくださいと言いたいですが、結構ハマったので、サンプル作成して勉強しました。

summary

まずは、data classを別ファイルに作成して、そこにテキストであったり色の情報が入ったクラスを作り、ListとforEachを使用して、画面に表示するのをやってみます。
data classを作成するときは、右クリックを教えて、こんな風にKotlinファイルを作成します。

Jetpack ComposeでUIを作成する

リストとグリッド

リスト

別ファイルに、data classを作成する

package com.example.mylaoyout

/*
複数のテキストを表示するには、data classを作成して、
それをリストにして、それをforEachで表示する
*/
data class Message(
    val author: String,
    val body: String
)
// 同じページにmessagesというリストを作成。ここで、Messageクラスをインスタンス化している
val messages = listOf(
    Message("User1", "Hello"),
    Message("User2", "Hi there"),
    // 他のメッセージ
)

使用するページ、今回だと、MainActivity.ktに、@Composable関数を作成して、
UIを作成する

package com.example.mylaoyout

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.mylaoyout.ui.theme.MyLaoyoutTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyLaoyoutTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MessageList(messages = messages)
                }
            }
        }
    }
}

// 引数にmessagesを追加して、data classのリストを渡す
@Composable
fun MessageList(messages: List<Message>) {
    // Columnを使って、複数のテキストを表示する
    Column {
        messages.forEach { message ->
            Text(text = message.body)
        }
    }
}

グリッド

data class ColorBoxを作成する。

package com.example.mylaoyout

data class ColorBox(
    val color: Int,
    val name: String
)

val colorBox = listOf(
    ColorBox(0xFFD32F2F.toInt(), "Red"),
    ColorBox(0xFFC2185B.toInt(), "Pink"),
    ColorBox(0xFF7B1FA2.toInt(), "Purple"),
    ColorBox(0xFF512DA8.toInt(), "Deep Purple"),
    ColorBox(0xFF303F9F.toInt(), "Indigo"),
    ColorBox(0xFF1976D2.toInt(), "Blue"),
    ColorBox(0xFF0288D1.toInt(), "Light Blue"),
    ColorBox(0xFF0097A7.toInt(), "Cyan"),
    ColorBox(0xFF00796B.toInt(), "Teal"),
    ColorBox(0xFF388E3C.toInt(), "Green"),
    ColorBox(0xFF689F38.toInt(), "Light Green"),
    ColorBox(0xFFFBC02D.toInt(), "Yellow"),
    ColorBox(0xFFF57C00.toInt(), "Orange"),
    ColorBox(0xFFE64A19.toInt(), "Deep Orange"),
    ColorBox(0xFF5D4037.toInt(), "Brown"),
    ColorBox(0xFF616161.toInt(), "Grey"),
    ColorBox(0xFF455A64.toInt(), "Blue Grey"),
    ColorBox(0xFF000000.toInt(), "Black"),
    ColorBox(0xFFFFFFFF.toInt(), "White"),
)

次に別ファイルにUIを作成する。

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.example.mylaoyout.ColorBox

// ColorBoxGridは、ColorBoxのリストを受け取り、それらを表示するためのComposableです。
@Composable
fun ColorBoxGrid(colorBoxes: List<ColorBox>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 16.dp)
    ) {
        items(colorBoxes.chunked(3)) { rowOfColorBoxes ->
            RowOfColorBoxes(rowOfColorBoxes)
        }
    }
}
// RowOfColorBoxesは、ColorBoxのリストを受け取り、それらを表示するためのComposableです。
@Composable
fun RowOfColorBoxes(rowOfColorBoxes: List<ColorBox>) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        rowOfColorBoxes.forEach { colorBox ->
            ColorBoxItem(colorBox)
        }
    }
}
// ColorBoxItemは、ColorBoxを受け取り、それを表示するためのComposableです。
@Composable
fun ColorBoxItem(colorBox: ColorBox) {
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color(colorBox.color)),
        contentAlignment = Alignment.Center
    ) {
        Text(text = colorBox.name, color = Color.White)
    }
}

使用するページ、今回だと、MainActivity.ktでColorBoxGridをimportして使用する。

package com.example.mylaoyout

import ColorBoxGrid
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.mylaoyout.ui.theme.MyLaoyoutTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyLaoyoutTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ColorBoxGrid(colorBoxes = colorBox)
                }
            }
        }
    }
}

カラーボックスだとこんな感じのUIになりました。数値を変更していたときに、ホットリロードが効くのを発見しました。Jetpack Composeだとできるんですね。

thoughts

今回はサンプルコードを使用して、Jetpack ComposeでUIを作成するのをやってみました。まだまだ初学者ですので、ファイルのフォルダ分けやコンポーネント化をやって綺麗なコードを書いていきたいです😅