Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
ざっくり Jetpack Compose / Cookpad.apk #3
star_zero
July 23, 2019
Programming
2
680
ざっくり Jetpack Compose / Cookpad.apk #3
star_zero
July 23, 2019
Tweet
Share
More Decks by star_zero
See All by star_zero
star_zero
4
410
star_zero
3
350
star_zero
2
400
star_zero
0
120
star_zero
1
430
star_zero
0
240
star_zero
8
2k
star_zero
0
220
star_zero
3
5.6k
Other Decks in Programming
See All in Programming
masayaaoyama
4
560
akkeylab
0
370
yosuke_furukawa
PRO
14
4k
yaamaa
0
460
wasabeef
1
580
ken3ypa
0
160
taoshotaro
1
370
akatsukinewgrad
0
220
brunopulis
1
100
pyama86
2
270
kubode
0
230
ogidow
0
190
Featured
See All Featured
iamctodd
17
1.9k
samlambert
237
9.9k
michaelherold
225
8.5k
jonrohan
1021
380k
tenderlove
52
3.4k
keavy
106
14k
reverentgeek
168
7.2k
eitanlees
111
9.9k
paulrobertlloyd
71
3.6k
jnunemaker
PRO
40
4.6k
qrush
285
18k
3n
163
22k
Transcript
ざっくり Jetpack Compose Cookpad.apk #3 2019/07/23
About me •Kenji Abe •メディアプロダクト開発部 •cookpadLive, storeTV •Twitter: @STAR_ZERO
⚠注意⚠ まだAlphaにもなってないので、 今後変更されると思います。 2019/07/20のコードでやっています。
Jetpack Compose
Jetpack Compose •Google I/O 2019で発表 •UIを宣言的に書いてく •Kotlinを使う •React, Litho, Vue.js,
Flutterみたいな感じ
Jetpack Composeで アプリを作ってみた https://github.com/STAR-ZERO/GithubCompose
Hello World
Hello World override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent {
MaterialTheme { Text(text = "Hello World") } } }
レイアウト
レイアウト MaterialTheme { Container( padding = EdgeInsets(16.dp), alignment = Alignment.TopLeft,
width = 240.dp, height = 120.dp ) { Text(text = "Hello World") } }
レイアウト MaterialTheme { Column { Row { Text(text = "123")
Text(text = "456") } Row { Text(text = "abc") Text(text = "def") } } }
レイアウト MaterialTheme { Table { for (i in 0 until
20) { tableRow { for (j in 0 until 2) { Padding(16.dp) { Text(text = "Cell $i - $j") } } } } } }
ステート
ステート Column { val counter = +state { 0 }
Text(text = "count = ${counter.value}") Button( text = "Button", onClick = { counter.value++ } ) }
ステート Column { val flag = +state { false }
if (flag.value) { Text(text = "Jepack") } else { Text(text = "Compose") } Button( text = "Button", onClick = { flag.value = !flag.value } ) }
Commit Scope? (Lifecycle?)
Commit Scope Column { +onActive { } // 最初の1回 +onCommit
{ // 描画されるたび onDispose { } // 破棄されるとき } val flag = +state { false } if (flag.value) { Container { +onCommit { onDispose { } } } } else { // ... } }
まとめ
まとめ •直感的でよさそう ‣ でも、すべてJetpack Composeはツライかも? •ステートやライフサイクルは今までと異なるので注意 ‣ 設計どうしよう
まとめ •ただし、今やるべきではない ‣ Alphaにもなってないので当然 ‣ 正式リリースまではだいぶ時間かかりそうな印象
ありがとうございました