Jetpack Compose

【Android】Jetpack Compose 入門講座 第15回「リストのスクロール ②LazyRow」

Sara

はじめに

前回は Row コンポーネント内のデータをスクロールできるようにしましたが、表示するデータが多い場合に同じ書き方をすると動作が遅くなる原因になります。

これを解消するために LazyRow コンポーネントを使ったコードに書き換えてみましょう。

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

LazyRowコンポーネント

なぜ LazyRow を使う?

Row コンポーネントを使うと画面に表示されていない画像もあらかじめ用意されている状態です。ですのでデータ数が多くなるとアプリの動作に影響がでる可能性があります。

これを解決できるのが LazyRow コンポーネントです。

LazyRow コンポーネントは必要な分だけ、つまりアプリ画面に表示される画像だけをその都度用意してくれます。

たくさんデータがあってもメモリに負担をかけずにデータを表示することができます。

他にも縦並びにする LazyColumn、グリッド表示する LazyVerticalGrid / LazyHorizontalGrid コンポーネントもあります。

LazyRow に書き換える

基本的な使い方は LazyRow で囲んで、アイテムごとに item 関数を追加していきます。

LazyRow {
        item {
            Text("Dog")
        }
        item {
            Text("Cat")
        }
        ...
}

しかし LazyRow や LazyColumn はデータが多くなるときに役立つものなので、1つずつアイテムを追加していくのは効率的ではありません。

ここでは画像とテキストの List を用意してアイテムを追加していきます。

AnimalListRow 関数の上に List を追加します(1〜8行目)。

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)
9
10@Composable
11fun AnimalListRow(modifier: Modifier = Modifier) {

AnimalListRow 関数のコードを変更します。

1@Composable
2fun AnimalListRow(modifier: Modifier = Modifier) {
3    LazyRow {
4        items(animalList) {
5            AnimalListElement(drawable = it.drawable, text = it.text)
6        }
7    }
8}

items 関数で animalList から1つずつデータを取り出してセットしています。

LazyRow コンポーネントは自動的にスクロールを設定してくれるのでコードを追加する必要はありません。

動作確認

プレビューの Interactive Mode を使って動作を確認してみてください。

次に行うこと

次回は画像をグリッド表示するレイアウトを作ってみましょう。

第16回「画像のグリッド表示」に進む

ここまでのコード

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.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.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()
        ) {
            AnimalListRow()
        }
    }
}

@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"),
)

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

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

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

@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をコピーしました