UIActivityIndicatorView With Custom Text In Swift

Are you looking for an activity indicator that is more than just a spinning gear? Would you like to include a text message while the indicator is displayed?

We’ve all encountered the dreaded hourglass or spinning whatever that pops up and mysteriously stays there until you finally have to dispose of the window and start again. Conversely, when you are presented with an indicator accompanied by a relevant message, it portrays that an explicit and intended action is underway and will likely complete as expected.

I was looking for such a component, and came across one that is easy to install, and simple yet flexible to use. It is called EZLoadingActivity and was created by Goktug Yilmaz. You can find it here on GitHub. The documentation provided is excellent. You can install it with CocoaPods, or copy the one Swift file to your project. I’ll demonstrate it in a simple project with the Swift file, and also discuss a couple of other techniques that I’m using in the project.

Note: As of 9 Nov 2017, I’ve updated the code in GitHub to be Swift 3. You won’t need an old xCode to update it to Swift 4 if you want to migrate it to the latest.

Let’s assume we have an operation that may take several seconds, such that we want to display a message to the user while it is active, perhaps “Posting Updates …“.

I created a standard Single View Application in xCode to get started. I added a circular UIButton to it using a subclass of UIButton. I covered this RoundButton subclass in an earlier tutorial if you want to see how it is done. I also added constraints to center the button horizontally, place it relative to the bottom layout guide, and set the width and height to 60.

I also created an Image Set for the button icon with 1x, 2x, and 3x sizes of the image.

Screen Shot 2016-04-09 at 11.22.43 AM

 

The round UIButton is IBDesignable and IBInspectable, and therefore the Border Color and Border Width can be set in Interface Builder. I’ve set Border Color to white, and Border Width to 2. With all that in place, this is the Storyboard.

Screen Shot 2016-04-09 at 11.22.24 AM

One tip I should mention is that I’ve also set the Tint Color of the button in the Attributes Inspector so that it matches the border. If you want to see the tint reflected in Interface Builder, make sure your button is type System, and not Custom, otherwise it won’t match the tint color you’ve specified when you are viewing it in Interface Builder.

With all the basics now setup, time to do some minor enhancements to illustrate the activity view with text.

I’ve changed the default colors in EZLoadingActivity.swift, so you’ll see this near the top.

In the ViewController, I’ve added a global function that can be used to delay execution, which I’ll use to display the activity indicator for a specified number of seconds before closing it.

With an IBOutlet and IBAction for the button already defined after creating the button in the Storyboard, the last piece is adding the code for the IBAction that demonstrates the activity indicator.

It is as simple as that. You show the activity indicator with a message, optionally disabling the UI, then delay for 5 seconds, and briefly display a success message before hiding the indicator. If you don’t want a success message, you just use EZLoadingActivity.hide(). Of course in a real app you’d not be using the delay, but would instead incorporate activity indicator hiding into a response completion handler for the operation.

Here are screenshots of the activity indicator with text, followed by the success message.

Screen Shot 2016-04-09 at 10.39.01 AM

Screen Shot 2016-04-09 at 10.39.29 AM

You can download the completed project from my GitHub.

Leave a Comment: