Lazy layouts in Compose
URL:https://www.youtube.com/watch?v=1ANt65eoNhQ
一言で表すと
ComposeのLazyLayoutsについていろいろ
概要
LazyLayoutsとは
RecyclerViewのようなもの
スクロール可能なアイテムを一部のみ表示することができる
アイテムが多いときにパフォーマンスが向上する
LazyLayoutsの種類(Compose 1.2)
LazyColumn
LazyRow
Lazy grids
Vertical / Horizontal
RecyclerViewと比べてコード量が減る
Mori Atsushi.icon これが助かる
使い方
itemまたはitemsで追加していく
itemsIndexedでindex付きに追加できる
スクロール領域内のpaddingはcontent paddingで指定する
horizontalArrangmentでspacedByを指定すると、アイテムの間隔を指定できる
rememberLazyListStateを使うとスクロール位置等が監視できる
firstVisibilityItemIndex: リストの一番上に見えてるアイテム
頻繁に更新されることに注意する
不要なrecomposeが走ることに注意する
rememberとderivedStateOfを使う
scrollToItem, animateScrollToItemでスクロールできる
suspend functionであることに注意
rememberCoroutineScopeをつかってCoroutineScopeを手に入れる
Lazy grids
compose 1.2でstableになった
LazyVerticalGridとLazyHorizontalGridがある
GridCells.Fixedでカラム数を指定する
アイテムはLazyColumnと同じようにかける
verticalArrangemt, horizontalArrangementを個別に指定でき、アイテムの間隔を指定できる
StateはLazyGridStateになる
GridCells.Adaptiveでアイテム最小サイズを指定してグリッド数を決めることができる
タブレット対応等に便利
Mori Atsushi.icon これ嬉しい
GridCellsを実装すればさらに複雑なGridも組むことができる
https://scrapbox.io/files/6284e54dff3fe5001ddcc9cd.png
GridItemSpanを使えば突き抜けたGridが表現できる
maxLineSpan: grid数全体
maxCurrentLineSpan: 残りのgridの数
https://scrapbox.io/files/6284e5e8aecd02001d97b79d.png
Nabe.iconこれを待っていた
LazyLayout
独自のレイアウトマネージャーを実装するexperimentalなAPI
ScalingLazyColumn (for wear)
Staggered Grid (not available yet)
アイテムのアニメーション
Modifier.animateItemPlacement()を指定すればアニメーションする
gridでも有効
PrimitiveかPerceableなkeyを必ず指定してね
Nabe.iconBundleに突っ込むらしいですが、ここ型がAnyなのでミスってクラスとか設定しそうになる
表示時/非表示時のアニメーションも実装中
Mori Atsushi.icon これはやくほしいです…
tips
0-pixelのアイテムを使用しない
画像の読み込み中等に注意して
0-pixelだと全てのアイテムを読み込んでしまってLazyにならない
Modifierでサイズを予め指定する等
プレースホルダーとして表示するとより良い
同じ方向のスクロールをネストしない
これはexceptionを吐く
https://scrapbox.io/files/6284e84d4cb9d3001d41bfc0.png
RecyclerViewではできたが、パフォーマンス上の問題があった
全部のアイテムを読み込んでしまう
一つのLazyListにしてitemで表現する
もしくは子スクロールViewを固定サイズにする
itemの中に複数アイテムを置ける
https://scrapbox.io/files/6284e9002e01d5001d19efe6.png
問題なく縦に並ぶ
初期化を一緒にしたい場合はこれを使う
パフォーマンスに影響がでる場合がある
scrollのindexはitemのほうになる
Dividerとかでは便利
複雑な配置
Arrangmentを自分で実装することで複雑なレイアウトもできる
リストの数が少ないときでもfooterは一番下に配置する方法
https://scrapbox.io/files/6284e9a21ecbe90021077923.png
パフォーマンス
R8を有効にする
contentTypeを使うことで再利用性が高まる
気になるポイント
gridでセクションを作りたいんだけど、僕だけ…?
メモ
コメント