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