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
1k
ざっくり Jetpack Compose / Cookpad.apk #3
star_zero
July 23, 2019
Tweet
Share
More Decks by star_zero
See All by star_zero
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
1.1k
Jetpack Compose の Side-effect を使いこなす / DroidKaigi 2023
star_zero
5
5.6k
Android 14 新機能 / Android 14 Meetup Nagoya
star_zero
1
570
Android 14 と Predictive back gesture / Shibuya.apk #42
star_zero
0
360
Coroutines Test 入門 / Android Test Night #8
star_zero
2
1k
What's new in Jetpack / I/O Extended Japan 2022
star_zero
1
620
Kotlin 2021 Recap / DevFest 2021
star_zero
3
1.2k
Kotlin Symbol Processing (KSP) を使ったコード生成 / DroidKaigi 2021
star_zero
2
5.2k
What's new Android 12
star_zero
0
560
Other Decks in Programming
See All in Programming
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
140
テストコード書いてみませんか?
onopon
2
300
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
400
Kaigi on Railsに初参加したら、その日にLT登壇が決定した件について
tama50505
0
140
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
280
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
130
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1k
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
390
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
890
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
400
KubeCon NA 2024の全DB関連セッションを紹介
nnaka2992
0
110
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
390
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
66
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Language of Interfaces
destraynor
155
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Optimising Largest Contentful Paint
csswizardry
33
3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
490
Why Our Code Smells
bkeepers
PRO
335
57k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
200
4 Signs Your Business is Dying
shpigford
182
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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にもなってないので当然 ‣ 正式リリースまではだいぶ時間かかりそうな印象
ありがとうございました