由于 CAShapeLayer (Swift 3) 导致 UITableView 滚动滞后 [英] Laggy UITableView scrolling because of CAShapeLayer (Swift 3)

问题描述

我在 UIView 中有一个 UITableView，它由以下类定义的自定义单元格组成:

I have a UITableView within a UIView, and it is made up of custom cells defined by the following class:

class CustomAddFriendTableViewCell: UITableViewCell {
    @IBOutlet weak var UsernameLbl: UILabel! 
    @IBOutlet weak var ProfileImg: UIImageView!
    @IBOutlet weak var AddFriendBtn: UIButton!
}

在 ViewController 的 tableview(_:cellForRowAt:) 方法中，我调用以下函数来布局单元格的 ProfileImg:

Within the ViewController's tableview(_:cellForRowAt:) method I call the following function to layout the cell's ProfileImg:

private func layoutProfilePics(with cell:CustomAddFriendTableViewCell) {
    //create gradient
    let gradient = CAGradientLayer()
    gradient.frame =  CGRect(origin: CGPoint.zero, size: cell.ProfileImg.frame.size)
    gradient.colors = [Colors.blueGreen.cgColor, Colors.yellow.cgColor]

    //create gradient mask
    let shape = CAShapeLayer()
    shape.lineWidth = 3
    shape.path = UIBezierPath(ovalIn: cell.ProfileImg.bounds).cgPath // commenting this out makes lag go away
    shape.strokeColor = UIColor.black.cgColor // commenting this out makes lag go away
    shape.fillColor = UIColor.clear.cgColor
    gradient.mask = shape

    cell.ProfileImg.layoutIfNeeded()
    cell.ProfileImg.clipsToBounds = true
    cell.ProfileImg.layer.masksToBounds = true
    cell.ProfileImg.layer.cornerRadius = cell.ProfileImg.bounds.size.width/2.0
    cell.ProfileImg.layer.addSublayer(gradient)

}

这段代码使 ProfileImg 成为一个圆圈，并有一个蓝绿色渐变的边框.旁边带有注释的两行使滚动非常平滑(意味着渐变不是导致滞后的原因)，因此我认为渲染 CAShapeLayer(特别是笔画)是导致问题的原因(因此是问题标题).我该怎么做才能提高 tableview 的滚动性能?

This code causes ProfileImg to be a circle and have a border with a blue-green gradient. The two lines with comments next to them make the scrolling very smooth (meaning the gradient is not what is causing the lag), so I assume that rendering the CAShapeLayer (specifically the stroke) is causing the problem (hence the question title). What can I do to improve the tableview's scrolling performance?

此外，我不确定这是 XCode 错误还是与我的问题有关，但是在 Project Navigator 的 Instruments 窗格中，当我运行应用程序并滚动滞后的 UITableView 时，FPS 没有反映滞后，尽管我可以清楚地看出它非常滞后.事实上，窗格中的任何组件(CPU、内存、能源影响等)都没有明显差异.

Also, I am not sure if this is an XCode bug or if it has something to do with my problem, but in the Project Navigator's Instruments pane, when I run the app and scroll the laggy UITableView, the FPS does not reflect the lag, even though I can clearly tell that it is very laggy. In fact, there are no noticeable differences in any of the components in the pane (CPU, Memory, Energy Impact, etc.).

更新:

我尝试将 layoutProfilePics(with:) 函数移动到 CustomAddFriendTableViewCell 的 prepareForReuse() 函数中，我也尝试将 layoutProfilePics(with:) 在其 layoutSubviews() 函数中，但它们都没有改进滚动.

I tried moving the layoutProfilePics(with:) function into the CustomAddFriendTableViewCell's prepareForReuse() function and I also tried putting layoutProfilePics(with:) in its layoutSubviews() function but neither of them improved the scrolling.

推荐答案

该代码旨在为每个单元格调用一次，因此不应在 tableView(_:cellForRowAt:).尝试将该代码移动到 awakeFromNib() 并且如果您为自定义单元使用笔尖，请在 viewDidLoad() 中使用以下代码加载插座:

That code is meant to be called once for each cell and for that, it shouldn't be called in tableView(_:cellForRowAt:). Try moving that code to awakeFromNib() and if you're using a nib for your custom cell, use the following code in viewDidLoad() to load the the outlets:

let addFriendCellNib = UINib(nibName: "CustomAddFriendTableViewCell", bundle: nil)
tableView.register(addFriendCellNib, forCellReuseIdentifier: "addFriendCell")

希望对你有用.

这篇关于由于 CAShapeLayer (Swift 3) 导致 UITableView 滚动滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！