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
Composeで敷き詰めるUIを どうやって作るか
Search
カーキ
October 25, 2024
0
65
Composeで敷き詰めるUIを どうやって作るか
mobile.stmn #8 登壇資料 by カーキ
カーキ
October 25, 2024
Tweet
Share
More Decks by カーキ
See All by カーキ
TaskStackBuilderの紹介
takarkiz
0
24
Gemini API でアプリをつくりたい!
takarkiz
0
150
名古屋で勉強会を主催する3つの理由
takarkiz
0
170
GitHub Issue を利用したチケット管理
takarkiz
0
80
Gitの仕組みを理解しよう
takarkiz
0
84
Jetpack Compose でやってイイこと・ダメなこと
takarkiz
2
540
写真と動画の部分的なアクセス権について
takarkiz
0
230
もっとJetpackComposeと仲良くなる
takarkiz
0
290
プログラミングを学ぶこと・教えること
takarkiz
0
72
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
12k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
GitHub's CSS Performance
jonrohan
1030
460k
Typedesign – Prime Four
hannesfritz
40
2.4k
Embracing the Ebb and Flow
colly
84
4.5k
We Have a Design System, Now What?
morganepeng
51
7.3k
Docker and Python
trallard
42
3.1k
BBQ
matthewcrist
85
9.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Scaling GitHub
holman
458
140k
Designing Experiences People Love
moore
138
23k
Transcript
ΧʔΩ!NPCJMFTUNO<'SJ> $PNQPTFͰෑ͖٧ΊΔ6*Λ Ͳ͏ͬͯ࡞Δ͔ -B[Z(SJEWT'MPX
1SPGJMF ΧʔΩ { 👨💻 : 株式会社スタメン ⚒ : Android Dev
🏞 : 𝕏 : @khaki_ngy 😍 : 映画 ・ 料理 ・ 読書 }
ಋೖ ҎԼͷΑ͏ͳσβΠϯ͕དྷͨ࣌ɺͲͷΑ͏ʹ࣮͠·͔͢ʁ
ಋೖ ཁૉΛෑ͖٧ΊΔϨΠΞτͭ͋Δ 1 . Lazy〇〇Grid • LazyVerticalGrid, LazyHorizontalGrid 2 .
Flow〇〇 • FlowRow, FlowColumn ͦΕͧΕͷίϯϙʔωϯτͰɺͰ͖Δ͜ͱɾͰ͖ͳ͍͜ͱ͕͋Δ
-B[Z(SJE جຊใ • Content ブロック中では LazyGridScope ブロックとなる • items() などが使
用 できる • LazyColumnなどのようにページを再利 用 しながら、遅延読み込みを 行 う • LazyVerticalGrid / LazyHorizontalGrid がある LazyVerticalGrid LazyHorizontalGrid
-B[Z(SJE (SJE$FMMT৭ʑ • LazyGridの引数(columns, rows) • LazyVerticalGrid→columns, LazyHorizontalGrid→rows • GridCells
の指定の仕 方 でレイアウト 方 法が変わる • GridCells.Fixed • GridCells.Adaptive • GridCells.FixedSize
(SJE$FMMT'JYFE ྻͨΓͷݸΛࢦఆ • GridCells.Fixed(Int) ← 指定した数字の数だけ1列に表 示 • 要素の 大
きさはよしなに決まる GridCells.Fixed( 3 ) GridCells.Fixed( 5 )
(SJE$FMMT"EBQUJWF ཁૉݸͨΓͷେ͖͞Λࢦఆ • GridCells.Adaptive( 8 0 .dp) ← 指定した 大
きさで画 面 に 入 るだけ敷き詰める • あまりは要素間の余 白 になる GridCells.Adaptive( 1 2 0 .dp) GridCells.Adaptive( 4 0 .dp)
(SJE$FMMT'JYFE4J[F ཁૉݸͨΓͷେ͖͞Λࢦఆ • GridCells.FixedSize( 8 0 .dp) ← 指定した 大
きさで画 面 に 入 るだけ敷き詰める • あまりは Arrangement.Horizontal の指定に従って処理される GridCells.FixedSize( 1 2 0 .dp) GridCells.FixedSize( 4 0 .dp) この例では Arrangement.spaceBy( 8 .dp)で指定
άϦουҎ֎ͷཁૉΛೖΕΔ
-B[Z(SJEͰϔομʔΛදݱ͢Δ (SJE*UFN4QBOͷར༻ • item メソッドを使えば別の要素として 定義できそう
-B[Z(SJEͰϔομʔΛදݱ͢Δ (SJE*UFN4QBOͷར༻ • item メソッドを使えば別の要素として 定義できそう • Gridの要素として表現されてしまう😭
-B[Z(SJEͰϔομʔΛදݱ͢Δ (SJE*UFN4QBOͷར༻ • Itemの引数としてspanを定義する • Spanを変更することで要素の 大 きさを 個別に変更することができる
'MPXϨΠΞτ جຊใ • ColumnやRowのコンテナのスペースが不 足 した時に、要素が次の 行 に流れ込 む性質を持ったコンポーネント •
Lazyではないので、FlowRow in LazyColumn が可能🙆 • Chip コンポーネントを利 用 したタグ表 示 の利 用 が想定されている 現在はExperimentalLayoutApi 👈 LazyのFlowも存在する
'MPXϨΠΞτ ෑ͖٧Ίํ • ColumnやRowのようにcontentのラム ダの中で、直接Composable関数を記述 できる • 以下2つの引数で敷き詰め 方 を変える
ことができる • horizontalArrangement • verticalArrangement 👆公式ドキュメントが詳しいです
'MPXϨΠΞτͷڧΈ • 並べる要素のサイズを可変 長 なものとし て並べることができる • まさに『コンテナのスペースが不 足 した時
に、要素が次の 行 に流れ込む性質を持ったコ ンポーネント』 • 要素の weight を 1f で指定すれば、下画 像のように 行 の中ではサイズが均 一 にす ることもできる
-B[Z(SJEͱ'MPXϨΠΞτΛ ͍͚Δ
-B[Z(SJEͱ'MPXϨΠΞτͷಛ • LazyGrid は、タイル状に物を敷き詰めるのに適したレイアウトコンポーネン ト • Flowレイアウトは、要素を並べて必要があれば折り返しを 行 うのに適したレ イアウトコンポーネント
ͦΕͧΕͷੑ࣭Λແࢹ͢Δͱɺɺ -B[Z(SJEͰ'MPXͬΆ͍λάͷϨΠΞτΛ࡞ͬͯΈΔ • 要素の幅が固定になってしまう😭 要素のサイズが可変 長 の場合は、Flowレイアウトが適切
-B[Z(SJEPS'MPX3PX ͲͪΒ͕దͰ͠ΐ͏͔ʁ • LazyGrid では先述の通り、他のグリッド表 示 したく ないものも含めてレイアウトが可能 • スクロール可能な画
面 で、どこを遅延表 示 させたいか によって変わる • LazyColumn + FlowRow • LazyVerticalGrid + Column ಉҰํͷMB[ZJOMB[ZϨΠΞτͰ͖ͳ͍
-B[Z(SJE͕͍͍ͯΔέʔε • スクロール 方 向と交差する 方 向の要素のサイズが固定である • グリッドの要素を遅延して表 示
したい要件がある • Experimental な機能を利 用 できない
'MPXϨΠΞτ͕͍͍ͯΔέʔε • 要素の 大 きさがものによって変わる • グリッドを遅延して表 示 させる要件がない •
画 面 の中の1要素としてグリッド表 示 を 行 いたい場合 ← LazyGridの場合、グリッドの範囲だけ背景 色 を 変えることができないので、この画像のような要件 ではFlowでやるしかない
-B[Z(SJEͱ'MPXϨΠΞτͰ ͦͦࢥ͕ҧ͏
ࢥΛཧղ্ͨ͠Ͱɺ-B[Z(SJEͱ 'MPXϨΠΞτΛ͍͚Α͏