スクロール可能なリストを追加する

1. 始める前に

この Codelab では、Jetpack Compose を使用してアプリでスクロール可能なリストを作成する方法を学びます。

ここでは、アファメーションのリストを日常をポジティブにする美しい画像とともに表示する Affirmations アプリを取り扱います。

データはすでに用意されているので、そのデータを取得して UI に表示するだけです。

前提条件

  • Kotlin のリストに精通していること
  • Jetpack Compose でレイアウトを作成した経験
  • デバイスまたはエミュレータでアプリを実行した経験

学習内容

  • Jetpack Compose を使用してマテリアル デザイン カードを作成する方法
  • Jetpack Compose を使用してスクロール可能なリストを作成する方法

作成するアプリの概要

  • 既存のアプリケーションをベースとして、UI にスクロール可能なリストを追加する

最終的なプロダクトは次のようになります。

f6f09800b74f4700.png

必要なもの

  • インターネットにアクセスできるパソコン、ウェブブラウザ、Android Studio
  • GitHub へのアクセス

スターター コードをダウンロードする

Android Studio で basic-android-kotlin-compose-training-affirmations フォルダを開きます。

  1. プロジェクト用に提供されている GitHub リポジトリ ページに移動します。
  2. ブランチ名が Codelab で指定されたブランチ名と一致していることを確認します。たとえば、次のスクリーンショットでは、ブランチ名は main です。

1e4c0d2c081a8fd2.png

  1. プロジェクトの GitHub ページで、[Code] ボタンをクリックすると、ポップアップが表示されます。

1debcf330fd04c7b.png

  1. ポップアップで、[Download ZIP] をクリックして、プロジェクトをパソコンに保存します。ダウンロードが完了するまで待ちます。
  2. パソコンに保存したファイルを見つけます（[ダウンロード] フォルダなど）。
  3. ZIP ファイルをダブルクリックして展開します。プロジェクト ファイルが入った新しいフォルダが作成されます。

Android Studio でプロジェクトを開く

  1. Android Studio を起動します。
  2. [Welcome to Android Studio] ウィンドウで、[Open] をクリックします。

d8e9dbdeafe9038a.png

注: Android Studio がすでに開いている場合は、メニューから [File] > [Open] を選択します。

8d1fda7396afe8e5.png

  1. ファイル ブラウザで、展開したプロジェクト フォルダがある場所（[ダウンロード] フォルダなど）に移動します。
  2. そのプロジェクト フォルダをダブルクリックします。
  3. Android Studio でプロジェクトが開かれるまで待ちます。
  4. 実行ボタン 8de56cba7583251f.png をクリックして、アプリをビルドし、実行します。期待どおりにビルドされることを確認します。

2. リストアイテムのデータクラスを作成する

アファメーション用のデータクラスを作成する

Android アプリでは、リストはリストアイテムで構成されます。単一のデータを持つリストアイテムの場合、これは文字列や整数などの単純なアイテムになります。画像とテキストなど、複数のデータを持つリストアイテムの場合、それらすべてのプロパティを格納するクラスが必要になります。データクラスはプロパティのみを格納するクラスの一種で、このようなプロパティを扱うユーティリティ メソッドを提供します。

  1. com.example.affirmations の下に新しいパッケージを作成します。4a51cb670bbec405.png

新しいパッケージに model という名前を付けます。この model パッケージには、データクラスで表されるデータモデルが含まれます。このデータクラスは、「アファメーション」となるものに関連する情報を表すプロパティで構成されます。アファメーションは、文字列リソースと画像リソースを 1 つずつ含みます。パッケージとは、クラスと他のディレクトリを含むディレクトリのことです。

9ea1f8880ca90ea0.png

  1. com.example.affirmations.model パッケージ内に新しいクラスを作成します。a9515a8b47715a22.png

新しいクラスに Affirmation という名前を付け、これを Data Class にします。

b36be7f428fd1672.png

  1. 各 Affirmation は、1 つの画像と 1 つの文字列で構成されます。Affirmation データクラスに 2 つの val プロパティを作成します。一つは stringResourceId、もう一つは imageResourceId という名前にします。どちらも整数にする必要があります。

Affirmation.kt

