Swift

【Swift】URLから画像を非同期で取得するExtension

どうも、iOSエンジニアのmani(@mani_transm)です。

今回は今まであまり深く理解せずにやってきた「画像の非同期取得」をしっかり勉強した記録として、Extensionを作ったので備忘録として記事にあげようと思います。

mani
mani
画像の非同期取得はどこでも使うし汎用性高いと思うのでぜひ参考にしてください!

画像を非同期取得するExtension

デモ画像

今回紹介するExtensionで画像の非同期取得を行ってみたデモがこんな感じです。

Demo

QiitaのAPIから記事一覧のJSONを取得していて、投稿者のプロフィール画像をURLから非同期取得しています。

mani
mani
下手な非同期取得だとCellの再利用でチラツキが出ますが、今回のExtensionではNSCacheで画像をキャッシュしているのでチラツキが出ないようになってます。

GitHubにサンプルアプリをあげてます!必要な方はcloneして使ってみてください。

GitHub: maniCreate/ArchitectureSampleApp at MVC

全体コード

全体コードは以下の通り。UIImageView.setImage(fromUrl: URL)とURLを渡してあげるだけで画像をセットできるようにしています。

処理の流れは読んで頂ければわかると思いますが、

  1. 取得したい画像のURLをセット
  2. try Data(contentsOf: URL)で取得
  3. 1度取得した画像はNSCacheにキャッシュ
  4. 次回以降、1度取得してればNSCacheから、初めて取得するならURLから取得する

というような流れで実装しています。

mani
mani
TableViewだと画像を非同期で取得すると、cellの再利用に間に合わず再利用される前にセットされた画像が残っていたりするので結構厄介なんですよね。

というわけで、以上URLから画像を非同期で取得するExtensionでした。