5分でざっくり理解する Jetpack Compose

Transcript

1. 5分でざっくり理解する Jetpack Compose 2021/03/05
2. 自己紹介 安齋祐紀（あんざいゆうき）
 Twitter :@off2white 
 Connpass: @kuromame 
 趣味
 - リアル脱出ゲーム、ボードゲーム
 - 締め切り駆動登壇 
 所属：株式会社Mobility Technologies 
 - タクシー配車アプリ「GO」 
 - 乗務員様向け車載システム(Android)の開発 
 - 基本機能+ナビとか配車システムのgRPC連携とか 
 - 車や位置情報チップからの情報をByteで受け取って解析したりとかとか 

3. Vol.2 車載Androidシステムの技術と開発チーム 3/9(火) 19:00〜19:50
4. https://android-developers.googleblog.com/2021/02/announcing-jetpack-compose-beta.html
5. https://developer.android.com/dev-challenge?hl=ur
6. 今日話すこと - Jetpack Composeは何がいいのか - 実際にはどんな風に使うのか - 現状使ってみた感想
7. Jetpack Composeは何が良いのか
8. 今までの方法①state(data)をxmlにbindする XML Fragment/Activity state TextView Layout state TextView Layout binding
9. 今までの方法②viewをFragmentから参照してアクセス XML Fragment/Activity TextView Layout state TextView Layout change
10. 幾多の Androider の時間が吸われてい くやつ① (lifecycleOwner つけ忘れ問題 ) val binding = FragmentLoginBinding.bind(view) binding.lifecycleOwner = viewLifecycleOwner
11. 幾多の Androider の時間が吸われてい くやつ② (databind し忘れ問題 ) val binding = FragmentLoginBinding.bind(view) binding.lifecycleOwner = viewLifecycleOwner binding.viewModel = viewModel
12. 幾多の Androider の時間が吸われてい くやつ③ ( 状態によって View の表示を切り替え るとき、一生懸命 View の状態管理をす る ) // いったんクリアする binding.text.visible = View.GONE binding.img.visible = View.GONE binding.progressBar.visible = View.GONE . . . when (state){ AState -> {...} BState -> {...} CState -> {...} DState -> {...} }
13. 何が問題なのか - View に状態を Sync する必要がある - 状態の二重管理はやっぱり辛い - View が mutable である - 状態ごとに View を変化させるということは、前の View の状態を常に考慮しないといけない ここら辺で我々は疲弊してきた
14. 宣言的UI
 Compose
 コードでUIをimmutableに宣言する

15. @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を変更されたら
16. @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定義が一回実行される (ソースコード)
17. @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
18. @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

19. 宣言的UI（Compose）のまとめ - 今まで View と Model 間でデータの Sync を行っていたし、途中で状態を切り替えてた - これがすごいバグを生みがちだった - Compose を使うことで、データにつき一つの View を生成する - View が immutable になることで上記の問題が解決される - 世界的に宣言的 UI への移行が進んでいる（って Google さんは言ってる） - Flutter - SwiftUI
20. 実際にどんな風に使うのか
21. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { } } } MainActivityなどにsetContent {} を追加する
22. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Text (text = "Hello World!") } } } TextなどのUIのコンポーネントを記述する
23. 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ではなく、別ファイルに記載できる）
24. これだけ！
25. 詳しい使い方は Zenn.devに書いたので 見てね！ https://zenn.dev/96mame/articles/9 e2a761ba57656
26. 現状使ってみた感想
27. 使ってみた感想 よかったこと - 個人的には使いやすい - View の状態がすごい多い箇所で使いたい - Navigation も使えるし便利。 Fragment いらないかも。 - Flutter と使い心地が似ているらしい（同僚談 - Flutter やることになった時にスムーズに移行できるかも（ UI 周りだけだけど） よくなかったこと - プレビュー機能がとても遅い - プレビューを見るだけでビルド一回必要 - 実機にインストールした方が確認が早いまである - これが改善されないと xml の方が良いかもと思うくらい
28. 認識間違ってたら ご連絡ください！！