Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose どうなの?(Android Dev Summit 2019報告会)

Yuki Anzai
November 15, 2019

Jetpack Compose どうなの?(Android Dev Summit 2019報告会)

Yuki Anzai

November 15, 2019
Tweet

More Decks by Yuki Anzai

Other Decks in Technology

Transcript

  1. Jetpack Compose ってなに? • Android の UI を作るための(モダンな)ツールキット • Kotlin

    • minSdkVersion = 21 • 既存のコード(View, XMLで構成されるUI)と混ぜて使える
  2. Jetpack Compose がやりたいこと • single source of truth がやりたい •

    CheckBox が持つ状態(isChecked)と Model が持つ状態 (isFavorite)どっちが正しいの?問題 • reactive UI がやりたい • single source of truth である Model が変わったら、⾃動で UI が変わ るようにしたい
  3. What's new for Jetpack Compose • セッション • 「What's New

    in Jetpack Compose 」 • https://www.youtube.com/watch?v=dtm2h-_sNDQ • 「Understanding Compose」 • https://www.youtube.com/watch?v=Q9MtlmmN4Q0
  4. What's new for Jetpack Compose • Developer Preview : 0.1.0-dev02

    • Android Studio 4.0 Canary 1 から簡単に試せるようになった • Not ready for production!!!!!(製品で使える段階じゃない、使うな、危 険) • 来年 beta が出るというアナウンス
  5. Jetpack Compose を試す • Android Studio 4.0 Canary 3 をインストールする

    • [Start a new Android Studio project] - [Empty Compose Activity]
  6. Composable function • fun に @Composable をつける → Composable function

    @Composable fun Greeting(name: String) { Text(text = "Hello $name!") }
  7. Composable function • fun に @Composable をつける → Composable function

    • Composable function は Composable function からしか呼べない @Composable fun Greeting(name: String) { Text(text = "Hello $name!") } library で⽤意されている Composable function
  8. Composable function • fun に @Composable をつける → Composable function

    • Composable function は Composable function からしか呼べない • UI Components = Composable functions のこと @Composable fun Greeting(name: String) { Text(text = "Hello $name!") }
  9. @Composable fun MyList() { VerticalScroller { Column(crossAxisSize = LayoutSize.Expand) {

    for (i in 0 until 20) { ListItem(text = "item : $i") } } } }
  10. プレビュー • Composable function に @Preview をつける • 引数なし •

    コードを変更したら Build Refresh で更新 @Preview @Composable fun DefaultPreview() { Greeting("Android") }
  11. @Model • single source of truth • プロパティとして値(状態)を持つ • class

    に @Model をつけると Observable な機能が追加される • Composable function は参照している @Model の可変プロパティを⾃動 で subscribeし、値が変わったら⾃動で recompose する(Composable function が再度呼ばれる) @Model class FavoriteState( var isFavorite: Boolean = false )
  12. val names = listOf("Donuts", "Eclair", "Froyo") @Model class NameState(var value:

    String = "") @Composable fun RandomName() { val nameState = NameState() Column { Text(text = "Hello ${nameState.value}!") Button( onClick = { nameState.value = names.random() }, text = "next" ) } }
  13. val names = listOf("Donuts", "Eclair", "Froyo") @Model class NameState(var value:

    String = "") @Composable fun RandomName() { val nameState = NameState() Column { Text(text = "Hello ${nameState.value}!") Button( onClick = { nameState.value = names.random() }, text = "next" ) } }
  14. val names = listOf("Donuts", "Eclair", "Froyo") @Model class NameState(var value:

    String = "") @Composable fun RandomName() { val nameState = NameState() Column { Text(text = "Hello ${nameState.value}!") Button( onClick = { nameState.value = names.random() }, text = "next" ) } }
  15. val names = listOf("Donuts", "Eclair", "Froyo") @Model class NameState(var value:

    String = "") @Composable fun RandomName() { val nameState = NameState() Column { Text(text = "Hello ${nameState.value}!") Button( onClick = { nameState.value = names.random() }, text = "next" ) } } recompose
  16. val names = listOf("Donuts", "Eclair", "Froyo") @Composable fun RandomName() {

    val nameState = +state { "" } Column { Text(text = "Hello ${nameState.value}!") Button( onClick = { nameState.value = names.random() }, text = "next" ) } } @Model class State<T>(value: T)
  17. どんな UI Components がある? • androidx.ui:ui-layout:$version • レイアウト関係 • androidx.ui:ui-material:$version

    • Material Design 関係 • ConstraintLayout 今作ってる最中です Jetnews サンプルを⾒るとよい
  18. MaterialTheme { Column { Text("Hello Android") Button("button") Button("button", style =

    OutlinedButtonStyle()) Checkbox(true, {}) RadioGroup(listOf("Donuts", "Eclair", "Froyo"), "Donuts", {}) Switch(true, {}) val vector = +vectorResource(R.drawable.ic_android_black_24dp) Container(width = 24.dp, height = 24.dp) { DrawVector(vector) } val image = +imageResource(R.drawable.yanzm) SimpleImage(image) } }
  19. Custom View を作るには? • Draw と Layout を使う @Composable fun

    DrawBox() { val paint = Paint() paint.color = Color.Blue paint.style = PaintingStyle.fill Draw { canvas: Canvas, _: PxSize -> val size = 200.dp.value val offset = 20.dp.value val radius = Radius.circular(20.dp.value) val rect = RRect(offset, offset, size + offset, size + offset, radius) canvas.drawRRect(rect, paint) } }
  20. Custom View を作るには? • Draw と Layout を使う @Composable fun

    Stack( children: @Composable() () -> Unit ) { Layout(children) { measurables, constraints -> val placeables = measurables.map { it.measure(constraints) } val maxWidth = placeables.map {it.width.value}.max()!!.ipx val maxHeight = placeables.map { it.height.value }.max()!!.ipx layout(maxWidth, maxHeight) { placeables.forEach { it.place(0.ipx, 0.ipx) } } } }
  21. Custom View を作るには? • Draw と Layout を使う Stack {

    DrawBox() Text("Donuts", style = TextStyle(Color.LightGray, 30.sp)) }
  22. 既存の View と使うには • Compose UI を既存の UI で使う :

    @GenerateView (予定) • まだない • 既存の UI を Compose UI で使う • 特に情報なし
  23. Jetpack Compose やるべき? • Layout XML はオワコンですか? • 既存の UI

    の作り⽅が廃⽌されるわけではない • Java → Kotlin のように⼀部分だけ導⼊できるようにしていく • 今から試しておくべき? • チームは API への意⾒を求めているのでフィードバックがあればぜひ
  24. まとめ • Android Studio 4.0 Canary で Jetpack Compose を簡単に試せるように

    なった • 来年 beta が出る • まだまだ製品で使えるような段階ではない • まずは試してみよう!