data class Affirmation(
   val stringResourceId: Int,
   val imageResourceId: Int
)
  1. stringResourceId プロパティに @StringRes アノテーションをタグ付けし、imageResourceId に @DrawableRes をタグ付けします。stringResourceId は、文字列リソースに格納されているアファメーション テキストの ID を表します。imageResourceId は、ドローアブル リソースに格納されているアファメーション画像の ID を表します。

Affirmation.kt

data class Affirmation(
   @StringRes val stringResourceId: Int,
   @DrawableRes val imageResourceId: Int
)
  1. com.example.affirmations.data パッケージの Datasource.kt ファイルを開き、Datasource クラスのコンテンツをコメント解除します。

Datasource.kt

class Datasource() {
   fun loadAffirmations(): List<Affirmation> {
       return listOf<Affirmation>(
           Affirmation(R.string.affirmation1, R.drawable.image1),
           Affirmation(R.string.affirmation2, R.drawable.image2),
           Affirmation(R.string.affirmation3, R.drawable.image3),
           Affirmation(R.string.affirmation4, R.drawable.image4),
           Affirmation(R.string.affirmation5, R.drawable.image5),
           Affirmation(R.string.affirmation6, R.drawable.image6),
           Affirmation(R.string.affirmation7, R.drawable.image7),
           Affirmation(R.string.affirmation8, R.drawable.image8),
           Affirmation(R.string.affirmation9, R.drawable.image9),
           Affirmation(R.string.affirmation10, R.drawable.image10))
   }
}

3. アプリにリストを追加する

リストアイテム カードを作成する

このアプリはアファメーションのリストを表示することを想定しています。リストを表示するための UI を構成する最初のステップとして、リストアイテムを作成します。各アファメーション アイテムは 1 つの画像と 1 つの文字列で構成されます。これらの各アイテムのデータにはスターター コードが付属しています。このようなアイテムを表示するために、UI コンポーネントを作成します。

アイテムは、Image コンポーザブルと Text コンポーザブルを含む Card コンポーザブルで構成されます。Compose における Card は、コンテンツとアクションを単一のコンテナで表示するサーフェスです。アファメーション カードは次のようになります。

95111184aed54fa3.png

カードには、画像と、その下にテキストが表示されます。この縦型のレイアウトは、Card コンポーザブルでラップされた Column コンポーザブルを使用することで実現できます。自分で試してみるか、以下の手順に沿って作成してください。

  1. MainActivity.kt ファイルを開きます。

1e348baaf91552f4.png

  1. AffirmationApp() メソッドの下に AffirmationCard() という新しいメソッドを作成し、@Composable アノテーションを付けます。

MainActivity.kt

@Composable
fun AffirmationApp() {
   val context = LocalContext.current
   AffirmationsTheme {

   }
}

@Composable
fun AffirmationCard() {

}
  1. メソッド シグネチャを編集して、Affirmation オブジェクトをパラメータとして取得します。Affirmation オブジェクトは model パッケージのものです。

MainActivity.kt

@Composable
fun AffirmationCard(affirmation: Affirmation) {

}
  1. 署名に modifier パラメータを追加します。パラメータのデフォルト値 Modifier を設定します。

MainActivity.kt

@Composable
fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {

}
  1. AffirmationCard メソッド内で、Card コンポーザブルを呼び出します。modifier と elevation のパラメータを渡します。modifier パラメータとして、padding 属性を 8.dp に設定した Modifier オブジェクトを渡します。elevation の値を 4.dp にします。elevation プロパティについては、後で詳しく説明します。

MainActivity.kt

@Composable
fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {Card(modifier = modifier.padding(8.dp), elevation = 4.dp) {
  }
}
  1. Card コンポーザブル内に Column コンポーザブルを追加します。Column コンポーザブル内のアイテムは、UI 上で縦方向に配置されます。これで、関連するテキストの上に画像を配置できます。逆に、Row コンポーザブル内のアイテムは横方向に配置されます。

MainActivity.kt

@Composable
fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {
  Card(modifier = modifier.padding(8.dp), elevation = 4.dp) {
    Column {
    }
  }
}
  1. Image コンポーザブルを Column コンポーザブルのラムダ本文内に追加します。Image コンポーザブルには、表示するリソースと contentDescription が常に必要です。リソースは、painter パラメータに渡される painterResource である必要があります。painterResource メソッドは、ベクター型ドローアブルか、PNG などのラスター化されたアセット形式を読み込みます。また、contentDescription パラメータとして stringResource を渡します。

