Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for yuki anzai yuki anzai
March 05, 2021
230

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

Avatar for yuki anzai

yuki anzai

March 05, 2021
Tweet

Transcript

  1. 自己紹介 安齋祐紀(あんざいゆうき)
 Twitter :@off2white 
 Connpass: @kuromame 
 趣味
 -

    リアル脱出ゲーム、ボードゲーム
 - 締め切り駆動登壇 
 所属:株式会社Mobility Technologies 
 - タクシー配車アプリ「GO」 
 - 乗務員様向け車載システム(Android)の開発 
 - 基本機能+ナビとか配車システムのgRPC連携とか 
 - 車や位置情報チップからの情報をByteで受け取って解析したりとかとか 

  2. 幾多の Androider の時間が吸われてい くやつ① (lifecycleOwner つけ忘れ問題 ) val binding =

    FragmentLoginBinding.bind(view) binding.lifecycleOwner = viewLifecycleOwner
  3. 幾多の Androider の時間が吸われてい くやつ② (databind し忘れ問題 ) val binding =

    FragmentLoginBinding.bind(view) binding.lifecycleOwner = viewLifecycleOwner binding.viewModel = viewModel
  4. 幾多の Androider の時間が吸われてい くやつ③ ( 状態によって View の表示を切り替え るとき、一生懸命 View

    の状態管理をす る ) // いったんクリアする binding.text.visible = View.GONE binding.img.visible = View.GONE binding.progressBar.visible = View.GONE . . . when (state){ AState -> {...} BState -> {...} CState -> {...} DState -> {...} }
  5. 何が問題なのか - View に状態を Sync する必要がある - 状態の二重管理はやっぱり辛い - View

    が mutable である - 状態ごとに View を変化させるということは、前の View の状態を常に考慮しないといけない ここら辺で我々は疲弊してきた
  6. @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を変更されたら
  7. @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定義が一回実行される (ソースコード)
  8. @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
  9. @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

  10. 宣言的UI(Compose)のまとめ - 今まで View と Model 間でデータの Sync を行っていたし、途中で状態を切り替えてた -

    これがすごいバグを生みがちだった - Compose を使うことで、データにつき一つの View を生成する - View が immutable になることで上記の問題が解決される - 世界的に宣言的 UI への移行が進んでいる(って Google さんは言ってる) - Flutter - SwiftUI
  11. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState) setContent { } } } MainActivityなどにsetContent {} を追加する
  12. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState) setContent { Text (text = "Hello World!") } } } TextなどのUIのコンポーネントを記述する
  13. 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ではなく、別ファイルに記載できる)
  14. 使ってみた感想 よかったこと - 個人的には使いやすい - View の状態がすごい多い箇所で使いたい - Navigation も使えるし便利。

    Fragment いらないかも。 - Flutter と使い心地が似ているらしい(同僚談 - Flutter やることになった時にスムーズに移行できるかも( UI 周りだけだけど) よくなかったこと - プレビュー機能がとても遅い - プレビューを見るだけでビルド一回必要 - 実機にインストールした方が確認が早いまである - これが改善されないと xml の方が良いかもと思うくらい