Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
LazyVerticalGridに学ぶ 非スクローラブルなグリッドの作り方
aosa4054
November 17, 2021
Programming
0
380
LazyVerticalGridに学ぶ 非スクローラブルなグリッドの作り方
aosa4054
November 17, 2021
Tweet
Share
More Decks by aosa4054
See All by aosa4054
Tips on DataBinding in RecyclerView
aosa4054
0
150
実用 Picture in Picture
aosa4054
2
570
自作アプリのアイコンを作った話
aosa4054
0
130
Other Decks in Programming
See All in Programming
Custom Design Systems in Compose UI
rharter
5
510
シェーダー氷山発掘記
logilabo
0
140
React NativeアプリにStorybook CSF3.0を導入しよう
texmeijin
0
150
git on intellij
hiroto_kitamura
0
160
Value and Record Types
hschwentner
0
540
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
1.9k
Voiceflowではじめる音声アプリ・チャットボット開発〜2022年版〜 / Introduction to Developing Voice Apps & Chatbots with Voiceflow
kun432
0
170
Node-RED 3.0 新機能紹介
utaani
0
110
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
350
Get Ready for Jakarta EE 10
ivargrimstad
0
1.5k
即、New Relic / New Relic NOW!
uzulla
0
270
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
170
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Typedesign – Prime Four
hannesfritz
33
1.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Unsuck your backbone
ammeep
659
55k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Support Driven Design
roundedbygravity
86
8.5k
Embracing the Ebb and Flow
colly
73
3.4k
Six Lessons from altMBA
skipperchong
14
1.4k
Transcript
LazyVerticalGridʹֶͿ ඇεΫϩʔϥϒϧͳάϦου ͷ࡞Γํ potatotips #76 Shota Ara
LazyVerticalGrid • Jetpack Composeʹͯར༻Ͱ͖Δ άϦουදࣔͷComposable • σϑΥϧτͰεΫϩʔϧʹରԠ
LazyVerticalGridͷ͍ʹ͘͞ • ൃද࣌ʢ2021/11/17ʣͰExperimental • LazyVerticalGridࣗମ͕εΫϩʔϥϒϧͳComposableͰ͋Δ
LazyVerticalGridͷ ͍ʹ͘͞ LazyVerticalGridࣗମ͕εΫϩʔϧ ՄೳͳͷͰɺ ϦετͷҰ෦͕άϦου ͳUIͷදݱ͕Ͱ͖ͳ͍ɻ
LazyVerticalGridΛࢀߟʹComposableΛ࡞Δ • Experimentalͱ͍͑ެࣜͷࢀߟ࣮͕͋Δɻ • ComposableͳͲஔ͖͑Մೳͳؔʹ͓͚ͯ͠ ͠StableͳAPI͕Ճ͞Εͨͱ͖ͦΕΛஔ͖͑Δ͚ͩͰྑ͍ɻ
LazyVerticalGridͷ෦ॲཧ
LazyVerticalGridͷ෦ॲཧ val rows = (scope.totalSize + nColumns - 1) /
nColumns LazyColumn( /* modifierpaddingͳͲ֎෦͔Β͖ͯͨ͠ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } }
LazyVerticalGridͷ෦ॲཧ val rows = (scope.totalSize + nColumns - 1) /
nColumns LazyColumn( /* modifierpaddingͳͲ֎෦͔Β͖ͯͨ͠ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } } ͞ΕͨΞΠςϜͷαΠζͱΧϥϜ͔Β ߦΛܭࢉ͢Δ
LazyVerticalGridͷ෦ॲཧ val rows = (scope.totalSize + nColumns - 1) /
nColumns LazyColumn( /* modifierpaddingͳͲ֎෦͔Β͖ͯͨ͠ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } } ෦ͰLazyColumnΛ͍࣋ͬͯΔ ʹ εΫϩʔϧͰ͖Δਖ਼ମ
LazyVerticalGridͷ෦ॲཧ val rows = (scope.totalSize + nColumns - 1) /
nColumns LazyColumn( /* modifierpaddingͳͲ֎෦͔Β͖ͯͨ͠ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } } ҰߦҰߦΛRowʹͯ͠itemsͰ ͦΕΛॎʹੵΜͰߦ͘ॲཧ
͜ΕΛࢀߟʹ…
LazyVerticalGridΛࢀߟʹͨ͠ඇεΫϩʔϧ൛ val rows = (items.size + columns - 1) /
columns Column( /* modifierpaddingͳͲ֎෦͔Β͖ͯͨ͠ͷΛόέπϦϨʔ */ ) { for (rowIndex in 0..rows) { Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } }
αϯϓϧ࣮ LazyColumn { item { NonScrollableGrid( column = 3, items
= myItems ) { /* ֤ΞΠςϜͷComposable */ } } }
LazyColumn { item { NonScrollableGrid( column = 3, items
= (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } }
LazyColumn { item { NonScrollableGrid( column = 3, items
= (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } } 0…1000😇
LazyColumn { item { NonScrollableGrid( column = 3, items
= (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } } item͕composableؔ ݺͼग़͠ͷ୯Ґ
վળ
fun <T> LazyListScope.gridItems( columns: Int, items: List<T>, gridItem: @Composable (T)
-> Unit ) { val rows = (items.size + columns - 1) / columns items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { val itemIndex = rowIndex * columns + columnIndex if (itemIndex < items.size) { Box( modifier = Modifier.weight(1f, fill = true), propagateMinConstraints = true ) { gridItem.invoke(items[itemIndex]) } } else { Spacer(Modifier.weight(1f, fill = true)) } } } } }
LazyColumn { gridItems( column = 3, items = (0..1000).toList()
) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } }
LazyColumn { gridItems( column = 3, items = (0..1000).toList()
) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } 0…24
·ͱΊ
·ͱΊ • Jetpack ComposeʹάϦουஔͷComposable͕༻ҙͯ͋͠Δɻ • ͍ͨͩ͠ʹ͍͘໘ɻ • ෦ίʔυൺֱతγϯϓϧͳͷͰ͜ΕΛࢀߟʹܨ͗ͷ࣮͕Մೳɻ • LazyColumnͷඳըͷ୯Ґ֤itemͰ͋Δɻ