Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jetpack Compose の学習初期につまずいたこと
Search
Tomoyuki TAKEZAKI
June 14, 2022
0
320
Jetpack Compose の学習初期につまずいたこと
2022/06/14 Engineer LT#1 Android|Organized by U-NEXT
Tomoyuki TAKEZAKI
June 14, 2022
Tweet
Share
More Decks by Tomoyuki TAKEZAKI
See All by Tomoyuki TAKEZAKI
関数型プログラミングへの第一歩: 純粋関数を知る
74k3z4k1
0
220
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
8.9k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Navigating Team Friction
lara
183
13k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Docker and Python
trallard
39
3k
Designing with Data
zakiwarfel
98
5k
Side Projects
sachag
451
42k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
Debugging Ruby Performance
tmm1
72
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Transcript
Jetpack Compose の学習初期につまずいたこと 2022/06/14 Engineer LT#1 Android|Organized by U-NEXT 竹嵜智之
登壇者について U-NEXT Co., Ltd. Androidアプリ開発3年目 話すこと Jetpack Compose の学習初期につまずいたことを、簡単な具体例をもとに説明します。 Compose
に馴染みのない方にも聞いていただける内容になっていると思います。 説明用サンプルのリポジトリ: https://github.com/Tomoyuki-TAKEZAKI/LT20220614 経験者向けのコメント: 一言で言えば MutableState と remember の使い方です。
目次 Composable 関数によるUIの組み立て 具体例: 数あてゲーム 学んだこと
Composable 関数によるUIの組み立て Jetpack compose では、UI を Composable 関数で表現します。 Composable 関数を定義するには
@Composable アノテーションを付与します。 @Composable fun Sample() { // ここでは Composable 関数のほかに、 // 通常の Kotlin の構文も利用できる。 }
Composable 関数: Text テキストを表示するには、 Text コン ポーザブルを使います。 @Composable fun SampleText()
{ Text(text = "Hello, World") } sample codes on Github
Composable 関数: Column いくつかのUI要素を縦に並べるには、 Column コンポーザブルを使います。 @Composable fun SampleColumn() {
Column { Text("Engineer LT#1 Android") Text("Organized by U-NEXT") } } sample codes on Github
具体例: 数あてゲーム Compose の学習においてハマったこと を説明するのに、ここでは数あてゲーム の実装を例としてお話します。 これは、1から100までの間にある、隠 された乱数を当てるゲームです。
実装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
入力した数値が表示されない 先ほどのコードでは、キーボードから入 力した文字列が TextField に表示さ れません。 Composable 関数に値の変更を検知を させるには、 MutableState
を利用し ます。
https://developer.android.com/reference/kotlin/androidx/compose/runtime/MutableState
mutableStateOf を使って、空文字を初期値とする MutableState を用意します。 mutableStateOf の呼び出しを remember 内部で行うように要求されました。 remember については後で説明します。
次のように修正すると、入力したテキストが 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
数値の入力ごとに答えが変わる 先ほどのコードでは、文字列を入力する たびに hiddenNumber が変化してしま います。 これは guess の値が変更されるたびに 画面の再描画(recompose)が発生し、都
度 hiddenNumber として新しい値が評 価されるためです。 一度計算した値を保持し、 recomose で再計算しないようにするには、 remember を利用します。
https://developer.android.com/reference/kotlin/androidx/compose/runtime/package- summary#remember(kotlin.Function0)
次のように修正すると、秘密の乱数の値を保つことができます。 - 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
学んだこと 値の変更に応じて表示を更新する場合、値は MutableState として与える。 MutableState を composable のスコープで利用する場合は必ず remember を利用す
る。これは、 MutableState のインスタンスそのものを recompose を超えて保持する 必要があるため。 一方、 remember は MutableState の保持以外にも、計算を recompose のたびに行 わない場合に使う。 コメント 学習の初期には remember と MutableState の使いどころがわからずなんとなく書い ていたため、値を変更してもUIが更新されなかったり、意図しないUIの更新が発生する などの問題のあるコードを書いてしまいました。 このLTで提供したサンプルが、皆様の参考になれば幸いです。