
This video is only available to subscribers. Start a subscription today to get access to this and 472 other videos.
Working with Remote Images
This episode is part of a series: Making a Podcast App From Scratch.
Episode Links
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
}