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
200
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.1k
Flux + Repositoryへリアーキテクチャ後にテストを書き始めて1ヶ月経った話
kuromame
4
340
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Thoughts on Productivity
jonyablonski
67
4.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
A Tale of Four Properties
chriscoyier
156
23k
The Language of Interfaces
destraynor
154
24k
Typedesign – Prime Four
hannesfritz
39
2.4k
Bash Introduction
62gerente
608
210k
The Pragmatic Product Professional
lauravandoore
31
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
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 の方が良いかもと思うくらい
認識間違ってたら ご連絡ください!!