超高速なリストとコレクションビューの構築

超高速なリストとコレクションビューの構築

スムーズなスクロール型リストおよびコレクションビューの構築: セルのライフサイクルを確認し、その知識を応用して荒いスクロール、フレームの欠落をなくす方法を確認します。また、画像読み込みの最適化やセルの自動プリフェッチにより、全体的なスクロール体験を向上させ、コストのかかる不具合を回避する方法も紹介しますこのビデオを最大限に活かしていただくためには、diffableデータソースとコンポジションレイアウトの基礎を理解していることが推奨されます。

リソース
関連ビデオ

WWDC21
- UIKitの新機能
WWDC20
- Diffable Data Sourcesの応用
- UICollectionView 上級編
Tech Talks
- UIアニメーションの滞りおよびレンダーループに対する検討
WWDC16
- What's New in UICollectionView in iOS 10
ダウンロード

♪ ♪ こんにちは UIKit teamのエンジニアのAdityaですコレクションビューなどのリスト形式は多くのAppのデザインの基礎にあり滑らかな動きが気持ちいいですリストやコレクションを高速スクロールする方法を紹介し旅行先候補の写真を閲覧できるAppを作る仮定で説明していきたいと思います一見ではシンプルそうですね写真と文字がいくつかありますこの動画ではセットアップの方法や期待されるような十分なパフォーマンスを得る方法を説明しますまずはdiffableデータソースやセル登録などのAPIを使った強い基礎をつくる方法を伝授し次にコレクションビューのライフサイクルについて説明します次にスクロールの引っかかりの原因とプリフェッチによる解決法最後に非同期読込みのコンテンツを含むセルの更新法とデバイス共通のスクロールを提供する方法を PatrickがUI Image API にて説明しますはいでは Appがデータを構成する過程を見ていきます表示する投稿を検索しますが投稿はそれぞれ構造体の DestinationPostで表され構造体はidenfiableに準拠つまり識別子を保持する IDプロパティがあります各DestinationPostに識別子があり他のプロパティが変わっても不変です Diffableソースはオブジェクト自体でなく識別子を保持するのですこのAppではdiffableソース設定に IDプロパティを使い DestinationPostは使いませんこれがAppのdiffableソース DestinationPost.IDタイプでアイテム識別子を表します Sectionタイプは１ケースのENUM １つのセクションしかないためですデータソースの設定では空のスナップショットを作りメインセクションに付加バッキングストアから投稿をフェッチしそれに識別子をアペンドします識別子は不変なためこうすれば DestinationPostに変更がある場合もdiffable上の表現は変わらず保てます最後にスナップショットをデータソースに適用します iOS15以前はアニメーション無しのスナップショットは内部でreloadDataに翻訳されましたがセルを全て除去し再構築する必要が生じるためパフォーマンスに悪影響がありました今後はアニメーション無しのスナップショットでも差分を適用するだけで余計な無駄はありませんまたdiffableソースも新しいメソッド reconfigureItemsを導入し可視セルの更新が容易になりました後で動作を説明しますまずはソースからセルにデータを読み込みましょうセル登録は各セルの設定を一つの場所に集めdiffableソースの識別子にも手が届きやすくしてくれます UICollectionViewはセル登録の度に再利用キューを準備するので一セルごとに登録は一度限りにしましょうこれは簡便化したセル登録ですパスされたpostIDは DestinationPostとオブジェクト内の画像の入手に使いセルのタイトル画像を設定するときには DPのpropertyを使います登録した後利用するにはソース内のセルプロバイダより紫色一番下のルーチンを呼び出しますセルプロバイダを外部よりまず登録しそれから内部で使用しますプロバイダから登録するとコレクションビューが再利用できないのでこれはパフォーマンス上大事なポイントですセル設定ができるようになったらセル設定の順序ライフサイクルを見ていきましょうセルの寿命には２つの段階がありそれは準備段階とディスプレイ段階です準備段階最初のステップはセルをフェッチすること UICollectionViewは必要な度にソースにセルを依頼します diffableソースの場合セルプロバイダを走らせ結果を取得します実行中登録情報をつかい新セルをデキューするよう依頼再利用プールにあるばあいは prepareForReuseをコールしセルをデキューします再利用プールが空の場合は新しいセルを設定しますその後設定ハンドラーにセルを登録状態よりパスアイテム識別子と索引パスをもとにセル表示の準備をしますセルは次の手順のためにビューに戻します
ビューはレイアウト設定をセルに問いセルのサイズを調整しますこれでセルの準備は完了第二段階ディスプレイに映ります willDisplayCellをデリゲートにてコールしセルを可視化スクリーンに映りました映っている間はライフサイクルの動きはありません画面から外れると didEndDisplayingがコールされ再利用プールに戻りますそこからは再度デキューも可能繰り替えし表示ができますではAppを使ってみましょうペルーのクスコカリブ海のセントルシアですねスクロールして他を見ようとしますがあまり滑らかな動きではありませんね
このスクロール中の休止はヒッチといいますヒッチの原因を探るにはまず画像切り替えの仕組みを見てみましょうフレームごとにタップなどの出来事が報告されそれに応じビューやレイヤーが更新されます例えば拡大中はスクロールビューの contentOffsetが全てのビューの位置を動かしますこのような変化に応じビューやレイヤーはレイアウトを実行しこの過程はコミットといいますレンダリングサーバーにレイヤーツリーを送信しますフレームはコミットをその時点までに終わらせるコミット締切がありコミットの制限時間はAppのリフレッシュ速度により変わります例えば120Hzという高速設定のiPad Proだと 60HzのiPhoneに比べ締切がきつくなりますこれはコレクションまたはテーブルビューのコミットの一例ですが新しいセルが現れる時はセルの設定・レイアウト既存のセルが画面を移動するだけのロスタイムがありコミットはありません後者の場合新セルが不要でフレーム速度も速くなりますやがて画面は新セルが映るまでスクロールされ同パターンを繰り返しますでは以前お見せしたヒッチはなぜ生じるのかコミットが長くかかり締切をすぎると目的のフレームに更新が適応できなくなり新しいフレームが出来るまで以前のフレームを表示しますがこれがヒッチの原因ですスクロールの中断として反映されます
コミットその他のヒッチについては「Explore UI animation hitches」をご覧ください UICollectionViewと UITableViewha iOS15で新たなプリフェッチ方式を導入
スクロール中にヒッチが起こる例にまた話を戻しますがここで重要なのはセルが毎フレーム必要な訳ではないことコミット時間が短く仕事も少ないフレームがいくつかあります iOS 15のプリフェッチは余分な時間を活用し短いコミットの間に次のセルを準備
セルが必要となれば映し出すだけになりますプリフェッチのセルが速く処理できるのは前もって読み込みをこなしていたからですヒッチで画面が止まる時間を空き時間に移すわけですフライングができたのでヒッチも回避できましたコミット一つ一つに注目し仕組みを詳しく見ていきましょうプリフェッチの前に現フレームのコミットを実行新たなセルはないので速く終わり締め切りまで時間を残しています次のフレームまで待つのではなく iOS15ではこの好機をとらえ余分な時間で次のセルをフェッチできますで次が肝心なところですプリフェッチしたセルは重いため通常よりも遅くコミットを始めますしかしそれにもかかわらず締切のずっと前にコミットを完了しますこの例と以前の例を比較してみましょう締切を過ぎるコミットは一つもなくプリフェッチならヒッチは全くなくなりますつまりヒッチを起こすことなく通常の最大２倍の時間を創出できますさらに朗報なのはこの機能は iOS 155DKのAppならすぐ使えること実は最初の例は 14 SDKで作ったAppでしたでは15SDKではどうなるのでしょか
すばらしいですねプリフェッチが予想通り働きスクロールが滑らかですコーディングも必要ありませんでした iOS 15SDKを使うのみこれを知っていただきたいです UICollectionViewについては iOS 10の同機能を増強しリストなどすべての構成に対応可になりましたなんとUITableviewでもプリフェッチが利用可能ですプリフェッチは操作性を向上するだけでなく電力消費を抑えバッテリー寿命を伸ばしますセルが速く処理可能な場合この機能を使いヒッチを避けながらエネルギーを節約できるためヒッチがもともとない場合もできるかぎり効率の良いレイアウト・セル処理を行いましょうセルのライフサイクルへの影響はどうでしょうこれがプリフェッチなしのサイクル二段階にはっきり分かれていますプリフェッチの場合画面に読み込む前に準備段階がなされていますこの機能を最大限に活用するには準備段階で構成を終わらせるのですセルが映るのを待っていてはいけないのですプリフェッチングの一環としてコレクションビュー変換時にはサイズも調整がなされますプリフェッチ後は表示を前に待機する中間状態が生じますこの新段階については配慮事項がいくつかありますスクロール方向が変わった時など準備したセルが表示されない場合があります既に表示されたセルは画面から外れたらすぐ準備状態に逆行し同じ索引パスで二度以上の表示が可能です表示が終われば再利用プールに直行の前設定とは異なっていますプリフェッチがヒッチを防ぐのは余分な時間を活用しているからでありフレーム数が高いデバイスだと依然スクロール中にヒッチが発生する可能性がここでPatrickが引き継ぎセルを構成する仕組み画像表示の際コミットの時間を減らす方法を説明していきますではハイレベル仕様部のPatrickです Appの例を使い既存のセルを更新する方法 iOS15導入のAPIで最高のパフォーマンスを実現する方法をご説明します今 Appはローカルファイルを使用スクロールしセルを準備する時画像はファイルシステムより直ちに読み込まれます次はリモートサーバー上の画像を読み込みましょうセルが映った時ビューの画像を保持していない可能性もありますイメージビューが映った時は空になりサーバーリクエスト完了後やっと表示されます新方式をサポートするため登録情報の設定ハンドラーを拡張してみましょう登録画面の設定ハンドラーでは既に記憶装置よりアセットをフェッチ済み画像は引き渡されますが完全なアセットではなくダウンロードが必要な時もアセットオブジェクトはこれを isPlaceholderで指示し正の場合は画像をダウンロードするよう依頼しますこれが完了したらセルのイメージビューを更新できますここでは既存のセルオブジェクトのイメージビューにアセットをセットしかしこれは間違いですセルは宛先ごとに再利用するためアセットの最後を読み込んだ時には別の投稿がオブジェクトに取り込まれているかもしれませんセルを直接更新するのでなくコレクションビューのソースに読み込みの必要性を伝えます iOS 15ではメソッド reconfigureItemsを導入し準備済みのセルについてコールすると登録画面の設定ハンドラーを取得します新しいセルをデキュー・設定せず既成のセルを再利用できるため reloadItemsと替えましょう例のAppでは setPostNeedsUpdateとし IDについて新メソッドをコールします
次に登録画面の設定ハンドラーに戻り画像が未表示の場合アセットをダウンロードし新メソッドをコールしますその後またハンドラーを呼び出しますが今のところはfetchByIDがアセットを全て読み込みますこれで全てのビュー更新コードを一か所にまとめ非同時的にセルを更新することができます downloadAssetを使いプリフェッチングのソース内で準備時間を引き延ばすこともできこのデータのプリフェッチングはダウンロードを始める時良策となりますセルが映る前にダウンロードの時間を稼ぎプレースホルダーが映る時間を減らすことができるからです
Appにはどう反映されるのでしょうか悪くはありませんが明らかにヒッチが確認できイメージの読み込みと連動しているようです新セルの準備ならヒッチングはなくあくまでも最高画質でダウンロードするときヒッチがありますこれは表示前にデコーディングが必要であり非プレースホルダー等特定のイメージは解読に時間がかかるからです登録画面の設定ハンドラーがコールされプレースホルダーがある場合コードよりフルサイズ画像を非同期要求し設定を完了しますダウンロードが完了したら最終イメージを使い設定ハンドラーを再度コールしますビューが新しい画像をコミットするときまずメインスレッドにて画像を準備する必要がありこれは時間がかかるため締切を過ぎヒッチが生じることがありますこの準備過程は全ての画像が表示前に終えなければなりません
またサーバーは bitmapというピクセル情報の画像しか表示できません PNG HEIC JPEGなど多様な形式になっておりすべて圧縮しディスプレイのため処理・アンパックをする必要があります画像にコミットする時にメインスレッド上でビューはこの処理を行います理想は先んじて準備を済めせ全て完了した状態で UIを更新することそうすればメインスレッドを邪魔せずヒッチも起こりません iOS 15では画像準備APIを導入し準備をいつどこで行うか裁量をデベロッパーに与えますこのAPIはレンダラーが必要とするピクセルデータのみの UIImageを生成するためイメージビューにしたらあとは処理もありません同期式でどのスレッドでも使えるAPIと非同期式で内部的なシリアルキューでのみ使えるAPIがあり
UIImageのイメージビューにしプレースホルダーを設置したのち新APIを呼び出すことでバックグラウンドで画像を走る準備が完了です完了すればイメージビューに切り替えますイメージの事前準備は画像中心の Appで重宝されますが注意点もいくつかあります準備されたイメージは生のピクセルデータを含んでおりメモリに保持されていればいつでもビューにてディスプレイができますただこの場合メモリを多量消費するので使う時を見極めましょうまたこのフォーマットはディスク保存に適しません原初のアセットをディスクに保存しましょう最後のポイントはプリフェッチングの活用法プリフェッチはイメージのダウンロード・準備用の時間を創出し処理に余裕を与えるため長くプレースホルダーを映すことがなくなります用例のAppではすでに画像取得のため非同期パスを設けていますがそこでダウンロードの終了後完了ハンドラーを呼び出す前にアセットを準備する時間がありますこのアセットは大きく貴重なため準備完了後はキャッシュしましょうイメージキャッシュは画像のサイズからメモリ使用量を推定しアセットが呼び出された際はサーバーを見る前にキャッシュを確認できます小さなイメージなら沢山キャッシュできます大きな画像を扱うために iOS 15ではサムネイルを準備するという似た系統のAPIを準備しておりイメージを小さなサイズに変えることができます宛先の容量をふまえて画像を読み取り処理することで CPUの時間やメモリが節約できます
画像準備APIと同様に UIimageのイメージビューにプレースホルダーをセットここでサイズ変更APIを呼び出しますビューのサイズはサムネイルのサイズ
準備ができればビューのサイズをサムネイルに合わせます画像準備APIとともに iOS15のAppにおいてヒッチを解消する新APIはこれを容易にしていますイメージを処理する際は画像が準備できればすぐUIを更新する非同期APIを準備し処理中は同期表示をしていても安く軽いプレースホルダーを使用しましょうプリフェッチングreconfigureItemsにより非同期アイテムのコレクション・リスト表示がかつてないほど簡単になっています
高速ビューを使い始めるには iOS 15 SDKでAppを製作し新仕様を使えるようにしてくださいコレクションやテーブル表示でプリフェッチングを使う際検査を忘れないでくださいここで使用したAPIは全てイメージの準備やサムネイル化を Appにご使用の場合はぜひご利用ください豪速スピードのコレクションテーブルビューお楽しみを！ご視聴ありがとう [陽気な音楽]

