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

Compose「急いで」キャッチアップする

Swimmy
April 12, 2022
6

 Compose「急いで」キャッチアップする

Swimmy

April 12, 2022
Tweet

More Decks by Swimmy

Transcript

  1. Compose
    「急いで」キャッチアップする

    View full-size slide

  2. 名はすいみー
    23卒な学生

    View full-size slide

  3. 個人アプリの
    Composeの移行作業
    やってるよ

    View full-size slide

  4. 4
    やっていること
    既存のアプリで移行作業
    やってみる

    View full-size slide

  5. 5
    FragmentをまるっとCompose化
    override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
    ): View {
    return ComposeView(requireContext()).apply {
    setContent {
    // In Compose World

    View full-size slide

  6. 6
    アノテーションを付けたもの/付いてるものであ
    れば、他のcomposable関数を呼び出せる。
    Text(“テキスト”) @Compose
    fun TextView() {
    Text(“テキスト”)
    }

    View full-size slide

  7. 7
    Viewの配置はどうやるん?
    基本的にはColumn / Row / Boxで対応できる
    困ったらConstraintLayout
    Column { Row {
    Text(“1行目”) Text(“1列目”)
    Text(“2行目”) Text(“2列目”)
    Text(“3行目”) Text(“3列目”)
    } }

    View full-size slide

  8. 8
    ネスト多くなっちゃうけど大丈夫なん?
    →Composeは複数測定を回避してくれるので 
    大丈夫!
    とはいえ、ネスト祭りになると可読性と保守性が
    落ちる
    素直にConstraintLayout使っていき!

    View full-size slide

  9. 9
    マージンどうやって取るん?
    Modifierを引数に渡す
    → padding基調
    → marginを取るには上の階層にpadding
    Column(Modifier.padding(16.dp)) {
    Text(“一行目”, Modifier.padding(8.dp))
    Text(“二行目”, Modifier.padding(8.dp))
    Text(“三行目”, Modifier.padding(16.dp))
    }

    View full-size slide

  10. 10
    素朴な疑問
    ファイル分けどうやってやるん??
    →AndroidViewだと悩まなかった
     共通化出来るからこそ気になった

    View full-size slide

  11. 11
    わいのGithub参考にしたらええ 詳しい人

    View full-size slide

  12. 12
    アトミックデザイン的な分け方していた
    -> HogeComponent.ktにUIパーツの
     最小単位(ボタン、テキスト)を作る。
    → HogeScreen.ktに画面のcomposable関数を
    一つだけ定義する
     @HogeScreen() = { … }
    →別画面でも使えるものに対しては
     commonディレクトリに入れてる

    View full-size slide

  13. 13
    Viewの状態はどうするん?
    val name = remember { mutableStateOf(“”) }
    TextField(
    value = name,
    onValueChange = { name = it }
    )
    なんか、ViewModel不要論あるけども
    どうなん??

    View full-size slide

  14. 14
    状態を保持するクラスは関心の分離の観点で必

    今はライフサイクルの同期と
    コルーチンとの相性の点など
    で結果論ViewModelを使っているだけ
    別にViewModelじゃなくてもよい
    詳しい人

    View full-size slide

  15. 15
    liveDataをstateとして扱う
    // ViewModel
    private val _name = MutableLiveData(“”)
    val name: LiveData = _name
    // Compose
    val name by viewModel.hoge.observeAsState(“”)

    View full-size slide

  16. 16
    かんそう
    Composeそんなに難しくないよ!
    初学者はComposeから!
    とはいえ、AndroidViewは業務でまだ触る

    View full-size slide