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
320
Grid表示のレイアウトで Flow layoutsを使う
Mobile勉強会 ウォンテッドリー × チームラボ × Sansan #18 〜新技術の導入〜
cffYoHa
January 29, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
Geminiとv0による高速プロトタイピング
shinya337
0
250
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
140
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.7k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
240
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.7k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
20
6.8k
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.1k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
240
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
360
AI導入の理想と現実~コストと浸透〜
oprstchn
0
190
Claude Code に プロジェクト管理やらせたみた
unson
5
2.4k
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
210
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Being A Developer After 40
akosma
90
590k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GitHub's CSS Performance
jonrohan
1031
460k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Code Reviewing Like a Champion
maltzj
524
40k
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