MENU

【Jetpack Compose】LazyColumn composableの使い方

記事内に商品プロモーションが含まれる場合があります

LazyColumnは、垂直方向に要素を配置するためのUI部品です。

LazyColumnを使用すると、リストやスクロール可能なビューを作成することができます。

通常のColumnと異なり、LazyColumnはリストの要素が非常に大量であり、画面上に一度に表示できない場合に特に有用です。これは、アイテムが必要なときにのみ要素を作成し、画面の外にスクロールされるとアイテムを再利用するためです。

目次

LazyColumnの使い方

LazyColumn {
    items(yourList) { item ->
        // ここにリストアイテムのコンテンツを追加
    }
}

yourListのところに、あなたが表示したい要素のリストをセットします。

itemはリスト内の各要素に対応します。

簡単な例として、1〜100までの数字リストを表示してみましょう。

package com.naoyaono.jetbmicalculator

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp


@Composable
fun MyComposable() {
    var numbers:List<Int> = (1..100).toList()

    LazyColumn(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.Start
    ) {
       items(numbers){ number ->
           Box(
               modifier = Modifier.height(24.dp)
           ){
               Text(
                   text = number.toString(),
                   modifier = Modifier.padding(start = 8.dp)
               )
           }
       }

    }
}

@Preview(showBackground = true, widthDp = 200)
@Composable
fun MyComposablePreview() {
    MyComposable()
}

要素をタップしたときの処理を追加する

一覧の各要素をタップしたときの処理を追加したい場合は、clickableを使用します。

先ほどの例の場合は、Boxのmodifierに追加します。

Box(
    modifier = Modifier
        .height(24.dp)
        .clickable {
           // タップしたときの処理
        }
   ){
       Text(
           text = number.toString(),
           modifier = Modifier.padding(start = 8.dp)
       )
}

LazyColumnにヘッダーやフッターを追加する

LazyColumnには、フッターやヘッダーを追加するための特別なメソッドは提供されていませんが、LazyColumn内で通常のComposable要素を使用してこれらを作成できます。

以下、その例です。

LazyColumn {
    // ヘッダーのComposable要素
    item {
        Text(
            text = "ヘッダー", 
            modifier = Modifier.fillMaxWidth().padding(8.dp)
        )
    }
    
    // コンテンツ一覧
    items(items = yourList) { item ->
        // リストアイテムのコンテンツ
        Text(text = item)
    }

    // フッターのComposable要素
    item {
        Text(
            text = "Footer", 
            modifier = Modifier.fillMaxWidth().padding(8.dp)
        )
    }
}
Share
  • URLをコピーしました!

Comment

コメントする

目次