Jetpack Compose どうなの？（Android Dev Summit 2019報告会）

Transcript

1. Jetpack Compose どうなの？ Yuki Anzai (@yanzm) at Android Dev Summit

   2019 報告会

2. Yuki Anzai • Google Developer Expert for Android • Twitter

   : @yanzm
3. None

4. Jetpack Compose ってなに？ • Android の UI を作るための（モダンな）ツールキット • Kotlin

   • minSdkVersion = 21 • 既存のコード（View, XMLで構成されるUI）と混ぜて使える

5. Jetpack Compose がやりたいこと • もっとシンプルにしたい • 今までの⽅法だと、⼊⼒⽂字列でフィルタリングできるリストを作るの にたくさんコード書かないといけない • private

   な API に開発者が依存せざるを得ない状況をやめたい • Material + animations な UI にしたい

6. Jetpack Compose がやりたいこと • single source of truth がやりたい •

   CheckBox が持つ状態（isChecked）と Model が持つ状態 （isFavorite）どっちが正しいの？問題 • reactive UI がやりたい • single source of truth である Model が変わったら、⾃動で UI が変わ るようにしたい

7. Jetpack Compose がやりたいこと • UI パーツの再利⽤性を⾼めたい • ⼩さくて特定の役割にフォーカスした Composableを組み合わせて UI

   を作る

8. 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

9. What's new for Jetpack Compose • Developer Preview : 0.1.0-dev02

   • Android Studio 4.0 Canary 1 から簡単に試せるようになった • Not ready for production!!!!!（製品で使える段階じゃない、使うな、危 険） • 来年 beta が出るというアナウンス
10. None

11. Jetpack Compose を試す • Android Studio 4.0 Canary 3 をインストールする

    • [Start a new Android Studio project] - [Empty Compose Activity]

12. プレビュー

13. Composable function • fun に @Composable をつける → Composable function

    @Composable fun Greeting(name: String) { Text(text = "Hello $name!") }

14. Composable function • fun に @Composable をつける → Composable function

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

15. Composable function • fun に @Composable をつける → Composable function

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

16. @Composable fun MyList() { VerticalScroller { Column(crossAxisSize = LayoutSize.Expand) {

    for (i in 0 until 20) { ListItem(text = "item : $i") } } } }

17. プレビュー • Composable function に @Preview をつける @Preview @Composable fun

    DefaultPreview() { Greeting("Android") }

18. プレビュー • Composable function に @Preview をつける • 引数なし @Preview

    @Composable fun DefaultPreview() { Greeting("Android") }

19. プレビュー • Composable function に @Preview をつける • 引数なし •

    コードを変更したら Build Refresh で更新 @Preview @Composable fun DefaultPreview() { Greeting("Android") }

20. @Model • single source of truth • プロパティとして値（状態）を持つ • class

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

21. 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" ) } }

22. 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" ) } }

23. 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" ) } }

24. 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

25. 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)

26. どんな UI Components がある？ • androidx.ui:ui-layout:$version • レイアウト関係 • androidx.ui:ui-material:$version

    • Material Design 関係 • ConstraintLayout 今作ってる最中です Jetnews サンプルを⾒るとよい

27. 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) } }

28. 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) } }

29. 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) } } } }

30. Custom View を作るには？ • Draw と Layout を使う Stack {

    DrawBox() Text("Donuts", style = TextStyle(Color.LightGray, 30.sp)) }

31. 既存の View と使うには • Compose UI を既存の UI で使う :

    ＠GenerateView （予定） • まだない • 既存の UI を Compose UI で使う • 特に情報なし

32. Jetpack Compose やるべき？ • Layout XML はオワコンですか？ • 既存の UI

    の作り⽅が廃⽌されるわけではない • Java → Kotlin のように⼀部分だけ導⼊できるようにしていく • 今から試しておくべき？ • チームは API への意⾒を求めているのでフィードバックがあればぜひ

33. Resources

34. Portal site • https://developer.android.com/jetpack/compose

35. Codelab • https://codelabs.developers.google.com/codelabs/jetpack- compose-basics

36. Sample • https://github.com/ android/compose-samples/ tree/master/JetNews • Android Studio で [Import

    Sample...] - [Jetnews sample]

37. まとめ • Android Studio 4.0 Canary で Jetpack Compose を簡単に試せるように

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