Create an Image Carousel Using Swift

Difficulty: Beginner | Easy | Normal | Challenging

This article has been developed using Xcode 12.4, and Swift 5.3.2

This is supported by the YouTube video https://youtu.be/tMNyU3y4U-Y

Prerequisites:

Terminology

Carousel: A set of rotating images

SDWebImage: A framework to help download and display images

UIView: An object that manages the content for a rectangular area on the screen

UIViewController: A view controller is an intermediary between the views it manages and the data of your app

A What With The What Now?

You might want to display a selection of images that sleekly scroll by in front of the user’s eyes, without their interaction? Something like:

Which is using the Pokémon API to retrieve the images in the carousel implemented above. This did necessitate use of an image downloading or caching mechanism, and in this case SDWebImage has been used (and installed using Swift Package Manager.

The Theory

This implementation is going to subclass a UIView which means that the Carousel can be reused in multiple `UIViewController` instances.

This reuse of a `UIView` subclass means that we are exploiting the reusability of those views while composing screens for applications.

Setting up the Reusable UIView

The idea here is create the carousel, and include three URLS for images from a Web API. Here I implement the Carousel using AutoLayout to ensure that the images (in this instance) stay in the middle of the scren as they animate. I did get the images from the Pokemon API, but most of the code below should be self-explanatory.

The Carousel

The Carousel uses a subclassed UICollectionViewFlowLayout:

The carousel itself is a subclass of UIView, and requires initialization

There is then the UICollectionView that is created using a lazy var, and sets up the layout. We also have a number of properties:

The shared setupView sets up the UICollectionView

The last part of this calls the function scheduleTimerIfNeeded which will cancel any existing timer, and create a timer with a delay of three seconds (that is, it is called every three seconds). This only functions if we do have some URLs to display!

selectNext takes our current selectedIndex and increments it, and calls a function which scrolls the UICollectionView to the appropriate item.

The UICollectionView must use a UICollectionViewDataSource and UICollectionViewDelegate, which setup the cells:

We can see the complete Carousel.swift file:

The Repo

Sometimes it is easier to see all of the code in situ, and the repo provides exactly that. The link? Go on then. https://github.com/stevencurtis/SwiftCoding/tree/master/ImagesCarousel

Conclusion

I’ve actually used this implementation in an implementation that displays images from the Pokemon API, which is an interesting API that you can use for your own project.

This particular project allows you to use a carousel within your projects, and I hope that it is useful for you in your programming journey.

If you’ve any questions, comments or suggestions please hit me up on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store