UITableView

The Most Common Mistake In Using UITableViews

UITableView is one of the most important user interface objects you are using in iOS development. However, there is one common mistake in using UITableViews that could drive you crazy.

Example

Take a look at the following example:

So basically we are displaying alternately an image and a text label. The result looks like this:

Screenshot01

Everything seems to be fine.

The Problem

However, if we scroll down, we’ll see that something is going wrong:

Screenshot02

And if we scroll up again, the problem will arise as well:

Screenshot03

So what’s going on here? The answer is relatively simple: We are recycling the cells by using the method dequeueReusableCellWithIdentifier. And you should recycle cells because the allocation of views need a lot of resources. So let’s take a look at the following picture to understand what’s happening:

ReusedCells

Let’s take a look at row no. 12. Since 12%2 = 0, the picture with number 12 should be displayed. In fact that happens, but also the label with the number 1 is displayed! That happens because the cell from row 1 is recycled. And since we are not assigning an empty value to the label, you can still see the 1.

Next row is similiar: It’s the row with the no. 13, so the label with the text 13 is displayed. However, the cell from row no 0 is recycled and since where are not removing the image, it is still displayed.

You can also see that the behaviour is not very predictable and that sometimes everything seems to be working fine. So every time you are scrolling the result will be different. Depending on the circumstances it could happen that this issue doesn’t happen very often, so that it is very hard to reproduce the bug. But it’s very common to make this mistake, even for more experienced iOS developers.

The Solution

In order to solve the problem we just have to assign all properties all the time:

Now we assign nil, if the text or the image shouldn’t be displayed. And if we start the app and scroll down, we’ll get the following result:

Screenshot05

Conclusion

 If table view cells gets recycled and you don’t pay enough attention, some weird bugs can happen. But if you are always following the rule to always assign all properties all the time, nothing can go wrong.

Resources

Title Image: @ igor.stevanovic / shutterstock.com
UITableView Tutorials

Book Tip

Big Nerd Range Guide: iOS Programming: Excellent introduction to iOS development. Some programming experience is recommended.

Amazon