Composeで敷き詰めるUIを どうやって作るか

mobile.stmn #8 登壇資料 by カーキ

Transcript

1. ΧʔΩ
   !NPCJMFTUNO
   
   <'SJ> $PNQPTFͰෑ͖٧ΊΔ6*Λ
   Ͳ͏΍ͬͯ࡞Δ͔ -B[Z(SJE
   WT
   'MPX
2. 1SPGJMF ΧʔΩ { 👨💻 : 株式会社スタメン ⚒ : Android Dev 🏞 : 𝕏 : @khaki_ngy 😍 : 映画 ・ 料理 ・ 読書 }
3. ಋೖ ҎԼͷΑ͏ͳσβΠϯ͕དྷͨ࣌ɺͲͷΑ͏ʹ࣮૷͠·͔͢ʁ
4. ಋೖ ཁૉΛෑ͖٧ΊΔϨΠΞ΢τ͸ͭ͋Δ 1 . Lazy〇〇Grid • LazyVerticalGrid, LazyHorizontalGrid 2 . Flow〇〇 • FlowRow, FlowColumn ͦΕͧΕͷίϯϙʔωϯτͰɺͰ͖Δ͜ͱɾͰ͖ͳ͍͜ͱ͕͋Δ
5. -B[Z(SJE جຊ৘ใ • Content ブロック中では LazyGridScope ブロックとなる • items() などが使 用 できる • LazyColumnなどのようにページを再利 用 しながら、遅延読み込みを 行 う • LazyVerticalGrid / LazyHorizontalGrid がある LazyVerticalGrid LazyHorizontalGrid          
6. -B[Z(SJE (SJE$FMMT৭ʑ • LazyGridの引数（columns, rows） • LazyVerticalGrid→columns, LazyHorizontalGrid→rows • GridCells の指定の仕 方 でレイアウト 方 法が変わる • GridCells.Fixed • GridCells.Adaptive • GridCells.FixedSize
7. (SJE$FMMT'JYFE ྻ౰ͨΓͷݸ਺Λࢦఆ • GridCells.Fixed(Int) ← 指定した数字の数だけ１列に表 示 • 要素の 大 きさはよしなに決まる GridCells.Fixed( 3 ) GridCells.Fixed( 5 )
8. (SJE$FMMT"EBQUJWF ཁૉݸ౰ͨΓͷେ͖͞Λࢦఆ • GridCells.Adaptive( 8 0 .dp) ← 指定した 大 きさで画 面 に 入 るだけ敷き詰める • あまりは要素間の余 白 になる GridCells.Adaptive( 1 2 0 .dp) GridCells.Adaptive( 4 0 .dp)
9. (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)で指定
10. άϦουҎ֎ͷཁૉΛೖΕΔ
11. -B[Z(SJEͰϔομʔΛදݱ͢Δ (SJE*UFN4QBOͷར༻ • item メソッドを使えば別の要素として 定義できそう
12. -B[Z(SJEͰϔομʔΛදݱ͢Δ (SJE*UFN4QBOͷར༻ • item メソッドを使えば別の要素として 定義できそう • Gridの要素として表現されてしまう😭
13. -B[Z(SJEͰϔομʔΛදݱ͢Δ (SJE*UFN4QBOͷར༻ • Itemの引数としてspanを定義する • Spanを変更することで要素の 大 きさを 個別に変更することができる
14. 'MPX
    ϨΠΞ΢τ جຊ৘ใ • ColumnやRowのコンテナのスペースが不 足 した時に、要素が次の 行 に流れ込 む性質を持ったコンポーネント • Lazyではないので、FlowRow in LazyColumn が可能🙆 • Chip コンポーネントを利 用 したタグ表 示 の利 用 が想定されている 現在はExperimentalLayoutApi 👈 LazyのFlowも存在する
15. 'MPX
    ϨΠΞ΢τ ෑ͖٧Ίํ • ColumnやRowのようにcontentのラム ダの中で、直接Composable関数を記述 できる • 以下２つの引数で敷き詰め 方 を変える ことができる • horizontalArrangement • verticalArrangement 👆公式ドキュメントが詳しいです
16. 'MPX
    ϨΠΞ΢τ
    ͷڧΈ • 並べる要素のサイズを可変 長 なものとし て並べることができる • まさに『コンテナのスペースが不 足 した時 に、要素が次の 行 に流れ込む性質を持ったコ ンポーネント』 • 要素の weight を 1f で指定すれば、下画 像のように 行 の中ではサイズが均 一 にす ることもできる
17. -B[Z(SJEͱ'MPXϨΠΞ΢τΛ
    ࢖͍෼͚Δ
18. -B[Z(SJEͱ'MPXϨΠΞ΢τͷಛ௃ • LazyGrid は、タイル状に物を敷き詰めるのに適したレイアウトコンポーネン ト • Flowレイアウトは、要素を並べて必要があれば折り返しを 行 うのに適したレ イアウトコンポーネント
19. ͦΕͧΕͷੑ࣭Λແࢹ͢Δͱɺɺ -B[Z(SJEͰ'MPXͬΆ͍λάͷϨΠΞ΢τΛ࡞ͬͯΈΔ • 要素の幅が固定になってしまう😭 要素のサイズが可変 長 の場合は、Flowレイアウトが適切
20. -B[Z(SJE
    PS
    'MPX3PX
    ͲͪΒ͕ద੾Ͱ͠ΐ͏͔ʁ • LazyGrid では先述の通り、他のグリッド表 示 したく ないものも含めてレイアウトが可能 • スクロール可能な画 面 で、どこを遅延表 示 させたいか によって変わる • LazyColumn + FlowRow • LazyVerticalGrid + Column ಉҰํ޲ͷ
    MB[Z
    JO
    MB[Z
    ͸ϨΠΞ΢τͰ͖ͳ͍
21. -B[Z(SJE͕޲͍͍ͯΔέʔε • スクロール 方 向と交差する 方 向の要素のサイズが固定である • グリッドの要素を遅延して表 示 したい要件がある • Experimental な機能を利 用 できない
22. 'MPXϨΠΞ΢τ͕޲͍͍ͯΔέʔε • 要素の 大 きさがものによって変わる • グリッドを遅延して表 示 させる要件がない • 画 面 の中の1要素としてグリッド表 示 を 行 いたい場合 ← LazyGridの場合、グリッドの範囲だけ背景 色 を 変えることができないので、この画像のような要件 ではFlowでやるしかない
23. -B[Z(SJEͱ'MPXϨΠΞ΢τͰ͸
    ͦ΋ͦ΋ࢥ૝͕ҧ͏
24. ࢥ૝Λཧղ্ͨ͠Ͱɺ-B[Z(SJEͱ 'MPXϨΠΞ΢τΛ࢖͍෼͚Α͏