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
79
Composeで敷き詰めるUIを どうやって作るか
mobile.stmn #8 登壇資料 by カーキ
カーキ
October 25, 2024
Tweet
Share
More Decks by カーキ
See All by カーキ
好きから始まるローカルキャリア
takarkiz
0
7
TaskStackBuilderの紹介
takarkiz
0
30
Gemini API でアプリをつくりたい!
takarkiz
0
200
名古屋で勉強会を主催する3つの理由
takarkiz
0
200
GitHub Issue を利用したチケット管理
takarkiz
0
100
Gitの仕組みを理解しよう
takarkiz
0
110
Jetpack Compose でやってイイこと・ダメなこと
takarkiz
2
590
写真と動画の部分的なアクセス権について
takarkiz
0
250
もっとJetpackComposeと仲良くなる
takarkiz
0
320
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Practical Orchestrator
shlominoach
188
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
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ϨΠΞτΛ͍͚Α͏