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
5分でざっくり理解する Jetpack Compose
Search
yuki anzai
March 05, 2021
0
230
5分でざっくり理解する Jetpack Compose
yuki anzai
March 05, 2021
Tweet
Share
More Decks by yuki anzai
See All by yuki anzai
try-catchからrunCatchingに_移行した話.pdf
kuromame
6
3.3k
Flux + Repositoryへリアーキテクチャ後にテストを書き始めて1ヶ月経った話
kuromame
4
350
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
For a Future-Friendly Web
brad_frost
179
9.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Practical Orchestrator
shlominoach
189
11k
Agile that works and the tools we love
rasmusluckow
329
21k
Designing for Performance
lara
610
69k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Designing for humans not robots
tammielis
253
25k
Raft: Consensus for Rubyists
vanstee
140
7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Transcript
5分でざっくり理解する Jetpack Compose 2021/03/05
自己紹介 安齋祐紀(あんざいゆうき) Twitter :@off2white Connpass: @kuromame 趣味 -
リアル脱出ゲーム、ボードゲーム - 締め切り駆動登壇 所属:株式会社Mobility Technologies - タクシー配車アプリ「GO」 - 乗務員様向け車載システム(Android)の開発 - 基本機能+ナビとか配車システムのgRPC連携とか - 車や位置情報チップからの情報をByteで受け取って解析したりとかとか
Vol.2 車載Androidシステムの技術と開発チーム 3/9(火) 19:00〜19:50
https://android-developers.googleblog.com/2021/02/announcing-jetpack-compose-beta.html
https://developer.android.com/dev-challenge?hl=ur
今日話すこと - Jetpack Composeは何がいいのか - 実際にはどんな風に使うのか - 現状使ってみた感想
Jetpack Composeは何が良いのか
今までの方法①state(data)をxmlにbindする XML Fragment/Activity state TextView Layout state TextView Layout binding
今までの方法②viewをFragmentから参照してアクセス XML Fragment/Activity TextView Layout state TextView Layout change
幾多の Androider の時間が吸われてい くやつ① (lifecycleOwner つけ忘れ問題 ) val binding =
FragmentLoginBinding.bind(view) binding.lifecycleOwner = viewLifecycleOwner
幾多の Androider の時間が吸われてい くやつ② (databind し忘れ問題 ) val binding =
FragmentLoginBinding.bind(view) binding.lifecycleOwner = viewLifecycleOwner binding.viewModel = viewModel
幾多の Androider の時間が吸われてい くやつ③ ( 状態によって View の表示を切り替え るとき、一生懸命 View
の状態管理をす る ) // いったんクリアする binding.text.visible = View.GONE binding.img.visible = View.GONE binding.progressBar.visible = View.GONE . . . when (state){ AState -> {...} BState -> {...} CState -> {...} DState -> {...} }
何が問題なのか - View に状態を Sync する必要がある - 状態の二重管理はやっぱり辛い - View
が mutable である - 状態ごとに View を変化させるということは、前の View の状態を常に考慮しないといけない ここら辺で我々は疲弊してきた
宣言的UI Compose コードでUIをimmutableに宣言する
@Composable fun AdoptedChildCard( adoptedChild: List<AdoptedChild>, navHostController: NavHostController ) { Column(
Modifier .fillMaxWidth() .verticalScroll(rememberScrollState()) ) { adoptedChild.forEach { Card( elevation = 8.dp, modifier = Modifier.padding(16.dp)) { Stateを変更されたら
@Composable fun AdoptedChildCard( adoptedChild: List<AdoptedChild>, navHostController: NavHostController ) { Column(
Modifier .fillMaxWidth() .verticalScroll(rememberScrollState()) ) { adoptedChild.forEach { Card( elevation = 8.dp, modifier = Modifier.padding(16.dp)) { UI定義が一回実行される (ソースコード)
@Composable fun AdoptedChildCard( adoptedChild: List<AdoptedChild>, // state1 navHostController: NavHostController )
{ Column( Modifier .fillMaxWidth() .verticalScroll(rememberScrollState()) ) { adoptedChild.forEach { Card( elevation = 8.dp, modifier = Modifier.padding(16.dp)) { State1 View1
@Composable fun AdoptedChildCard( adoptedChild: List<AdoptedChild>, // state2 navHostController: NavHostController )
{ Column( Modifier .fillMaxWidth() .verticalScroll(rememberScrollState()) ) { adoptedChild.forEach { Card( elevation = 8.dp, modifier = Modifier.padding(16.dp)) { State2 View2 Stateに対してViewがimmutable
宣言的UI(Compose)のまとめ - 今まで View と Model 間でデータの Sync を行っていたし、途中で状態を切り替えてた -
これがすごいバグを生みがちだった - Compose を使うことで、データにつき一つの View を生成する - View が immutable になることで上記の問題が解決される - 世界的に宣言的 UI への移行が進んでいる(って Google さんは言ってる) - Flutter - SwiftUI
実際にどんな風に使うのか
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContent { } } } MainActivityなどにsetContent {} を追加する
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContent { Text (text = "Hello World!") } } } TextなどのUIのコンポーネントを記述する
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContent { Greeting (name = "YUKI") } } } @Composable fun Greeting(name: String) { Text (text = "Hello $name!") } @Composableアノテーションをつけることで Composableメソッドを作成することができる。 (これらはActivityではなく、別ファイルに記載できる)
これだけ!
詳しい使い方は Zenn.devに書いたので 見てね! https://zenn.dev/96mame/articles/9 e2a761ba57656
現状使ってみた感想
使ってみた感想 よかったこと - 個人的には使いやすい - View の状態がすごい多い箇所で使いたい - Navigation も使えるし便利。
Fragment いらないかも。 - Flutter と使い心地が似ているらしい(同僚談 - Flutter やることになった時にスムーズに移行できるかも( UI 周りだけだけど) よくなかったこと - プレビュー機能がとても遅い - プレビューを見るだけでビルド一回必要 - 実機にインストールした方が確認が早いまである - これが改善されないと xml の方が良いかもと思うくらい
認識間違ってたら ご連絡ください!!