演習: スポーツアプリを作成する

1. 始める前に

お疲れさまでした。このパスウェイでは、WindowWidthSize クラスと正規レイアウトを使用してアプリを適応させる方法を学習しました。次は、学んだことを実践してみましょう。

この演習セットでは、パスウェイで学習したコンセプトを活用してスポーツアプリを作成します。このスターター アプリは、モバイル レイアウトで適切に動作します。ここでのタスクは、アプリを大画面に適応させることです。

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

前提条件

必要なもの

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

作成するアプリの概要

大画面に適応するスポーツアプリ。完成したアプリは次のようになります。

1ce365f97570965e.png

2. 始める

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

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

3. スポーツアプリを大画面にどのように適応させるかを決める

スポーツアプリを大画面に適応させるには、まず、大画面でのアプリの表示に最適なレイアウトのタイプを確立する必要があります。

  1. コンパクト画面サイズで現在使用できるレイアウトの確認を始めましょう。画面は 2 つあります。SportsList コンポーザブルに対応するリスト画面と、SportsDetail コンポーザブルに対応する詳細画面です。

  1. 正規レイアウトを確認して、スポーツアプリのユースケースに最適なレイアウトを決定します。
  2. 考えられる展開画面のレイアウトをスケッチします。シンプルなビジュアル デザイン ソフトウェアまたは紙を使用し、展開後のレイアウトで画面がどのように組み合わされるかを視覚化します。

bb59e5ec7da56f7a.png

4. 展開画面をコードで作成する

展開後のレイアウトの表示方法が明確になったので、次はこれをコードに変換しましょう。

  1. リスト画面と詳細画面の両方を表示する展開画面用のコンポーザブルを作成します。SportsListAndDetails という名前を付けて、SportsScreens.kt ファイルに追加します。
  2. SportsListAndDetails コンポーザブルの UI の確認を簡素化するために、コンポーザブルのプレビューを作成します。

678504d0ec535896.png

  1. [戻る] ボタンの動作が展開画面に適したものであることを確認します。ユーザーが [戻る] ボタンを押すと、メイン画面が表示されアプリが終了するようにします。この動作を変更するには、適切なラムダを SportsDetails コンポーザブルに渡します。ヒント: (LocalContext.current as Activity) からアプリの Activity にアクセスできます。

5. ウィンドウ サイズに応じてアプリを別のレイアウトに変更する

展開画面のコンポーザブルをアプリに追加するには、次のタスクを行います。

  1. アプリの build.gradle.kts に androidx.compose.material3:material3-window-size-class を追加します。
  2. MainActivity で windowSizeClass を計算し、widthSizeClass を SportsApp コンポーザブルに渡します。
  3. utils という名前の新しいディレクトリを作成し、WindowStateUtils.kt という名前の新しいファイルを作成します。
  4. WindowStateUtils に enum クラスを追加して、2 つの異なる contentType を示します。それらに ListOnly タイプ、ListAndDetail タイプという名前を付けます。
  5. SportsApp コンポーザブルで、widthSizeClass に基づいて contentType を決定します。
  6. contentType が ListAndDetail の場合は SportsListAndDetails コンポーザブルを表示し、contentType が ListOnly の場合は以前の動作を維持します。
  7. SportsAppBar コンポーザブルでは、リストページで画面が展開されたときに [戻る] ボタンが表示されず、アプリバーに Sports が表示されるように動作を変更します。
  8. サイズ変更可能なエミュレータを使用して、コンパクト画面と展開画面の両方で UI とナビゲーション機能を確認します。

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

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

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

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

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