Tableview scrolling is a bit fidgety. How can I make it buttery smooth

Question

Here is my code in cell for row method:-

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeue(.journalListingCell, for: indexPath) as! JournalListViewCell
    cell.delegate = self
    //fetching the category model as per the category id 
    if let category = categories?.first(where: { $0.categoryID == dreamJournalArray[indexPath.row].categoryID }) {

        cell.configureCell(dreamJournalArray[indexPath.row], category)
    }

    return cell
}

This code is just matching a category id from a array of categories to the category id in the main data model and passing along that category to the configure cell model along with the data model.

The configure cell method is as follows:-

 typealias Model = DreamJournalModel
 func configureCell(_ model: Model, _ category: CategoryModel) {

    //setting the gradient colors
    verticalView.backgroundColor = category.categoryGradientColor(style: .topToBottom, frame: verticalView.frame, colors: [UIColor.init(hexString: category.initialGradientColor)!,  UIColor.init(hexString: category.lastGradientColor)!])
    horizontalVIew.backgroundColor = category.categoryGradientColor(style: .leftToRight, frame: self.frame, colors: [ UIColor.init(hexString: category.lastGradientColor)!, UIColor.init(hexString: category.initialGradientColor)!])
    timelineCircleView.backgroundColor = category.categoryGradientColor(style: .topToBottom, frame: timelineCircleView.frame, colors: [UIColor.init(hexString: category.initialGradientColor)!,  UIColor.init(hexString: category.lastGradientColor)!])

    // setting the intention matching image as per the rating
   intentionImageView.image = UIImage.init(named: "Match\(model.intentionMatchRating)")

    // setting up the date of the journal recorded
   let date = Date(unixTimestamp: model.createdAt!)
    dateMonthLabel.text = (date.monthName(ofStyle: .threeLetters)).uppercased()
    dateNumberLabel.text = String(date.day)

    //setting the titles and labels
    dreamTitleLabel.text = model.title
    dreamTagsLabel.text = model.tags

    // setting the lucid icon
    gotLucidImageview.isHidden = !(model.isLucid!)

    //setting the buttons text or image
    if model.recordingPath != nil {
        addRecordButton.setTitle(nil, for: .normal)
        addRecordButton.backgroundColor = UIColor.clear
        addRecordButton.layer.cornerRadius = 0
        addRecordButton.setImage(LRAsset.cardRecording.image, for: .normal)

    }
    else{
        addRecordButton.setTitle(" + RECORD ", for: .normal)
        addRecordButton.backgroundColor = UIColor.blackColorWithOpacity()
        addRecordButton.layer.cornerRadius = addRecordButton.bounds.height/2
        addRecordButton.setImage(nil, for: .normal)

    }

    if model.note != nil {
        addNoteButton.setTitle(nil, for: .normal)
        addNoteButton.backgroundColor = UIColor.clear
        addNoteButton.layer.cornerRadius = 0
        addNoteButton.setImage(LRAsset.cardNote.image, for: .normal)

    }
    else{
        addNoteButton.setTitle(" + NOTE ", for: .normal)
        addNoteButton.backgroundColor = UIColor.blackColorWithOpacity()
        addNoteButton.layer.cornerRadius = addRecordButton.bounds.height/2
        addNoteButton.setImage(nil, for: .normal)

    }

    if model.sketchPath != nil {
        addSketchButton.setTitle(nil, for: .normal)
        addSketchButton.backgroundColor = UIColor.clear
        addSketchButton.layer.cornerRadius = 0
        addSketchButton.setImage(LRAsset.CardSketch.image, for: .normal)
    }
    else{
        addSketchButton.setTitle(" + SKETCH ", for: .normal)
        addSketchButton.backgroundColor = UIColor.blackColorWithOpacity()
        addSketchButton.layer.cornerRadius = addSketchButton.bounds.height/2
        addSketchButton.setImage(nil, for: .normal)

    }
}

In this method I am setting the gradient colors in the cell as per the category. And then I am setting the button states at the bottom according to the mentioned conditions.

Here's what my tableview looks like:-

The 3 buttons at the bottom of the cell are in a Stackview and their appearance is changing dynamically as per the conditions.

The tableview is not scrolling smooth and the lag is very visible to the naked eye. The height for the cell is fixed at 205.0 and is defined in the height for the row index method. I don't know where my fetching and feeding the data to the cell logic is mistaken. Please guide if the scrolling can be improved here. Thanks in advance.

Comment the gradient, check if it's quicker. Comment the "date" also, if you are using a `(NS)DateFormatter`, I hope it's always the same and you are not alloc/init one each time. Also, avoid maybe filtering each time the category, and try to have a model that has it directly according the categoryID you want (test it by giving each time the one at indexPath, even if it's not the correct category, that's just for "speed/laggy tests"). In other words: Find the lines that are slowing down you code. — Larme, Jul 08 '18 at 11:13
Use the time profiler instrument to identify where the time is being spent — Paulw11, Jul 08 '18 at 11:50
I used the Time profiler to observe that the setting the gradient color for the cells is the culprit here and it is taking most of the time. But I don't know how to improve upon that as the gradient color of each cell is dependent on the category passed. — Shikhar varshney, Jul 08 '18 at 12:45
But are the color limited? I mean you read the colors of the category, but is the number of variations limited? — Larme, Jul 08 '18 at 12:55
@Larme yeah the number of categories and colors are limited for now. Each category is associated with 2 colors :- the initial color and the final color. — Shikhar varshney, Jul 08 '18 at 12:56
If there is not that much of categories, you could create each gradient, and hide/show them accordingly. Or maybe another solution would be to use a Gradient Mask on two UIView, where there you set the colors background (see there: https://stackoverflow.com/questions/22810839/drawing-gradient-over-image-in-ios) — Larme, Jul 08 '18 at 12:58

score 2 · Answer 1 · answered Jul 08 '18 at 11:59

You are writing too much code inside func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell which should not be there Examples can be setting corner radius, background colors, gradients. These are called each time. You can implement these when the cell is created inside awakeFromNib method.

But this is not that much of a reason your tableview is having scrolling issues. It is because of images that you are adding inside that method. You can use iOS 10 new tableView(_:prefetchRowsAt:) method which will be a better place to load images or preparing data for your cells before being displayed taking things like images there which is called prior to dequeue method.

Here is the link form Apple documentation:

https://developer.apple.com/documentation/uikit/uitableviewdatasourceprefetching/1771764-tableview

The table view calls this method as the user scrolls, providing the index paths for cells it is likely to display in the near future. Your implementation of this method is responsible for starting any expensive data loading processes. The data loading must be performed asynchronously, and the results made available to the tableView(_:cellForRowAt:) method on the table view’s data source.The collection view does not call this method for cells it requires immediately, so your code must not rely on this method to load data. The order of the index paths provided represents the priority.

https://developer.apple.com/documentation/uikit/uitableviewdatasourceprefetching

Tableview scrolling is a bit fidgety. How can I make it buttery smooth

1 Answers1