skip to Main Content
Uitableview With Empty View Ios App Template

Custom UITableView with empty view

Post Series: UITableView best practises

In this tutorial I’m going to show you guys how to enhance your UITableViews and add a custom empty view. There are lot of times when you simply don’t have any data yet to display, or user lost internet connection and your request wasn’t completed, so your tableView remains empty without saying anything.

Better developers in these cases show some custom views that you see in almost every app nowadays. Head over to pttrns.com to get some inspirations, Pttrns.com – Custom UITableView empty state view

But let’s dive into coding and modify our UITableView with a custom UIView for the empty state.

uitableview with empty view ios app template

What we need for the empty state view?

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 a UITableView with empty view, we need a custom UIView or UIImageView.

I’ll use our previous tutorial where we customised the tableView with a custom loading indicator.

If you don’t have that project, head over to this page and check out that tutorial, than Create a custom UITableView with loading indicator.

Let's code

Let’s first add a new UIView and name it LoadingTableViewEmptyView. Also create a .xib file since we don’t want to do all of the styling programmatically, better to use xibs when you’re doing some “heavy stuff”, creating complex views or you wish to modify it later. Easier to just move around labels and buttons, than doing that in code.

ios app templates uitableview custom empty view

Select your .xib file and edit the class name to match your empty view’s class. (Select the File’s Owner Placeholder and modify the class name there)

From this point on it is pretty much up to you what you want to display in your empty view.

We’ll go with the standard setup. One UIImageView displaying an image, and a text under it showing that there is no content available.

Our class should look like this:

Two properties as stated before, one for an UIImageView and one for a UILabel. And one extra, an UIView that is the base view of our custom view.

But in order to be able to tell Xcode, which UIView is the one we want to display, we need to get the xib file and load it properly when this view is initialised.

To do that, we need the following snippet:

Just copy this method into your class and edit the nameOfYourViewsClass placeholder to the name of your class. In our case it is: LoadingTableViewEmptyView.

Once we have that in place, we need to modify the init methods, to get the proper UIView. It will look like this:

Customise the look of your empty view

Before connecting this empty view with our UITableView, obviously we need to set up the view, how it should look like, placement, colors, fonts, etc.

We are going to go with the usual setup as stated before, a UIImageView in the middle and a label below it. So let’s go to our xib file, and drag and drop an UIImageView and a UILabel from the Utilities panel.

uitableview empty view ios app template

Once we have all of our elements on screen, we should add some Auto Layout constraints.

If you don’t already know Auto Layout, than you need to learn ASAP.

Our approach will be to place the UIImageView in the middle by adding Align Center X and Y constraints.

uitableview empty view ios app template adding auto layout

After that we add some more Constraints, this time to the Label.

Constraints will be:

– 30pt from Left: Leading Space

– 30pt from Right: Trailing Space

– 10pt from Top: Top Space to UIImageView

That should be it.

Note: We didn’t set a height constraint to our text, since we want to be able to display multiple lines of text there, not just a single line, and if we set a height constraint we are limiting the label to that height. If we don’t set it, Auto Layout will adjust the text according to it’s content. Just make sure that the Preferred Width is set right.

uitableview empty view ios app template adding auto layout

Connect the UITableView with the empty view

Once we have our view setup we need to head back to our UITableView subclass (LoadingTableView) and create a new property/variable.

And add the following methods:

To show or hide the empty view.

You may wonder, why the hell I need to customise my UITableView and have this stupid empty view there, when I can just add a custom view over my existing tableView in Storyboard and hide/show accordingly.

Well, the main advantage of using these custom tableViews is that you just need to do this once, and you can use it in many places. You could also add some methods to your tableView or even enums to show specific empty views at different places.

For example: you might want to display a different icon at the My friends section of your app, and a different at the Cart view.

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. And again, let your imagination fly away and bring it back with cool ideas to create the next awesome app.

Download

Download it, it’s free

Download now and create your own awesome UITableView with empty view.