Loading Indicator IOS Uitableview

Create a custom UITableView with loading indicator

Post Series: UITableView best practises

In this tutorial I’m going to show you guys how to enhance your UITableViews and add a custom loading indicator to it. I’m not talking about the refresh controller, but the usual indicator that is in the middle of the UITableView and shown whenever your tableView is empty and you are loading some content in the background. I’ll guide you through the steps to create it, what you would need and how to adopt it into your own project. It is freakin’ easy, and can add just the right amount of detail to make your app stand out.

loading indicator iOS uitableview

What we need for the loading indicator?

As you can see this is pretty simple. But let’s break it down to see what we really need, and how we can achieve this effect.

To display the spinning indicator in the middle, we need a custom UIView or UIImageView. Since we are going to display a simple image in this example and use CABasicAnimation (there is a cool tutorial on animation in Objective-C, here) to rotate it, we don’t need to have another UIView, just a UIImageView.

Let’s code

Let’s create a UITableView by adding a new file to the project (I’m sure you can do this by yourself), name it LoadingTableView and make it the subclass of UITableView. This tableView will have the loading indicator UIImageView as a subview.

As you can see, the loadingImageView property will be the subview of the UITableView and display the indicator image.

These are the public methods that will be used to display the loading indicator or hide it.

And finally the private methods, that shouldn’t be exposed to other classes. These methods are helper methods, and responsible for making the loading indicator spinning around or stop.

We need to call adjustSizeOfLoadingIndicator() function in layoutSubviews() method, in order to place it in the middle of the screen, no matter how big is the screen.

How to use it?

Using the custom tableView is fairly easy. Whenever you want to use this UITableView, just subclass your variable from LoadingTableView, like so:

@IBOutlet var tableView: LoadingTableView!

Also adjust it in your Storyboard as well.

To actually display the loading animation, call the showLoadingIndicator() method of the tableView before your network request, and call the hideLoadingIndicator() after you are done.

Like this:

Sum it up

I hope you learned something today as well, and found it useful. I’m pretty sure this little tweak could give a little extra to your app, since instead of showing an overlay or other views that cover the whole UI, you can just simply present this loading indicator in your tableView without blocking the whole app’s UI.

Download

Download it, it’s free

Download now and create your own awesome tableView with a custom loading indicator.