// Structuring data

struct DestinationPost: Identifiable {
    // Each post has a unique identifier
    var id: String
    
    var title: String
    var numberOfLikes: Int
    var assetID: Asset.ID
}

2:01 - Setting up diffable data source

// Setting up diffable data source

class DestinationGridViewController: UIViewController {
    // Use DestinationPost.ID as the item identifier
    var dataSource: UICollectionViewDiffableDataSource<Section, DestinationPost.ID>
    
    private func setInitialData() {
        var snapshot = NSDiffableDataSourceSnapshot<Section, DestinationPost.ID>()
        
        // Only one section in this collection view, identified by Section.main
        snapshot.appendSections([.main])
        
        // Get identifiers of all destination posts in our model and add to initial snapshot
        let itemIdentifiers = postStore.allPosts.map { $0.id }
        snapshot.appendItems(itemIdentifiers)
        
        dataSource.apply(snapshot, animatingDifferences: false)
    }
}

3:47 - Creating cell registrations

// Cell registrations

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in

    let post = self.postsStore.fetchByID(postID)
    let asset = self.assetsStore.fetchByID(post.assetID)
    
    cell.titleView.text = post.region
    cell.imageView.image = asset.image
}

4:03 - Using cell registrations

// Cell registrations

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in
    ...
}
   
