UIScrollViewを大きな画像（Photos.appなど）で高速に表示するにはどうすればよいですか？

Question

私はALAssetRepresentationのフル解像度の画像を見るための簡単な画像ビューアを作ろうとしています。それはそれほど単純ではないことが分かります。

私の最初のアプローチは、UIScrollView内に大きなUIImageViewを作成することでした。これはうまくいったが、それは非常に遅かった。

写真アプリを使用すると、画像に触れるとすぐに大きなバージョンが開きます。最初は、非常に低い解像度の画像が描画されています。しかし、まもなく、より高い解像度の画像が現れます。また、ズームインすると、最初に画像の解像度が低くなり、解像度が上がります。

Photos.appの仕組みが説明されているWWDC 2010基調講演＃104をチェックしました。しかし、私はどのようにこれを実装すると思いますか？基調講演では、このデモではタイル張りの画像を使用していますが、ALAssetRepresentationから得られない画像を使用しています。私はちょうど完全な解像度のバージョンを読み込み、CATiledLayerを使用して描画しています。また、ズームをet.cするのに時間がかかりませんが、タイルを描画するには遅すぎます。

Photos.appは、すべてのイメージの低解像度バージョンをどこかにキャッシュしていますか、それとも何が起こっていますか？何をするべきかについてのいくつかの指針が役に立つでしょう。

Answer 1

はい、Photos.appは低解像度の画像をキャッシュしています。良いニュースは、キャッシュされたバージョンでも入手できるということです。おそらく、すでにALAssetRepresentationのfullScreenImageプロパティとALAssetのサムネイルプロパティを知っているでしょう。それらは読み込むのがはるかに速くなければなりません。

私が高解像度の画像で見つけたのは、それをロードするだけで1~2秒かかることがあるので、高解像度の画像をバックグラウンドで読み込んでいれば、あなたのトリックを行うかもしれないと思います。

画像の低解像度版を読み込んだ後、高解像度版に切り替えるにはどうすればよいですか。それはちょっと複雑かもしれませんが、うまくいけば、これはあなたを始めるはずです。 AssetsLibraryを使用しているので、iOS 4を使用する必要があります。これは、ブロックやGCD/libdispatchを使って簡単に行うことができるため、良いニュースです。 WWDCのビデオを見てうれしく思います。セッション206と211でGCDの素晴らしい情報をたくさん確認してください。

基本的な考え方は、メインスレッドに低解像度のバージョンを表示してから、バックグラウンドスレッドにフル解像度のイメージをロードしてから、CATiledLayerにフル解像度のイメージに切り替えるように指示することです。

- (void)displayAsset:(ALAssetRepresentation *)asset { 
    UIImage *lowresImage = [UIImage imageWithCGImage:asset.fullScreenImage 
           orientation:asset.orientation scale:asset.scale]; 
    // Add code here to display the lowresImage 

    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), 
    ^{ 
     // Load the full resolution image from the asset 
     UIImage *highresImage = [UIImage imageWithCGImage:asset.fullResolutionImage 
            orientation:asset.orientation 
            scale:asset.scale]; 

     // Once done, tell the main thread to display the tiles 
     dispatch_async(dispatch_get_main_queue(), 
     ^{ 
      // Code to swap out the lowresImage for highresImage 
     }); 
    }); 

}