Working with Remote Images

Episode #386 | 16 minutes | published on April 11, 2019 | Uses Swift-5.0, Xcode-10.2

Subscribers Only

Working with images from the network is such a common task in iOS development. In this episode we'll cover a useful library called Kingfisher, which gives you a simple API for downloading and caching images from the network. We also look at two ways for configuring our image view, one using User-Defined Runtime Attributes and the other by using awakeFromNib in code.

This episode is part of a series: Making a Podcast App From Scratch.

1. Intro 1 min

2. New Project Setup & Theming 14 min

3. Storyboard References 5 min

4. Reusable Views 10 min

5. Styling Custom Cells 15 min

6. Working with Remote Images 16 min

7. Creating an API Client 18 min

Episode Links

Kingfisher

Configuring the Image View

Let's start by customizing the presentation of our image view. This will also serve as the default presentation if no image is available (or if image download fails).

override func awakeFromNib() {
    super.awakeFromNib()

    artworkImageView.backgroundColor = Theme.Colors.gray3
    artworkImageView.layer.cornerRadius = 10
    artworkImageView.layer.masksToBounds = true

    // ...
}

Adding Kingfisher

We'll use CocoaPods to install a useful library for dealing with remote images:

$ pod init

Then, in the generated Podfile:

platform :ios, '12.0'

target 'PodcastApp' do
  use_frameworks!


  pod 'Kingfisher', '~> 5.3.1'
end

Then we can run pod install to install it and open the new workspace it created for us.

Using Kingfisher to Download Podcast Artwork

In the SearchResultCell class:

func configure(with result: SearchResult) {
    if let url = result.artworkUrl {
        let options: KingfisherOptions = [
            .transition(.fade(0.5))
        ]
        artworkImageView.kf.setImage(with: url, options: options) 
   }

   // ...
}

Handling Reusable Cells

If image reuqests are in flight when we try to reuse the cell, we need to cancel the request, otherwise we risk having the wrong image being displayed on a cell.

The right place to put this code is in prepareForReuse:

override func prepareForReuse() {
    super.prepareForReuse()

    // ...

    artworkImageView.kf.cancelDownloadTask()
    artworkImageView.image = nil
}

View on Github

Download