let dataSource = UICollectionViewDiffableDataSource<Section.ID,
                                                    DestinationPost.ID>(collectionView: cv){
    (collectionView, indexPath, postID) in
  
     return collectionView.dequeueConfiguredReusableCell(using: cellRegistration,
                                                           for: indexPath,
                                                          item: postID)
}

13:58 - Existing cell registration

// Existing cell registration

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in

    let post = self.postsStore.fetchByID(postID)
    let asset = self.assetsStore.fetchByID(post.assetID)
    
    cell.titleView.text = post.region
    cell.imageView.image = asset.image
}

14:17 - Updating cells asynchronously (wrong)

// Updating cells asynchronously 

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in

    let post = self.postsStore.fetchByID(postID)
    let asset = self.assetsStore.fetchByID(post.assetID)
    
    if asset.isPlaceholder {
        self.assetsStore.downloadAsset(post.assetID) { asset in
            cell.imageView.image = asset.image
        }
    }
    
    cell.titleView.text = post.region
    cell.imageView.image = asset.image
}

15:15 - Reconfiguring items

private func setPostNeedsUpdate(id: DestinationPost.ID) {
    var snapshot = dataSource.snapshot()
    snapshot.reconfigureItems([id])
    dataSource.apply(snapshot, animatingDifferences: true)
}

