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

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

80a3a3857a55f154d23acb705eff72cc?s=128

star_zero

July 23, 2019
Tweet

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