ざっくり 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. ありがとうございました