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 / Cookpad.apk #3
Search
star_zero
July 23, 2019
Programming
2
930
ざっくり Jetpack Compose / Cookpad.apk #3
star_zero
July 23, 2019
Tweet
Share
More Decks by star_zero
See All by star_zero
Jetpack Compose の Side-effect を使いこなす / DroidKaigi 2023
star_zero
5
4.2k
Android 14 新機能 / Android 14 Meetup Nagoya
star_zero
1
510
Android 14 と Predictive back gesture / Shibuya.apk #42
star_zero
0
310
Coroutines Test 入門 / Android Test Night #8
star_zero
2
780
What's new in Jetpack / I/O Extended Japan 2022
star_zero
1
580
Kotlin 2021 Recap / DevFest 2021
star_zero
3
1.2k
Kotlin Symbol Processing (KSP) を使ったコード生成 / DroidKaigi 2021
star_zero
2
5k
What's new Android 12
star_zero
0
520
これからはじめるAndroid開発 / DevFest 2020
star_zero
4
670
Other Decks in Programming
See All in Programming
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
180
The Design of Everyday APIs - PyCon 2024
roguelynn
1
650
Androidで不安定なPlatform Viewsとの闘い
temoki
0
120
AIで生成したものをAIでチェックしてる話
ippey
0
140
Make CPU #3 dalance
dalance
1
190
Google Analytics でサイト速度を計測する / Measure site speed with Google Analytics
forrep
2
110
来週から実践できる! LayerXのバクラク事業部で行われている Go 関連の読書会のご紹介 / Bakuraku Go Reading Group
upamune
5
270
RubyGems on ruby.wasm
kateinoigakukun
0
650
SaaSを作るという仕事について
fujimura
11
4.6k
Hi, have you met Kotlin Multiplatform? | Kotlin User Group Berlin
prof18
1
130
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
120
Enjoy Creative Coding with Ruby (RubyKaigi2024)
chobishiba
0
4.8k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
43
6.8k
Typedesign – Prime Four
hannesfritz
36
2.1k
Into the Great Unknown - MozCon
thekraken
15
1.2k
Code Reviewing Like a Champion
maltzj
516
39k
Unsuck your backbone
ammeep
664
57k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Making Projects Easy
brettharned
109
5.6k
Product Roadmaps are Hard
iamctodd
45
9.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
The World Runs on Bad Software
bkeepers
PRO
61
6.8k
The Language of Interfaces
destraynor
151
23k
Transcript
ざっくり Jetpack Compose Cookpad.apk #3 2019/07/23
About me •Kenji Abe •メディアプロダクト開発部 •cookpadLive, storeTV •Twitter: @STAR_ZERO
⚠注意⚠ まだAlphaにもなってないので、 今後変更されると思います。 2019/07/20のコードでやっています。
Jetpack Compose
Jetpack Compose •Google I/O 2019で発表 •UIを宣言的に書いてく •Kotlinを使う •React, Litho, Vue.js,
Flutterみたいな感じ
Jetpack Composeで アプリを作ってみた https://github.com/STAR-ZERO/GithubCompose
Hello World
Hello World override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent {
MaterialTheme { Text(text = "Hello World") } } }
レイアウト
レイアウト MaterialTheme { Container( padding = EdgeInsets(16.dp), alignment = Alignment.TopLeft,
width = 240.dp, height = 120.dp ) { Text(text = "Hello World") } }
レイアウト MaterialTheme { Column { Row { Text(text = "123")
Text(text = "456") } Row { Text(text = "abc") Text(text = "def") } } }
レイアウト MaterialTheme { Table { for (i in 0 until
20) { tableRow { for (j in 0 until 2) { Padding(16.dp) { Text(text = "Cell $i - $j") } } } } } }
ステート
ステート Column { val counter = +state { 0 }
Text(text = "count = ${counter.value}") Button( text = "Button", onClick = { counter.value++ } ) }
ステート Column { val flag = +state { false }
if (flag.value) { Text(text = "Jepack") } else { Text(text = "Compose") } Button( text = "Button", onClick = { flag.value = !flag.value } ) }
Commit Scope? (Lifecycle?)
Commit Scope Column { +onActive { } // 最初の1回 +onCommit
{ // 描画されるたび onDispose { } // 破棄されるとき } val flag = +state { false } if (flag.value) { Container { +onCommit { onDispose { } } } } else { // ... } }
まとめ
まとめ •直感的でよさそう ‣ でも、すべてJetpack Composeはツライかも? •ステートやライフサイクルは今までと異なるので注意 ‣ 設計どうしよう
まとめ •ただし、今やるべきではない ‣ Alphaにもなってないので当然 ‣ 正式リリースまではだいぶ時間かかりそうな印象
ありがとうございました