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 どうなの?(Android Dev Summit 2019報告会)
Search
Yuki Anzai
November 15, 2019
Technology
7
3.8k
Jetpack Compose どうなの?(Android Dev Summit 2019報告会)
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
What’s new in Android development tools
yanzm
0
320
Google I/O 2025 Keynote & Developer Keynote Overview
yanzm
0
130
Coding Agent を使って Android アプリを作ってみる / Let's try using coding agent for Android app development
yanzm
0
140
MediaPipe と ML Kit ってどう ちがうの? / What is the difference between MediaPipe and ML Kit?
yanzm
0
1.2k
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
8
5.1k
Kotlinらしいコードを書こう - Convert Java File to Kotlin File のあとにやること / What to do after Convert Java File to Kotlin File
yanzm
1
5.7k
個人アプリ開発 (メンテナンス) 14年の歴史 / My personal app development history
yanzm
1
940
Material 3 やめました / Good-bye M3 design system
yanzm
4
8.7k
Compose Multiplatform で Bluesky のクライアント作ってみた / Bluesky client with Compose Multiplatform
yanzm
0
680
Other Decks in Technology
See All in Technology
LLM時代の検索
shibuiwilliam
2
180
怖くない!はじめてのClaude Code
shinya337
0
400
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
290
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
130
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.8k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
It's Worth the Effort
3n
185
28k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Fireside Chat
paigeccino
37
3.5k
A better future with KSS
kneath
238
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Making Projects Easy
brettharned
116
6.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
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 が出る • まだまだ製品で使えるような段階ではない • まずは試してみよう!