Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jetpack Compose どうなの?
Search
Yuki Anzai
November 15, 2019
Technology
7
3.8k
Jetpack Compose どうなの?
Android Dev Summit 2019 Extended Tokyo #gdgtokyo
https://gdg-tokyo.connpass.com/event/152665/
Yuki Anzai
November 15, 2019
Tweet
Share
More Decks by Yuki Anzai
See All by Yuki Anzai
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
200
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
290
What’s new in Android development tools
yanzm
0
850
Google I/O 2025 Keynote & Developer Keynote Overview
yanzm
0
150
Coding Agent を使って Android アプリを作ってみる / Let's try using coding agent for Android app development
yanzm
0
170
MediaPipe と ML Kit ってどう ちがうの? / What is the difference between MediaPipe and ML Kit?
yanzm
0
1.3k
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
8
5.4k
Kotlinらしいコードを書こう - Convert Java File to Kotlin File のあとにやること / What to do after Convert Java File to Kotlin File
yanzm
1
5.8k
個人アプリ開発 (メンテナンス) 14年の歴史 / My personal app development history
yanzm
1
960
Other Decks in Technology
See All in Technology
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
670
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの3つのシナリオ
masayamoriofficial
0
230
Goでマークダウンの独自記法を実装する
lag129
0
230
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
450
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
460
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
1k
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
150
実践AIガバナンス
asei
3
160
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
知られざるprops命名の慣習 アクション編
uhyo
11
2.7k
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.7k
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
140
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Code Reviewing Like a Champion
maltzj
525
40k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
We Have a Design System, Now What?
morganepeng
53
7.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
GitHub's CSS Performance
jonrohan
1031
460k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Transcript
Jetpack Compose どうなの? Yuki Anzai (@yanzm) at Android Dev Summit
2019 報告会
Yuki Anzai • Google Developer Expert for Android • Twitter
: @yanzm
None
Jetpack Compose ってなに? • Android の UI を作るための(モダンな)ツールキット • Kotlin
• minSdkVersion = 21 • 既存のコード(View, XMLで構成されるUI)と混ぜて使える
Jetpack Compose がやりたいこと • もっとシンプルにしたい • 今までの⽅法だと、⼊⼒⽂字列でフィルタリングできるリストを作るの にたくさんコード書かないといけない • private
な API に開発者が依存せざるを得ない状況をやめたい • Material + animations な UI にしたい
Jetpack Compose がやりたいこと • single source of truth がやりたい •
CheckBox が持つ状態(isChecked)と Model が持つ状態 (isFavorite)どっちが正しいの?問題 • reactive UI がやりたい • single source of truth である Model が変わったら、⾃動で UI が変わ るようにしたい
Jetpack Compose がやりたいこと • UI パーツの再利⽤性を⾼めたい • ⼩さくて特定の役割にフォーカスした Composableを組み合わせて UI
を作る
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
What's new for Jetpack Compose • Developer Preview : 0.1.0-dev02
• Android Studio 4.0 Canary 1 から簡単に試せるようになった • Not ready for production!!!!!(製品で使える段階じゃない、使うな、危 険) • 来年 beta が出るというアナウンス
None
Jetpack Compose を試す • Android Studio 4.0 Canary 3 をインストールする
• [Start a new Android Studio project] - [Empty Compose Activity]
プレビュー
Composable function • fun に @Composable をつける → Composable function
@Composable fun Greeting(name: String) { Text(text = "Hello $name!") }
Composable function • fun に @Composable をつける → Composable function
• Composable function は Composable function からしか呼べない @Composable fun Greeting(name: String) { Text(text = "Hello $name!") } library で⽤意されている Composable function
Composable function • fun に @Composable をつける → Composable function
• Composable function は Composable function からしか呼べない • UI Components = Composable functions のこと @Composable fun Greeting(name: String) { Text(text = "Hello $name!") }
@Composable fun MyList() { VerticalScroller { Column(crossAxisSize = LayoutSize.Expand) {
for (i in 0 until 20) { ListItem(text = "item : $i") } } } }
プレビュー • Composable function に @Preview をつける @Preview @Composable fun
DefaultPreview() { Greeting("Android") }
プレビュー • Composable function に @Preview をつける • 引数なし @Preview
@Composable fun DefaultPreview() { Greeting("Android") }
プレビュー • Composable function に @Preview をつける • 引数なし •
コードを変更したら Build Refresh で更新 @Preview @Composable fun DefaultPreview() { Greeting("Android") }
@Model • single source of truth • プロパティとして値(状態)を持つ • class
に @Model をつけると Observable な機能が追加される • Composable function は参照している @Model の可変プロパティを⾃動 で subscribeし、値が変わったら⾃動で recompose する(Composable function が再度呼ばれる) @Model class FavoriteState( var isFavorite: Boolean = false )
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" ) } }
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" ) } }
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" ) } }
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
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)
どんな UI Components がある? • androidx.ui:ui-layout:$version • レイアウト関係 • androidx.ui:ui-material:$version
• Material Design 関係 • ConstraintLayout 今作ってる最中です Jetnews サンプルを⾒るとよい
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) } }
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) } }
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) } } } }
Custom View を作るには? • Draw と Layout を使う Stack {
DrawBox() Text("Donuts", style = TextStyle(Color.LightGray, 30.sp)) }
既存の View と使うには • Compose UI を既存の UI で使う :
@GenerateView (予定) • まだない • 既存の UI を Compose UI で使う • 特に情報なし
Jetpack Compose やるべき? • Layout XML はオワコンですか? • 既存の UI
の作り⽅が廃⽌されるわけではない • Java → Kotlin のように⼀部分だけ導⼊できるようにしていく • 今から試しておくべき? • チームは API への意⾒を求めているのでフィードバックがあればぜひ
Resources
Portal site • https://developer.android.com/jetpack/compose
Codelab • https://codelabs.developers.google.com/codelabs/jetpack- compose-basics
Sample • https://github.com/ android/compose-samples/ tree/master/JetNews • Android Studio で [Import
Sample...] - [Jetnews sample]
まとめ • Android Studio 4.0 Canary で Jetpack Compose を簡単に試せるように
なった • 来年 beta が出る • まだまだ製品で使えるような段階ではない • まずは試してみよう!