NukeのTips集

NukeのTips集

Nukeは、iOS等でURLから画像をロードするパッケージです。
https://github.com/kean/Nuke
画像に特化した高効率なパイプラインやメモリキャッシュ、ファイルキャッシュを持ち、
同様のKingfisherやSDWebImageなどと比べてもパフォーマンスが良く様々な応用ができます。
https://kean-docs.github.io/nuke/documentation/nuke/getting-started/

さらにNukeUIを使うと、高レベルのLazyImageViewや、SwiftUI用のLazyImageが使えるようになります。
https://kean-docs.github.io/nukeui/documentation/nukeui/

高解像度画像のロード中に低解像度画像を表示しておく

サムネール画像をタップすると、その画像が大きく表示される、といったUIはよくあるかと思います。

この時、解像度の高い画像がロードされるまで、ただユーザーを待たせるのではなく、
すぐに(メモリ上にあるサムネールに使った)小さい画像を大きく表示しておいて、
高解像度の画像をロードしてから差し替えることで、ユーザー体験を向上させることができます。

単に placeholderImage を使うと .scaleAspectFit にならなくて若干ハマりました😅

import UIKit
import Nuke
import NukeUI

final class PhotoDetailViewController: UIViewController {

    private let lazyImageView = LazyImageView()

    // 適切に初期化し、必要なタイミングでupdate()を呼ぶ

    func update() {
        lazyImageView.imageView.contentMode = .scaleAspectFit
        if let image = ImageCache.image(for: photo.thumbnailURL) {
            let imageView = UIImageView(image: image)
            imageView.contentMode = .scaleAspectFit
            lazyImageView.placeholderView = imageView
            lazyImageView.transition = .none
        } else {
            lazyImageView.placeholderView = UIActivityIndicatorView(style: .medium)
            lazyImageView.transition = .fadeIn(duration: 0.2)
        }
        lazyImageView.url = photo.originalURL
    }
}

メモリキャッシュにある画像を即時で取り出す

メモリキャッシュにある画像は即時に取り出す事ができます。
(ドキュメントを見ても共有メモリキャッシュに辿り着く方法が分かりづらかったので参考まで)

import UIKit
import Nuke

extension ImageCache {

    public static func image(for url: URL) -> UIImage? {
        let request = ImageRequest(url: url)
        let key = ImagePipeline.shared.cache.makeImageCacheKey(for: request)
        return ImageCache.shared[key]?.image
    }
}