Working with Remote Images

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

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

8. Parsing JSON into Models 15 min

9. Displaying Search Results and Recommendations 25 min

10. Parsing RSS and Atom Feeds 29 min

11. Podcast Detail Screen 27 min

12. Custom Gradient Background 13 min

13. Padded Label and Separator View 11 min

14. Making a Custom Subscribe Button 16 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