ざっくり Jetpack Compose / Cookpad.apk #3

Transcript

1. ざっくり Jetpack Compose Cookpad.apk #3 2019/07/23
2. About me •Kenji Abe •メディアプロダクト開発部 •cookpadLive, storeTV •Twitter: @STAR_ZERO
3. ⚠注意⚠ まだAlphaにもなってないので、 今後変更されると思います。 2019/07/20のコードでやっています。
4. Jetpack Compose
5. Jetpack Compose •Google I/O 2019で発表 •UIを宣言的に書いてく •Kotlinを使う •React, Litho, Vue.js, Flutterみたいな感じ
6. Jetpack Composeで アプリを作ってみた https://github.com/STAR-ZERO/GithubCompose
7. Hello World
8. Hello World override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MaterialTheme { Text(text = "Hello World") } } }
9. レイアウト
10. レイアウト MaterialTheme { Container( padding = EdgeInsets(16.dp), alignment = Alignment.TopLeft, width = 240.dp, height = 120.dp ) { Text(text = "Hello World") } }
11. レイアウト MaterialTheme { Column { Row { Text(text = "123") Text(text = "456") } Row { Text(text = "abc") Text(text = "def") } } }
12. レイアウト MaterialTheme { Table { for (i in 0 until 20) { tableRow { for (j in 0 until 2) { Padding(16.dp) { Text(text = "Cell $i - $j") } } } } } }
13. ステート
14. ステート Column { val counter = +state { 0 } Text(text = "count = ${counter.value}") Button( text = "Button", onClick = { counter.value++ } ) }
15. ステート Column { val flag = +state { false } if (flag.value) { Text(text = "Jepack") } else { Text(text = "Compose") } Button( text = "Button", onClick = { flag.value = !flag.value } ) }
16. Commit Scope? (Lifecycle?)
17. Commit Scope Column { +onActive { } // 最初の1回 +onCommit { // 描画されるたび onDispose { } // 破棄されるとき } val flag = +state { false } if (flag.value) { Container { +onCommit { onDispose { } } } } else { // ... } }
18. まとめ
19. まとめ •直感的でよさそう ‣ でも、すべてJetpack Composeはツライかも？ •ステートやライフサイクルは今までと異なるので注意 ‣ 設計どうしよう
20. まとめ •ただし、今やるべきではない ‣ Alphaにもなってないので当然 ‣ 正式リリースまではだいぶ時間かかりそうな印象
21. ありがとうございました