15:23 - Updating cells asynchronously (correct)

// Updating cells asynchronously

let cellRegistration = UICollectionView.CellRegistration<DestinationPostCell,
                                                         DestinationPost.ID> {
    (cell, indexPath, postID) in

    let post = self.postsStore.fetchByID(postID)
    let asset = self.assetsStore.fetchByID(post.assetID)
    
    if asset.isPlaceholder {
        self.assetsStore.downloadAsset(post.assetID) { _ in
            self.setPostNeedsUpdate(id: post.id)
        }
    }
    
    cell.titleView.text = post.region
    cell.imageView.image = asset.image
}

15:52 - Data source prefetching

// Data source prefetching

var prefetchingIndexPaths: [IndexPath: Cancellable]

func collectionView(_ collectionView: UICollectionView,
                    prefetchItemsAt indexPaths [IndexPath]) {
   // Begin download work
    for indexPath in indexPaths {
        guard let post = fetchPost(at: indexPath) else { continue }
        prefetchingIndexPaths[indexPath] = assetsStore.loadAssetByID(post.assetID)
    }
}

func collectionView(_ collectionView: UICollectionView,
                    cancelPrefetchingForItemsAt indexPaths: [IndexPath]) {
    // Stop fetching
    for indexPath in indexPaths {
        prefetchingIndexPaths[indexPath]?.cancel()
    }
}

