Dive into lazy stacks and scrolling with SwiftUI

Dive into lazy stacks and scrolling with SwiftUI 集まれSwift好き！Swift愛好会スピンオフ WWDC26セッション要約会 🔰初談義

ibuki (@ibuibukiki) ・LINEヤフー株式会社 (新卒2年⽬) ・Yahoo!フリマのiOSエンジニア・ユーザー体験にこだわりたい！ Swift愛好会初参加です！

このセッションを選んだ理由 Yahoo!フリマには、・⾃分が出品している商品を⼀覧で⾒る画⾯・まとめ買いできる商品を⼀覧から探す画⾯など、商品情報を並べるスクロール画⾯がたくさんある UIKitからSwiftUIへの移⾏が進む中「より良いスクロール体験を実現するための⽅法を学びたい」と考えた

VStack vs LazyVStack LazyVStack の⽅がメモリ効率がよく、⼤量のデータを描画するのに適している VStack すべてのViewを⽣成 LazyVStack 表⽰に必要なViewだけを⽣成

LazyVStack の描画処理 LazyVStack全体 View この端末の画⾯に描画

上から順番にViewをレイアウト LazyVStack の描画処理

LazyVStack の描画処理上から順番にViewをレイアウト画⾯の領域が埋まるとストップ

画⾯をスクロールすると LazyVStack の描画処理

画⾯をスクロールするとまたViewを追加し、表⽰領域を埋める LazyVStack の描画処理

LazyVStack が知っていること正確に知っているのは・表⽰中のView ・その⾼さそれ以外は推定して動いているここだけ

LazyVStack が推定していること全体の⾼さ表⽰されているViewの平均の⾼さ × Viewの数スクロール位置 (OffSet) スクロール →
今のViewの相対位置を取得 → 推定値を更新 (繰り返し)

Appleが伝えたかったこと LazyStackの推定に依存しないこと LazyStackの推定を壊さないこと

Appleが勧める設計 1. OffSetの推定に頼らないこと 2. Viewの数を途中で変えないこと 3. Viewの⾼さを途中で変えないこと 4. onAppearに初期化処理を⼊れないこと

1. Offsetの推定に頼らないこと「100ptスクロールしたらボタンを消す」 OK: 絶対位置ではなく、Viewの相対位置を使う contentOffsetは推定値なので挙動が不安定になってしまう

2. Viewの数を途中で変えないこと「ここのViewは条件を満たす時だけ出したい」 OK: LazyStackに渡す前にフィルターをかける Viewの数が変わるとindexがズレるため、推定とずれてしまう

3. Viewの⾼さを途中で変えないこと「テキストの⻑さに合わせて画像の⾼さも変えたい」 OK: レイアウトは init() 時に決める描画してからレイアウトをやり直すので推定とずれてしまう

4. onAppearに初期化処理を⼊れないこと LazyStackは表⽰前のViewを事前に評価するPrefetch を⾏っており、これによって滑らかなスクロールが可能になる • body: 表⽰前に評価されることがある • onAppear:
表⽰後に呼ばれる表⽰前にできる準備を onAppear に書くと Prefetch を活かせない表⽰前にできる初期化は init で⾏う

まとめ・LazyStackが正確に知っているのは画⾯内のViewだけ・全体の⾼さもスクロール位置も推定しているだけで、完全に正確ではない・「推定に依存しない」「推定を壊さない」を意識することで安定したスクロール体験を維持できる

Dive into lazy stacks and scrolling with SwiftUI

Dive into lazy stacks and scrolling with SwiftUI

ibuki

More Decks by ibuki

Other Decks in Programming

Featured

Transcript