Grid表⽰のレイアウトで Flow layoutsを使う Mobile勉強会 ウォンテッドリー × チームラボ × Sansan #18 〜新技術の導⼊〜 @cffYoHa

⾃⼰紹介 ● @cffYoHa(ようは) ● Fenrir Inc. ○ Android エンジニア ● DroidKaigi Staff

実現したいレイアウト ● スタンプラリー台紙のようなレイアウト

実現したいレイアウト ● スタンプラリー台紙のようなレイアウト ○ 左から右下に向かって敷き詰める

実現したいレイアウト ● スタンプラリー台紙のようなレイアウト ○ 左から右下に向かって敷き詰める ○ 各アイテムの台紙部分の形は固定

実現したいレイアウト ● スタンプラリー台紙のようなレイアウト ○ 左から右下に向かって敷き詰める ○ 各アイテムの台紙部分の形は固定 ○ スクロール可能な画⾯のUI要素として追加

なぜ話すのか ● 格⼦のレイアウトはLazy gridsが最適だと決めつけていた ● Grid表⽰の定番の選択肢であるLazy gridsではうまくいかなかった

LazyVerticalGridで実装してみる

LazyVerticalGridで実装してみる 右端に余分なスペースが残ってしまう

そもそも ● 親要素のLazyColumnとネストが発⽣しているから󰢃 ● ビルドせずにUIを作り続けたせいで気づくのに遅れた。。。

Flow layoutsを使う ● 特徴 ○ コンテナのスペースが不⾜すると アイテムが次の⾏に流れ込む ○ チップやフィルタリング UIに最適 ○ 100個未満の少量のアイテムに最適 ● 注意点 ○ 現時点ではExperimental https://developer.android.com/develop/ui/compose/layouts/flow

FlowRowで実装

FlowRowで実装

FlowRowで実装 🥳

Flow layoutsを使う ● 特徴 ○ コンテナのスペースが不⾜すると アイテムが次の⾏に流れ込む ○ チップやフィルタリング UIに最適 ○ 100個未満の少量のアイテムに最適 ● 注意点 ○ 現時点ではExperimental https://developer.android.com/develop/ui/compose/layouts/flow

Flow layoutsを使う ● 特徴 ○ コンテナのスペースが不⾜すると アイテムが次の⾏に流れ込む ○ チップやフィルタリング UIに最適 ○ 100個未満の少量のアイテムに最適 ● 注意点 ○ 現時点ではExperimental https://developer.android.com/develop/ui/compose/layouts/flow

振り返る ● 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

振り返る ● 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 🤔 アイテム数が 多いとき‧‧

遅延読み込みに対応した flow itemsを使う ● ContextualFlowRow /Column ○ androidx.compose.foundation:foundation-*:1.7.0 以上が必要

引数を観察してみる ● maxLines ○ 表⽰⾏数を制限 ● overflow ○ itemがoverflow時に表⽰する内容を指定 ■ Clip : デフォルト値 maxLinesを超えたものは⾮表⽰ ■ Visible : maxLinesを超えていてもすべて表⽰ ■ ExpandIndicator : 追加でアイテムを読み込むインジケーターやボタンを表⽰ ■ ExpandOrCollapseIndicator : ExpandIndicator に「折りたたむ」オプションが追加

使おうとしたところ‧‧‧ https://android-review.googlesource.com/c/platform/frameworks/support/+/3409998

遅延読み込みに対応した flow itemsを使う ● ContextualFlowRow /Column ○ androidx.compose.foundation:foundation-*:1.7.0 以上が必要

内容の抜粋 ● ContextualFlowRow/Column ○ 1.7で導⼊したがまだ安定化しておらず、実装が望ましくないため、Deprecated ● FlowRow/Column ○ 1.7でoverflow を引数に含むExperimentalなFlowRow/Columnを導⼊したがこれを Deprecatedとする ○ 引数にoverflow を含まないFlowRow/Columnを今後は利⽤可能 ■ overflowはデフォルト値のClipが適⽤される

引数に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

内容の抜粋 ● ContextualFlowRow/Column ○ 1.7で導⼊したがまだ安定化しておらず、実装が望ましくないため、Deprecated ● FlowRow/Column ○ 1.7でoverflow を引数に含むExperimentalなFlowRow/Columnを導⼊したがこれを Deprecatedとする ○ 引数にoverflow を含まないFlowRow/Columnを今後は利⽤可能 ■ overflowはデフォルト値のClipが適⽤される ● 今後 ○ ContextualFlowRow/Columnの多くのユースケースはFlowRow/Columnで実現可能 ○ 完全に代替可能でもないため、それらのケースを別の⽅法で解決することも模索中

まとめ ● 親ViewがScrollableなレイアウトにおいて、Grid表⽰を実装する際は Flow layoutsを試してみると良さそう ● ContextualFlowRow/Columnの多くのユースケースは FlowRow/Columnで実現可能なため、FlowRow/Columnを利⽤しよう ● 遅延読み込みを実装したい場合は今後に期待

参考 ● 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