18:43 - Using prepareForDisplay

// Using prepareForDisplay

// Initialize the full image
let fullImage = UIImage()

// Set a placeholder before preparation
imageView.image = placeholderImage

// Prepare the full image
fullImage.prepareForDisplay { preparedImage in
    DispatchQueue.main.async {
       self.imageView.image = preparedImage
    }
}

19:51 - Asset downloading without image preparation

// Asset downloading – before image preparation

func downloadAsset(_ id: Asset.ID,
                   completionHandler: @escaping (Asset) -> Void) -> Cancellable {
  
    return fetchAssetFromServer(assetID: id) { asset in
        DispatchQueue.main.async {
            completionHandler(asset)
        }
    }
}

19:58 - Asset downloading with image preparation

// Asset downloading – with image preparation

func downloadAsset(_ id: Asset.ID,
                   completionHandler: @escaping (Asset) -> Void) -> Cancellable {
    // Check for an already prepared image
    if let preparedAsset = imageCache.fetchByID(id) {
        completionHandler(preparedAsset)
        return AnyCancellable {}
    }
    return fetchAssetFromServer(assetID: id) { asset in
        asset.image.prepareForDisplay { preparedImage in
            // Store the image in the cache.
            self.imageCache.add(asset: asset.withImage(preparedImage!))
            DispatchQueue.main.async {
                completionHandler(asset)
            }
        }
    }
}

20:50 - Using prepareThumbnail

// Using prepareThumbnail

// Initialize the full image
let profileImage = UIImage(...)

// Set a placeholder before preparation
posterAvatarView.image = placeholderImage

// Prepare the image
profileImage.prepareThumbnail(of: posterAvatarView.bounds.size) { thumbnailImage in
    DispatchQueue.main.async {
        self.posterAvatarView.image = thumbnailImage
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC21

WWDC20

Tech Talks

WWDC16