Jetpack Compose の学習初期につまずいたこと

2022/06/14 Engineer LT#1 Android｜Organized by U-NEXT

Transcript

1. Jetpack Compose の学習初期につまずいたこと 2022/06/14 Engineer LT#1 Android｜Organized by U-NEXT 竹嵜智之
2. 登壇者について U-NEXT Co., Ltd. Androidアプリ開発3年目 話すこと Jetpack Compose の学習初期につまずいたことを、簡単な具体例をもとに説明します。 Compose に馴染みのない方にも聞いていただける内容になっていると思います。 説明用サンプルのリポジトリ: https://github.com/Tomoyuki-TAKEZAKI/LT20220614 経験者向けのコメント: 一言で言えば MutableState と remember の使い方です。
3. 目次 Composable 関数によるUIの組み立て 具体例: 数あてゲーム 学んだこと
4. Composable 関数によるUIの組み立て Jetpack compose では、UI を Composable 関数で表現します。 Composable 関数を定義するには @Composable アノテーションを付与します。 @Composable fun Sample() { // ここでは Composable 関数のほかに、 // 通常の Kotlin の構文も利用できる。 }
5. Composable 関数: Text テキストを表示するには、 Text コン ポーザブルを使います。 @Composable fun SampleText() { Text(text = "Hello, World") } sample codes on Github
6. Composable 関数: Column いくつかのUI要素を縦に並べるには、 Column コンポーザブルを使います。 @Composable fun SampleColumn() { Column { Text("Engineer LT#1 Android") Text("Organized by U-NEXT") } } sample codes on Github
7. 具体例: 数あてゲーム Compose の学習においてハマったこと を説明するのに、ここでは数あてゲーム の実装を例としてお話します。 これは、1から100までの間にある、隠 された乱数を当てるゲームです。
8. 実装1 最初に、次のような実装を行いました。このコードの問題があります。どこでしょうか？ （以下のコードでは @Composable や関数の宣言、 Column を省略しています。） val hiddenNumber = (1..100).random() var guess = "" val message = ... // guess と hiddenNumber を比較してメッセージを生成する TextField( value = guess, onValueChange = { guess = it }, ) Text(text = message, fontSize = 20.sp) sample codes on Github
9. 入力した数値が表示されない 先ほどのコードでは、キーボードから入 力した文字列が TextField に表示さ れません。 Composable 関数に値の変更を検知を させるには、 MutableState を利用し ます。
10. https://developer.android.com/reference/kotlin/androidx/compose/runtime/MutableState
11. mutableStateOf を使って、空文字を初期値とする MutableState を用意します。 mutableStateOf の呼び出しを remember 内部で行うように要求されました。 remember については後で説明します。
12. 次のように修正すると、入力したテキストが TextField に表示されるようになります。 - var guess = "" + var guess by remember { mutableStateOf("") } 実装2 修正したこのコードは数あてゲームとして期待通りに動くでしょうか？ val hiddenNumber = (1..100).random() var guess by remember { mutableStateOf("") } val message = ... // 略 TextField( value = guess, onValueChange = { guess = it }, ) Text(text = message, fontSize = 20.sp) sample codes on Github
13. 数値の入力ごとに答えが変わる 先ほどのコードでは、文字列を入力する たびに hiddenNumber が変化してしま います。 これは guess の値が変更されるたびに 画面の再描画(recompose)が発生し、都 度 hiddenNumber として新しい値が評 価されるためです。 一度計算した値を保持し、 recomose で再計算しないようにするには、 remember を利用します。
14. https://developer.android.com/reference/kotlin/androidx/compose/runtime/package- summary#remember(kotlin.Function0)
15. 次のように修正すると、秘密の乱数の値を保つことができます。 - val hiddenNumber = (1..100).random() + val hiddenNumber = remember { (1..100).random() } 最終的なコードは次のとおりです。 val hiddenNumber = remember { (1..100).random() } var guess by remember { mutableStateOf("") } val message = ... // 略 TextField( value = guess, onValueChange = { guess = it }, ) Text(text = message, fontSize = 20.sp) sample codes on Github
16. 学んだこと 値の変更に応じて表示を更新する場合、値は MutableState として与える。 MutableState を composable のスコープで利用する場合は必ず remember を利用す る。これは、 MutableState のインスタンスそのものを recompose を超えて保持する 必要があるため。 一方、 remember は MutableState の保持以外にも、計算を recompose のたびに行 わない場合に使う。 コメント 学習の初期には remember と MutableState の使いどころがわからずなんとなく書い ていたため、値を変更してもUIが更新されなかったり、意図しないUIの更新が発生する などの問題のあるコードを書いてしまいました。 このLTで提供したサンプルが、皆様の参考になれば幸いです。