iOS開発で画像をフェードして表示させる方法

みなさんこんにちは

私は最近iOS開発を再開したIB(インターフェースビルダー)中毒のエンジニアです。
インターフェースビルダー駆使していかにコード量を減らすかを日々考えながら開発しています。

今日はインターフェースビルダー関係ないですが、iOS開発での画像の非同期通信と、フェードインしながら画像を表示させる実装について公開しようと思います。

検証環境

swift 2.1.1
SDWebImage 3.7.3

ちなみに私は最近覚えたてのswiftのオプショナルバインディングが気に入っています。

var imageUrl: String? = "https://example.co.jp/image.png"
if let url = imageUrl {
  print("画像URL：\(url)")
} else {
  print("画像URL")
}

こうして書くとimageUrlがnilじゃなかった時のみurlに値がセットされてelseのブロックではurlは無効という動きが良いと思います。

話を元に戻しますが、iOS開発での画像の非同期通信はSDWebImageというライブラリを使うと簡単に実装できます。

https://github.com/rs/SDWebImage

使い方

SDWebImageをインポートするとUIImageViewが拡張されるので、sd_setImageWithURLを以下のように呼び出します。

import SDWebImage

var imageView: UIImageView!

imageView.sd_setImageWithURL(NSURL(string: "https://example.co.jp/image.png"))

このライブラリを使って画像がフェードしながら表示されるような実装をするにはAvoidAutoSetImageのオプションを使うと実現できますが、GISTで対応したコードが公開されていました。

https://gist.github.com/ivanbruel/ec28ed9be5c1c69096e5

このコードで動かしてみたのですが、画像をコードで生成しているためにテーブルビューのスクロールの滑らかさが無いように感じたのでプレースホルダ画像を使うパターンを実装しました。

プレースホルダ画像を使うように変更したバージョン

import UIKit
import SDWebImage

extension UIImageView {
    func sd_setFadeImageWithURL(url: NSURL!, placeholderImage: UIImage!) {
        if let placeholderImage = placeholderImage {
            sd_setImageWithURL(url, placeholderImage: placeholderImage, options: .AvoidAutoSetImage) { (image, error, cache, url) -> Void in
                if cache == SDImageCacheType.None {
                    UIView.transitionWithView(self, duration: 0.35, options: [.TransitionCrossDissolve, .CurveEaseOut], animations: { () -> Void in
                        self.image = image
                        }, completion: nil)
                } else {
                    self.image = image
                }
            }
        } else {
            sd_setImageWithURL(url)
        }
    }
}

GIST URL
https://gist.github.com/kanekomasanori/30837a4b4a0171988e0b