【超個人的】Google I/O 2022 Jetpack Composeまとめ

勤め先のAndroidチームでみんなでGoogle I/Oの動画見よう！ということになりみんなで見た。

視聴したプログラム

• https://io.google/2022/program/213421b6-9873-464f-9b36-38eeb232a854/intl/ja/
• https://io.google/2022/program/14bb63ef-2dd1-460a-9871-5f51ec1afec9/intl/ja/

derivedStateOf

• リストの最初のアイテムがTOPを過ぎた時に一番上まで戻るボタンを表示したいようなとき
• 頻繁に呼ばれるのでCompositionされる位置では書かないように注意
• derivedStateOfをrememberでラップする

val state = rememberLazyListState()
val showScrollToTopButton by remember {
  derivedStateOf {
     state.firstVisibleItemIndex > 0
  }
}

LazyGrid

• Compose 1.2で実装
• 垂直および水平なグリッドリストを実装できる
• horizontalArrangementなども指定できる
• sanflower にサンプルがある
  • sanflower compose化してたんだ…知らなかった

LazyVerticalGrid(
  columns = GridCells.Fixed(2)
) {
  items(data) {
     ...
  }
}

• GridCellsをカスタマイズすることできる

LazyVerticalGrid(
  columns = object:  GridCells {
     override fun Density.calculateCrossAxisCellSizes (
       availableSize: Int,
       spacing: Int
     ): List<Int>
  }
) {

• HeaderなどSpanしたい時

LazyVerticalGrid(
) {
  item(span = {
    GridItemSpan(maxLineSpan)
  })
}

Lazy Layout をカスタマイズ

• 1.2で実験的なAPIとしてLazy Layoutをカスタマイズ可能
• Lazy Layoutを内部的に利用してさまざまなユースケースに対応可能

animation

• 並び替え時にアニメーション可能
• itemsのkeyを指定して利用
• リストにアイテムを追加・削除時のアニメーションにも現在取り組んでいる

0Pixel

• リストの子に画像などがあり高さが動的に変わるようなケースで、画像読み込みまでに子が0Pixelの場合はリストはビューポート上で可能な限り子を読み込んでしまう
• それを回避するためには、プレースホルダーなどを利用したり、高さを与えておくといい

Beware of putting multiple elements in one item

• Lazyのitemに複数の要素を入れるのは注意が必要
• 複数の要素を1つのitemにまとめると1つのエンティティとして処理される
• 個別に構成できなくなるので、まとまりで測定されてしまうので過度に利用するとパフォーマンスが落ちる
• 1つのitemには1つの要素にとどめておくといい
• dividerなどは大して影響をあたえないのでアイテムと一緒に1itemでも問題は少ない

[まだ書き途中]