Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Grid表示のレイアウトで Flow layoutsを使う
Search
cffYoHa
January 29, 2025
Technology
1
350
Grid表示のレイアウトで Flow layoutsを使う
Mobile勉強会 ウォンテッドリー × チームラボ × Sansan #18 〜新技術の導入〜
cffYoHa
January 29, 2025
Tweet
Share
More Decks by cffYoHa
See All by cffYoHa
土掘るHaptics
cffyoha
0
23
Other Decks in Technology
See All in Technology
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
200
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
4.9k
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
140
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
270
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
160
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
170
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
500
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
180
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Music & Morning Musume
bryan
46
6.8k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Cult of Friendly URLs
andyhume
79
6.6k
Automating Front-end Workflow
addyosmani
1371
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
Transcript
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