Jetpack Compose

【Android】Jetpack Compose 入門講座 第16回「画像のグリッド表示」

Sara

はじめに

今回は簡単にグリッド表示を作成できる LazyGrid コンポーネントを使ってみましょう。

>> ここまでの記事はこちら

LazyGridコンポーネント

関数の作成

まずはレイアウトを作成する関数とプレビュー用の関数を用意します。

AnimalListRow 関数の下に AnimalListGrid 関数を追加します(6〜9行目)。

1@Composable
2fun AnimalListRow(modifier: Modifier = Modifier) {
3    // 省略
4}
5
6@Composable
7fun AnimalListGrid(modifier: Modifier = Modifier) {
8    
9}

AnimalListRowPreview 関数の下に AnimalListGridPreview 関数を追加します(7〜11行目)。

1@Preview
2@Composable
3private fun AnimalListRowPreview() {
4    AnimalListRow()
5}
6
7@Preview
8@Composable
9private fun AnimalListGridPreview() {
10    AnimalListGrid()
11}

AnimalListGrid 関数

AnimalListGrid 関数にコードを追加します。

1@Composable
2fun AnimalListGrid(modifier: Modifier = Modifier) {
3    LazyVerticalGrid(
4        columns = GridCells.Fixed(2)
5    ) {
6        items(animalList) {
7            Image(
8                painter = painterResource(id = it.drawable),
9                contentDescription = null,
10                contentScale = ContentScale.Crop,
11                modifier = Modifier.size(200.dp)
12            )
13        }
14    }
15}

4行目で1列に表示するセル数を設定しています。

仕上げ

AnimalListRow の下に AnimalListGrid を表示して、このような画面を作ってみましょう。

MyApp 関数のコードを9〜12行目のように変更します。

1@Composable
2fun MyApp(modifier: Modifier = Modifier) {
3    MyApplicationTheme {
4        Surface(
5            // 省略
6        ) {
7            Column {
8                AnimalListRow()
9                AnimalListGrid()
10            }
11        }
12    }
13}

このような画面になりました。

AnimalListRow と AnimalListGrid の間に余白を入れましょう。

余白の追加は padding の他にも Spacer コンポーネントを使うことができます。

1@Composable
2fun MyApp(modifier: Modifier = Modifier) {
3    MyApplicationTheme {
4        Surface(
5            // 省略
6        ) {
7            Column {
8                Spacer(modifier = modifier.size(8.dp))
9                AnimalListRow()
10                Spacer(modifier = modifier.size(12.dp))
11                AnimalListGrid()
12            }
13        }
14    }
15}

動作確認

最後にアプリを実行してみましょう。

画像をたくさん表示したい場合は animalList のデータを増やしておきます。 

1private data class Animal(val drawable: Int, val text: String)
2private val animalList = listOf(
3    Animal(R.drawable.dog, "Dog"),
4    Animal(R.drawable.cat, "Cat"),
5    Animal(R.drawable.rabbit, "Rabbit"),
6    Animal(R.drawable.lion, "Lion"),
7    Animal(R.drawable.panda, "Panda"),
8    Animal(R.drawable.dog, "Dog"),
9    Animal(R.drawable.cat, "Cat"),
10    Animal(R.drawable.rabbit, "Rabbit"),
11    Animal(R.drawable.lion, "Lion"),
12    Animal(R.drawable.panda, "Panda")
13)

アプリを実行してみましょう。

次に行うこと

次回からはボタンを使ったアプリを作っていきましょう。

第17回「ボタンの使い方」に進む

ここまでのコード

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp(modifier: Modifier = Modifier) {
    MyApplicationTheme {
        Surface(
            modifier = modifier
                .fillMaxSize()
                .statusBarsPadding()
        ) {
            Column {
                Spacer(modifier = modifier.size(8.dp))
                AnimalListRow()
                Spacer(modifier = modifier.size(12.dp))
                AnimalListGrid()
            }
        }
    }
}

@Composable
fun AnimalListElement(
    @DrawableRes drawable: Int,
    text: String,
    modifier: Modifier = Modifier
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier.padding(8.dp)
    ) {
        Image(
            painter = painterResource(id = drawable),
            contentDescription = text,
            contentScale = ContentScale.Crop,
            modifier = modifier
                .size(80.dp)
                .clip(CircleShape)
        )
        Text(
            text = text,
            modifier = modifier.padding(top = 4.dp)
        )
    }
}

private data class Animal(val drawable: Int, val text: String)
private val animalList = listOf(
    Animal(R.drawable.dog, "Dog"),
    Animal(R.drawable.cat, "Cat"),
    Animal(R.drawable.rabbit, "Rabbit"),
    Animal(R.drawable.lion, "Lion"),
    Animal(R.drawable.panda, "Panda"),
    Animal(R.drawable.dog, "Dog"),
    Animal(R.drawable.cat, "Cat"),
    Animal(R.drawable.rabbit, "Rabbit"),
    Animal(R.drawable.lion, "Lion"),
    Animal(R.drawable.panda, "Panda")
)

@Composable
fun AnimalListRow(modifier: Modifier = Modifier) {
    LazyRow {
        items(animalList) {
            AnimalListElement(drawable = it.drawable, text = it.text)
        }
    }
}

@Composable
fun AnimalListGrid(modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(3)
    ) {
        items(animalList) {
            Image(
                painter = painterResource(id = it.drawable),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.size(200.dp)
            )
        }
    }
}

@Preview
@Composable
private fun AnimalListElementPreview() {
    AnimalListElement(drawable = R.drawable.dog, text = "Dog")
}

@Preview
@Composable
private fun AnimalListRowPreview() {
    AnimalListRow()
}

@Preview
@Composable
private fun AnimalListGridPreview() {
    AnimalListGrid()
}

@Preview
@Composable
private fun MyAppPreview() {
    MyApp()
}

講座の最新情報はこちら

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました