演習: スーパーヒーローのアプリを作成する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

1. 始める前に

これまでこのパスウェイでは、マテリアル デザインの基本と、アプリにシンプルなアニメーションを追加する方法を学習しました。次に、学習した内容を実践してみましょう。

この演習セットでは、パスウェイで学習したコンセプトを活用してスーパーヒーローのアプリを作成します。このアプリでは、Jetpack Compose でのマテリアル テーマ設定 Codelab で学習したマテリアル デザインの原則に基づいて、スクロール可能なリストに必要なコンポーネントと洗練された UI を作成します。

解答コードは最後に掲載されていますが、演習に取り組んでから解答を確認するようにしてください。解答はアプリを実装する方法の一つと捉えましょう。改善の余地はたくさんあるので、いろいろなことを自由に試してください。

自分のやりやすいペースで問題に取り組みましょう。時間が記載されていますが、あくまでも目安であり、厳密に守る必要はありません。必要なだけ時間をかけ、じっくりと問題に取り組んでください。

前提条件

必要なもの

  • Android Studio がインストールされた、インターネットに接続できるパソコン

作成するアプリの概要

スーパーヒーローのリストを表示するスーパーヒーロー アプリを作成します。

完成したアプリの外観は、ライトモードとダークモードで次のようになります。

2. 始める

このタスクではプロジェクトを設定して、スーパーヒーローのダミーデータを作成します。

  1. Empty Compose Activity テンプレートと、最小バージョン 21 の SDK を使用して、新しいプロジェクトを作成します。
  2. アプリのアセット(スーパーヒーローの画像、アプリのロゴ)をこちらからダウンロードします。
  3. https://fonts.google.com から、Cabin の太字フォントと Cabin の標準フォント ファイルをダウンロードします。さまざまなフォント ファイルを自由に試してください。
  4. 各スーパーヒーローのデータを保持するデータクラスを作成します。Hero データクラス用に model という新しいパッケージを作成して、コードを整理することもできます。リストアイテムは次のようになります。

5522f986d46e24d0.png

各スーパーヒーローのリストアイテムには、3 つの固有の情報、名前の説明、画像が表示されます。

  1. 同じ model パッケージで、表示するすべてのヒーロー情報用に別のファイルを作成します(名前、説明、画像リソースなど)。参考に、データセットのサンプルを示します。
object HeroesRepository {
   val heroes = listOf(
       Hero(
           nameRes = R.string.hero1,
           descriptionRes = R.string.description1,
           imageRes = R.drawable.android_superhero1
       ),
       Hero(
           nameRes = R.string.hero2,
           descriptionRes = R.string.description2,
           imageRes = R.drawable.android_superhero2
       ),
       Hero(
           nameRes = R.string.hero3,
           descriptionRes = R.string.description3,
           imageRes = R.drawable.android_superhero3
       ),
       Hero(
           nameRes = R.string.hero4,
           descriptionRes = R.string.description4,
           imageRes = R.drawable.android_superhero4
       ),
       Hero(
           nameRes = R.string.hero5,
           descriptionRes = R.string.description5,
           imageRes = R.drawable.android_superhero5
       ),
       Hero(
           nameRes = R.string.hero6,
           descriptionRes = R.string.description6,
           imageRes = R.drawable.android_superhero6
       )
   )
}

3. マテリアル テーマ設定

このセクションでは、アプリのカラーパレット、タイポグラフィ、シェイプを追加して、アプリのデザインを向上させます。

次に、推奨するカラーパターンの値を示します。別のカラーパターンを選択することもできます。

ui.theme.Color.kt

//Light Theme
val md_theme_light_background = Color(0xFFFDFCF4)
val md_theme_light_surface = Color(0xFFE0EACE)
val md_theme_light_secondary = Color(0xFF596148)
val md_theme_light_onSurface = Color(0xFF1B1C18)
val md_theme_light_primary = Color(0xFF466800)
val md_theme_light_onPrimary = Color(0xFF223600)

// Dark Theme
val md_theme_dark_background = Color(0xFF1B1C18)
val md_theme_dark_surface = Color(0xFF373F29)
val md_theme_dark_secondary = Color(0xFFDDE6C6)
val md_theme_dark_onSurface = Color(0xFFE4E3DB)
val md_theme_dark_primary = Color(0xFFC1CAAB)
val md_theme_dark_onPrimary = Color(0xFFDDE6C6)

シェイプ

ui.theme.Shape.kt

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Shapes
import androidx.compose.ui.unit.dp

val Shapes = Shapes(
   small = RoundedCornerShape(8.dp),
   medium = RoundedCornerShape(16.dp),
   large = RoundedCornerShape(16.dp)
)

タイポグラフィ

ui.theme.Type.kt

import androidx.compose.material.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.example.superheroes.R

val Cabin = FontFamily(
   Font(R.font.cabin_regular, FontWeight.Normal),
   Font(R.font.cabin_bold, FontWeight.Bold)
)

// Set of Material typography styles to start with
val Typography = Typography(
   defaultFontFamily = Cabin,
   h1 = TextStyle(
       fontWeight = FontWeight.Normal,
       fontSize = 30.sp
   ),
   h2 = TextStyle(
       fontWeight = FontWeight.Bold,
       fontSize = 20.sp
   ),
   h3 = TextStyle(
       fontWeight = FontWeight.Bold,
       fontSize = 20.sp
   ),

   body1 = TextStyle(
       fontWeight = FontWeight.Normal,
       fontSize = 16.sp
   )
)

テーマ

ui.theme.Theme.kt

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable

private val DarkColorPalette = darkColors(
   background = md_theme_dark_background,
   surface = md_theme_dark_surface,
   onSurface = md_theme_dark_onSurface,
   primary = md_theme_dark_primary,
   onPrimary = md_theme_dark_onPrimary,
   secondary = md_theme_dark_secondary
)

private val LightColorPalette = lightColors(
   background = md_theme_light_background,
   surface = md_theme_light_surface,
   onSurface = md_theme_light_onSurface,
   primary = md_theme_light_primary,
   onPrimary = md_theme_light_onPrimary,
   secondary = md_theme_light_secondary
)

@Composable
fun SuperheroesTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
   val colors = if (darkTheme) {
       DarkColorPalette
   } else {
       LightColorPalette
   }

   MaterialTheme(
       colors = colors,
       typography = Typography,
       shapes = Shapes,
       content = content
   )
}

4. リストを表示

リストを作成するには、まずリストアイテムを作成します。

  1. com.example.superheroes パッケージの下に HeroesDataSource.kt というファイルを作成します。
  2. スーパーヒーローのリストアイテムを表すコンポーザブルを作成します。次のスクリーンショットと UI 仕様のようになります。5522f986d46e24d0.png

この UI 仕様に従うか、独自のリストアイテムを作成します。

  • リストアイテムの高さ: 74 dp
  • リストアイテムのパディング: 16 dp
  • カードの高度: 2 dp
  • 画像とテキストの間のスペース: 16 dp
  • 画像のクリップ半径: 8 dp
  • リストアイテムのクリップ半径: 16 dp
  • スーパーヒーローの名前の書体: H3
  • スーパーヒーローの説明の書体: Body1

dc6fbb4070f1876.png

d78e2d324242b224.png

遅延列を作成する

  1. ヒーローのリストを取得して表示する、別のコンポーザブルを作成します。ここで lazyColumn を使用します。
  2. パディングには次の UI 仕様を使用します。

591dfc1744afbf98.png

実装が完了すると、アプリは次のスクリーンショットのようになります。

9bf806c163ed3489.png

5. トップ アプリバーを追加する

トップ アプリバーを追加します。シンプルなテキストにすることもできます。

  1. MainActivity.kt で、トップ アプリバーを表示するコンポーザブルを追加します。トップ アプリバーにテキストを追加します。アプリ名にすることができます。水平方向と垂直方向ともに中央に揃えます。
  2. アプリバーの高さを 56 dp に、書体を h1 に設定することも、独自にトップ アプリバーを設計することもできます。

d6f672e360efe331.png

  1. scaffold を使用してトップ アプリバーを表示します。必要に応じてこちらのドキュメントをご覧ください。

ステータスバーの色をカスタマイズする

アプリをさらに洗練されたものにするために、背景色に合わせてステータスバーの色をカスタマイズできます。

6. 解答コード

この Codelab の完成したコードをダウンロードするには、次の git コマンドを使用します。

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-superheroes-app.git

または、リポジトリを ZIP ファイルとしてダウンロードし、Android Studio で開くこともできます。

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