MainActivity.kt

@Composable
fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {
  Card(modifier = Modifier.padding(8.dp), elevation = 4.dp) {
    Column {
      Image(
        painter = painterResource(affirmation.imageResourceId),
        contentDescription = stringResource(affirmation.stringResourceId)
      )
    }
  }
}
  1. painter パラメータと contentDescription パラメータに加えて、modifier と contentScale を渡します。contentScale は、画像の拡大方法と表示方法を決定します。Modifier オブジェクトの fillMaxWidth 属性を設定して、高さを 194.dp にする必要があります。contentScale は、ContentScale.Crop である必要があります。

MainActivity.kt

@Composable
fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {
  Card(modifier = Modifier.padding(8.dp), elevation = 4.dp) {
    Column {
      Image(
        painter = painterResource(affirmation.imageResourceId),
        contentDescription = stringResource(affirmation.stringResourceId),
        modifier = Modifier
          .fillMaxWidth()
          .height(194.dp),
        contentScale = ContentScale.Crop
      )
    }
  }
}
  1. Column 内で、Image コンポーザブルの後に Text コンポーザブルを作成します。affirmation.stringResourceId の stringResource を text パラメータに渡し、padding 属性を 16.dp に設定した Modifier オブジェクトを渡します。また、MaterialTheme.typography.h6 を style パラメータに渡してテキストテーマを設定します。

MainActivity.kt

@Composable
fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {
  Card(modifier = Modifier.padding(8.dp), elevation = 4.dp) {
    Column {
      Image(
        painter = painterResource(affirmation.imageResourceId),
        contentDescription = stringResource(affirmation.stringResourceId),
        modifier = Modifier
          .fillMaxWidth()
          .height(194.dp),
        contentScale = ContentScale.Crop
      )
      Text(
        text = stringResource(affirmation.stringResourceId),
        modifier = Modifier.padding(16.dp),
        style = MaterialTheme.typography.h6
      )
    }
  }
}

AffirmationCard コンポーザブルのプレビュー

Affirmations アプリの UI の中核となるカードを作成することができました。カードが正しく表示されることを確認するために、アプリ全体を起動せずにプレビューできるコンポーザブルを作成します。

  1. AffirmationCardPreview() という名前のプライベート メソッドを作成します。メソッドに @Preview と @Composable のアノテーションを付けます。

MainActivity.kt

@Preview
@Composable
private fun AffirmationCardPreview() {
}
  1. メソッド内で AffirmationCard コンポーザブルを呼び出します。そのコンポーザブルに、コンストラクタに渡された R.string.affirmation1 文字列リソースと R.drawable.image1 ドローアブル リソースを使用する新しい Affirmation オブジェクトを渡します。

MainActivity.kt

@Preview
@Composable
private fun AffirmationCardPreview() {
  AffirmationCard(Affirmation(R.string.affirmation1, R.drawable.image1))
}
  1. [Split] タブを開くと、AffirmationCard のプレビューが表示されます。必要に応じて、[Design] ペインで [Build & Refresh] をクリックしてプレビューを表示します。84904da4a33413ce.png

リストを作成する

リストアイテムのコンポーネントがリストの唯一のビルディング ブロックです。リストアイテムを作成したら、それを利用してリスト コンポーネントそのものを作成できます。

  1. AffirmationList() というメソッドを作成し、@Composable アノテーションを付けて、Affirmation オブジェクトの List をメソッド シグネチャのパラメータとして宣言します。

MainActivity.kt

@Composable
private fun AffirmationList(affirmationList: List<Affirmation>) {
}
  1. デフォルト値を Modifier にして、メソッド シグネチャのパラメータとして modifier オブジェクトを宣言します。

MainActivity.kt

