Question

I am creating a custom Table by designing my own UITableViewCell in Xcode and loading it in cellForRowAtIndexPath. I am facing scrolling problems; the table scrolls really slow and not smooth at all. In each cell I have:

• Either 2 or 3 UIImageView where the 3rd one is added dynamically when needed
• 1 UILabel
• 1 UITextView
• Some cells might have 2 UIButton, some 1 UIButton, and the majority no buttons at all
• In some cells I might add an overlay UIView

The sizes of the image views, text view, and buttons are different in every cell. To prevent calculating the sizes every time the table is scrolled I load all the sizes in viewWillAppear and store them in an array, and inside cellForRowAtIndexPath I only load the sizes from the array and set them to the desired objects.

I tried all the ideas that I found on the web (like loading the images in the body of if(cell == nil) as shown here, or not de-queue the cells…) but nothing solved my problem.

On the other hand I notice that the chatting app WhatsApp uses similar amount of items per cell (example when the user receives an image, there are 2 buttons View and Forward, the image thumbnail, a check mark image next to the thumbnail, a date label, a bubble image behind the thumbnail…) but the scrolling there is very smooth.

My scrolling is slow even if I have 10 cells in the table only. Here are my questions:

1. Am I doing something dramatically wrong that I am not noticing?
2. Is there a limit for the number of items that should be added to a custom cell to prevent slow scrolling?
3. Is there a way to detect the reason of slow scrolling by using something like Product->Profile in Xcode?
4. Can anyone suggest a solution for my problem?

Many thanks in advance.

Answer 1

Slow operation of a TableView when using images is NORMALLY because of resizing operations. The last app I made had images coming from the web. as an example, one image that was coming in was a 4k pixel x 4k pixel image. All others were much larger than the thumbnail sized image I was trying to display. Long and short of it is, every time an image goes off screen, the image is moved out of RAM and back into flash, this is to help preserve RAM memory. The problem is that what stays in flash is the original UIImage that you are assigning to your UIImageView. A UIImage retains the original sized image. Thus now every time the image comes back on screen it has to be RESIZED from its original size (smaller or bigger than you wish to display). Every time that 4k px x 4k px image came back on screen, the TableView would glitch. The trick is to size the images to exactly what you wish to display prior to assigning it to the UIImage backing the UIImageView. As an exemplary note, this table view only was displaying ~ 10 to 12 items at a time and it was still extremely slow (even after all images war completely loaded from the web).

Another potential slowness. I had another app I built where I originally wished for the data being displayed to be selectable for copy and past. You can do this with UITextView objects. Problem is that the table of values I was outputting was 17 columns wide by 218 rows. In this case because each UITextView has scroll capability (even when I TURNED IT OFF) was causing each UITextView to have to re-calculated it’s own sub-view display coordinates, etc… causing very SLOW overall table scrolling. In the end, if the data doesn’t need to be edited, or copy and pasted, you really should only be displaying it with UILabel objects. When I did this, the performance of my UITableView went up immensely.