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
- You will be expected to be aware how to make a Single View Application
- You will need to use Swift Package Manager to add dependencies
- Some knowledge of AutoLayout would be useful
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.
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 uses a subclassed
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:
var urls: [URL] = var selectedIndex: Int = 0private var timer: Timer?
setupView sets up the
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.
UICollectionView must use a
UICollectionViewDelegate, which setup the cells:
We can see the complete
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
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