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