@Composable
private fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) {
}
  1. Jetpack Compose では、LazyColumn コンポーザブルを使用してスクロール可能なリストを作成できます。LazyColumn と Column の違いは、表示するアイテム数が少ない場合は Column を使用する必要がある点です（Compose は一度にすべてのアイテムを読み込むため）。Column には、事前に定義した（つまり一定の）数のコンポーザブルのみを格納できます。LazyColumn はオンデマンドでコンテンツを追加できるため、長いリスト、特にリストの長さが不明な場合に適しています。LazyColumn はデフォルトでスクロール機能を提供します。追加のコードは必要ありません。AffirmationList() メソッド内で LazyColumn コンポーザブルを宣言します。

MainActivity.kt

@Composable
private fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) {
  LazyColumn {
  }
}
  1. LazyColumn のラムダ本文で、items() メソッドを呼び出して affirmationList を渡します。items() メソッドは、アイテムを LazyColumn に追加するためのものです。このメソッドは、このコンポーザブルに固有のもので、他のコンポーザブルでは一般的ではありません。

MainActivity.kt

@Composable
private fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) {
  LazyColumn {
    items(affirmationList){
    }
  }
}
  1. items() メソッドの呼び出しにはラムダ関数が必要です。この関数で、affirmationList の 1 つのアファメーション アイテムを表す affirmation のパラメータを指定します。

MainActivity.kt

@Composable
private fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) {
  LazyColumn {
    items(affirmationList){ affirmation ->
    }
  }
}
  1. リスト内のアファメーションごとに AffirmationCard() コンポーザブルを呼び出し、affirmation を渡します。

MainActivity.kt

@Composable
private fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) {
  LazyColumn {
    items(affirmationList){ affirmation ->
      AffirmationCard(affirmation)
    }
  }
}

リストを表示する

  1. ラムダで、AffirmationList コンポーザブルを呼び出し、DataSource().loadAffirmations() を affirmationList パラメータに渡します。

MainActivity.kt

@Composable
fun AffirmationApp() {
   AffirmationsTheme {
       Scaffold(
           content = {
               AffirmationList(affirmationList = Datasource().loadAffirmations())
           }
       )
   }
}

デバイスまたはエミュレータで Affirmations アプリを実行すると、完成したプロダクトが表示されます。

f6f09800b74f4700.png

4. 解答コードを取得する

解答コードを確認する場合は、GitHub で表示します。

  1. プロジェクト用に提供されている GitHub リポジトリ ページに移動します。
  2. ブランチ名が Codelab で指定されたブランチ名と一致していることを確認します。たとえば、次のスクリーンショットでは、ブランチ名は main です。

1e4c0d2c081a8fd2.png

  1. プロジェクトの GitHub ページで、[Code] ボタンをクリックすると、ポップアップが表示されます。

1debcf330fd04c7b.png

  1. ポップアップで、[Download ZIP] をクリックして、プロジェクトをパソコンに保存します。ダウンロードが完了するまで待ちます。
  2. パソコンに保存したファイルを見つけます（[ダウンロード] フォルダなど）。
  3. ZIP ファイルをダブルクリックして展開します。プロジェクト ファイルが入った新しいフォルダが作成されます。

Android Studio でプロジェクトを開く

  1. Android Studio を起動します。
  2. [Welcome to Android Studio] ウィンドウで、[Open] をクリックします。

d8e9dbdeafe9038a.png

注: Android Studio がすでに開いている場合は、メニューから [File] > [Open] を選択します。

8d1fda7396afe8e5.png

  1. ファイル ブラウザで、展開したプロジェクト フォルダがある場所（[ダウンロード] フォルダなど）に移動します。
  2. そのプロジェクト フォルダをダブルクリックします。
  3. Android Studio でプロジェクトが開かれるまで待ちます。
  4. 実行ボタン 8de56cba7583251f.png をクリックして、アプリをビルドし、実行します。期待どおりにビルドされることを確認します。

5. おわりに

ここでは、Jetpack Compose でカード、リストアイテム、スクロール可能なリストを作成する方法を学習しました。これらはあくまでリスト作成の基本ツールであり、リストアイテムは、創造性を発揮して自由にカスタマイズできます。

まとめ

  • Card コンポーザブルを使用してリストアイテムを作成します。
  • Card コンポーザブル内の UI を変更します。
  • LazyColumn コンポーザブルを使用してスクロール可能なリストを作成します。
  • カスタムのリストアイテムを使用してリストを作成します。