search

yumemi-inc / android-training-template

Apache License 2.0
13 stars 2 forks source link

Composeで天気を表示する #13

Open Seo-4d696b75 opened 1 year ago

Seo-4d696b75 commented 1 year ago

🌤️ 天気を取得してメイン画面に表示しましょう

[!NOTE]

Required（先に完了させましょう）

  • 12

Next（次に取り組みましょう）

  • 必須課題

    14

  • 任意課題

    15

課題内容

Reloadボタンをタップしたら画面を更新する実装を行います

利用するAPI

apiモジュールのYumemiWeatherを利用します

    fun fetchSimpleWeather() : String

天気を表す文字列 "sunny" or "cloudy" or "rainy" or "snow"を返します
（mainブランチの段階ではネットワーク上での通信はせずランダムな値を返します）

天気画像

こちらのSVGを利用してください

sunny ```svg ```
cloudy ```svg ```
rainy ```svg ```
snow ```svg ```

各天気アイコンの色は以下のとおり

動作イメージ

Composableの粒度

画面の構成を踏まえてComposable関数を分割します。個々のComposable関数を小さくすることで、「何を表示すればいいか」という注目の範囲や責任も小さくなり設計し易くなります。複数画面で同じようなUI要素を表示したい場合などは、Composable関数を再利用することもできます。

💡 例えば図のような分割方法が考えられます

composable-example

状態ホイスティング

ところでWeatherInfoが表示する天気アイコン・気温を直書きしたら再利用できません。状態を引数として外部から受け取り、動的に表示内容を変更できるようにします。またActionButtonsでボタンがクリックされたときの処理に関しても、ActionButtons内側に直書きしては再利用できません。そこでイベントのコールバック関数を外部から引数に渡すようにします。

stateDiagram-v2
  WeatherApp --> ChildComposable: state
  ChildComposable --> WeatherApp: event

このように状態は呼び出し元の親から子へ、逆にイベントは子から親の呼び出し元へ流れるような設計パターンを状態ホイスティングと呼びます。

利点

状態とコンポジション

宣言的UIであるComposeで画面を更新するには新しい引数でComposableを呼び出します（コンポジション）。状態を更新したときコンポジションを自動でトリガーさせるため、MutableStateで状態を保持しましょう。

[!TIP]

  • Composableが呼び出される度にMutableStateが初期化されるのを防ぐためにはrememberを利用します
  • 状態ホスティングにより唯一の情報源はActivityとなるため、状態の管理（MutableStateの定義＆APIの呼び出し）はActivity直下のComposableにのみ現れるはずです

参考資料