ios - TableView Cell with Minor Lag (Async Proper Use?) Swift

Question

我有一个 充满数据的数组 在 中加载图像表 View 单元格。 但是我越来越小滞后 (更多的小故障)当表格 View 在图像索引上滚动。

数组包含数据(似乎滞后更大的字节)

Data in Bytes(624230 bytes)

Data in Bytes(1619677 bytes)

Data in Bytes(2257181 bytes)

Data in Bytes(1120275bytes)

不确定加载数据时如何正确使用异步。

struct messageCellStruct {

    let message: String!
    let photoData: Data!

}

var messageArray = [messageCellStruct]()



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


        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")


        let message2 = cell?.viewWithTag(2) as! UITextView


        var photoUploadData = messageArray[indexPath.row].photoData

        let main = DispatchQueue.main
        let background = DispatchQueue.global()
        let helper = DispatchQueue(label: "another_thread")



        if(photoUploadData != nil){

            print("Data in Bytes\(String(describing: photoUploadData))")



                    let fullString = NSMutableAttributedString(string: "")
                    let image1Attachment = NSTextAttachment()
                    let newImageWidth = (self.message.bounds.size.width - 20 )
                    let messageDisplayString = self.messageArray[indexPath.row].message

            background.async {
                    image1Attachment.image = UIImage(data: photoUploadData!)
            }


                    image1Attachment.bounds = CGRect.init(x: 0, y: 0, width: newImageWidth, height: 200)


                    let image1String = NSAttributedString(attachment: image1Attachment)


                    fullString.append(image1String)
                    fullString.append(NSAttributedString(string: messageDisplayString!))

                    message2.attributedText = fullString
                    message2.textColor = .white
                    message2.font = UIFont.systemFont(ofSize: 17.0)


        }else {

            message2.text = self.messageArray[indexPath.row].message

        }




        return cell!
    }

我首先介绍 Async 的原因是因为滞后。无论有没有异步，它都会滞后。

Answer 1

你不应该在后台线程上执行任何 UI 操作。

删除 background.async从

        background.async {
                image1Attachment.image = UIImage(data: photoUploadData!)
        }

只需使用

image1Attachment.image = UIImage(data: photoUploadData!)

编辑:

滞后不是因为 UIImage(data: photoUploadData!)我同意这是一个同步调用，但不会造成延迟，真正的罪魁祸首是 let image1String = NSAttributedString(attachment: image1Attachment) NSAttributedString众所周知是臭名昭著的。

要测试假设，您可以注释掉

                let image1String = NSAttributedString(attachment: image1Attachment)


                fullString.append(image1String)
                fullString.append(NSAttributedString(string: messageDisplayString!))

                message2.attributedText = fullString
                message2.textColor = .white
                message2.font = UIFont.systemFont(ofSize: 17.0)

你不应该看到滞后。

不幸的是，我不知道如何解决 NSAttributedString 的问题。我们有同样的问题，它通常会在滚动大量行时加起来滞后。因此我们决定选择 DTCoreText

不知何故，这比 NSAttributedString 更好。

编辑:

我们得出的结论是，延迟/滞后可能是因为将大量数据转换为 NSAttributedString。 .由于 OP 想要做的只是在其下方显示图像和文本，因此他不知道如何处理单元格中的多个组件，因此我正在将答案更新为相同。

我并不是说这是这样做的唯一方法可能有助于 OP 在这里假设

第一步:

创建 UITableViewCell xib 并将 UIImageView 拖到它上面。



现在 imageViews 可以采用隐式大小。这意味着 UIImageView 可以根据图像显示增长。如果您正在加载的图像恰好在您的控制范围内(服务器发送图像是您的)，并且如果您的后端团队可以确保他们不会发送疯狂的大图像，那么您不需要对 ImageView 进行高度限制。

但通常情况下，服务器团队声称它是客户团队的工作。因为您想以最佳方式显示图像并显示具有宽高比的图像，并让图像的较大部分被切掉，或者如果图像恰好很小，在图像周围留下巨大的空间，请后端团队将宽高比作为回应的一部分。

所以在这种情况下，为 imageView 创建一个高度约束



为高度约束创建一个 IBOutlet 假设您将其称为 imageHeightConstraint
现在，当您在单元格中加载图像时，您知道 imageView 的宽度将等于单元格的宽度，并且您知道要显示的图像的纵横比，因此您可以计算假定图像的高度为

在 cellFroRowAtIndexPath

cell.imageHeightConstraint.constant = cell.bounds.size.width * aspectRatioOfImage

如果您有 configure 则更好单元格中的方法，然后您希望单元格配置其 subview

self.imageHeightConstraint.constant = self.bounds.size.width * aspectRatioOfImage

显然您可能需要将其转换为 Float来自 CGFloat我相信你能做到:)

现在，如果您对图像没有任何控制权并且您正在从某个随机网站下载它，因此没有纵横比信息，那么与其添加高度约束，不如将纵横比约束添加到 imageView 并将 imageView 内容模式更改为 .aspectFit 这可能会产生副作用我在上面提到过，但在没有任何支持的情况下，这是你得到的最好的 :)



现在在 imageView 下面添加 TextView



在 imageView 和 TextView 之间添加垂直高度约束



选择 textView 并将启用滚动设置为 false



选择TextView并将垂直内容拥抱优先级和压缩阻力更改为999



而已 :)

现在，您通过所有这些马戏团取得的成就是，现在您拥有了一个 TableViewCell，它可以根据它所拥有的内容采用隐式大小，而不会产生任何歧义:)

现在，这使生活变得轻松。实现 tableView 委托(delegate)，不要忘记使用

self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 44.0;

就是这样 :) 现在运行您的代码并根据它们显示的内容享受自我扩展的 tableView 单元格:) 您拥有您想要的布局

希望能帮助到你