Grid表示のレイアウトで Flow layoutsを使う

Mobile勉強会 ウォンテッドリー × チームラボ × Sansan #18 〜新技術の導入〜

Transcript

1. Grid表⽰のレイアウトで Flow layoutsを使う Mobile勉強会 ウォンテッドリー × チームラボ × Sansan #18 〜新技術の導⼊〜 @cffYoHa
2. ⾃⼰紹介 • @cffYoHa(ようは) • Fenrir Inc. ◦ Android エンジニア • DroidKaigi Staff
3. 実現したいレイアウト • スタンプラリー台紙のようなレイアウト
4. 実現したいレイアウト • スタンプラリー台紙のようなレイアウト ◦ 左から右下に向かって敷き詰める
5. 実現したいレイアウト • スタンプラリー台紙のようなレイアウト ◦ 左から右下に向かって敷き詰める ◦ 各アイテムの台紙部分の形は固定
6. 実現したいレイアウト • スタンプラリー台紙のようなレイアウト ◦ 左から右下に向かって敷き詰める ◦ 各アイテムの台紙部分の形は固定 ◦ スクロール可能な画⾯のUI要素として追加
7. なぜ話すのか • 格⼦のレイアウトはLazy gridsが最適だと決めつけていた • Grid表⽰の定番の選択肢であるLazy gridsではうまくいかなかった
8. LazyVerticalGridで実装してみる
9. LazyVerticalGridで実装してみる 右端に余分なスペースが残ってしまう
10. そもそも • 親要素のLazyColumnとネストが発⽣しているから󰢃 • ビルドせずにUIを作り続けたせいで気づくのに遅れた。。。
11. Flow layoutsを使う • 特徴 ◦ コンテナのスペースが不⾜すると アイテムが次の⾏に流れ込む ◦ チップやフィルタリング UIに最適 ◦ 100個未満の少量のアイテムに最適 • 注意点 ◦ 現時点ではExperimental https://developer.android.com/develop/ui/compose/layouts/flow
12. FlowRowで実装
13. FlowRowで実装
14. FlowRowで実装 🥳
15. Flow layoutsを使う • 特徴 ◦ コンテナのスペースが不⾜すると アイテムが次の⾏に流れ込む ◦ チップやフィルタリング UIに最適 ◦ 100個未満の少量のアイテムに最適 • 注意点 ◦ 現時点ではExperimental https://developer.android.com/develop/ui/compose/layouts/flow
16. Flow layoutsを使う • 特徴 ◦ コンテナのスペースが不⾜すると アイテムが次の⾏に流れ込む ◦ チップやフィルタリング UIに最適 ◦ 100個未満の少量のアイテムに最適 • 注意点 ◦ 現時点ではExperimental https://developer.android.com/develop/ui/compose/layouts/flow
17. 振り返る • FlowRowおよびFlowColumnは、100個未満の少量のアイテムに最適 FlowRow and FlowColumn is perfect for a small number of items, less than 100 items. https://developer.android.com/jetpack/androidx/releases/compose-foundation
18. 振り返る • FlowRowおよびFlowColumnは、100個未満の少量のアイテムに最適 FlowRow and FlowColumn is perfect for a small number of items, less than 100 items. https://developer.android.com/jetpack/androidx/releases/compose-foundation 🤔 アイテム数が 多いとき‧‧
19. 遅延読み込みに対応した flow itemsを使う • ContextualFlowRow /Column ◦ androidx.compose.foundation:foundation-*:1.7.0 以上が必要
20. 引数を観察してみる • maxLines ◦ 表⽰⾏数を制限 • overflow ◦ itemがoverflow時に表⽰する内容を指定 ▪ Clip : デフォルト値 maxLinesを超えたものは⾮表⽰ ▪ Visible : maxLinesを超えていてもすべて表⽰ ▪ ExpandIndicator : 追加でアイテムを読み込むインジケーターやボタンを表⽰ ▪ ExpandOrCollapseIndicator : ExpandIndicator に「折りたたむ」オプションが追加
21. 使おうとしたところ‧‧‧ https://android-review.googlesource.com/c/platform/frameworks/support/+/3409998
22. 遅延読み込みに対応した flow itemsを使う • ContextualFlowRow /Column ◦ androidx.compose.foundation:foundation-*:1.7.0 以上が必要
23. 内容の抜粋 • ContextualFlowRow/Column ◦ 1.7で導⼊したがまだ安定化しておらず、実装が望ましくないため、Deprecated • FlowRow/Column ◦ 1.7でoverflow を引数に含むExperimentalなFlowRow/Columnを導⼊したがこれを Deprecatedとする ◦ 引数にoverflow を含まないFlowRow/Columnを今後は利⽤可能 ▪ overflowはデフォルト値のClipが適⽤される
24. 引数にoverflow を含まないFlowRow https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation-layout/src/commonMain/kotlin/androidx/compose/foundation/layout/FlowLayout.kt
25. 内容の抜粋 • ContextualFlowRow/Column ◦ 1.7で導⼊したがまだ安定化しておらず、実装が望ましくないため、Deprecated • FlowRow/Column ◦ 1.7でoverflow を引数に含むExperimentalなFlowRow/Columnを導⼊したがこれを Deprecatedとする ◦ 引数にoverflow を含まないFlowRow/Columnを今後は利⽤可能 ▪ overflowはデフォルト値のClipが適⽤される • 今後 ◦ ContextualFlowRow/Columnの多くのユースケースはFlowRow/Columnで実現可能 ◦ 完全に代替可能でもないため、それらのケースを別の⽅法で解決することも模索中
26. まとめ • 親ViewがScrollableなレイアウトにおいて、Grid表⽰を実装する際は Flow layoutsを試してみると良さそう • ContextualFlowRow/Columnの多くのユースケースは FlowRow/Columnで実現可能なため、FlowRow/Columnを利⽤しよう • 遅延読み込みを実装したい場合は今後に期待
27. 参考 • https://developer.android.com/develop/ui/compose/lists • https://developer.android.com/develop/ui/compose/layouts/flow • https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary.html • https://android-review.googlesource.com/c/platform/frameworks/support/+/3409998 • https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/found ation-layout/src/commonMain/kotlin/androidx/compose/foundation/layout/FlowLayout.kt