在 UITableView 中正确显示 JSON 数据

Question

我创建了一个UITableView 并用我在 API 中获得的 JSON 数据填充它。我得到并正确放置所有内容，但是当我滚动或删除一行时，一切都搞砸了！

标签和图像干扰；这是我的代码：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    var dict = productsArrayResult[indexPath.row]

    let cellImage = UIImageView(frame: CGRect(x: 5, y: 5, width: view.frame.size.width / 3, height: 90))
    cellImage.contentMode = .scaleAspectFit
    let productMainImageString = dict["id"] as! Int
    let url = "https://example.com/api/DigitalCatalog/v1/getImage?id=\(productMainImageString)&name=primary"
    self.downloadImage(url, inView: cellImage)
    cell.addSubview(cellImage)

    let cellTitle = UILabel(frame: CGRect(x: view.frame.size.width / 3, y: 5, width: (view.frame.size.width / 3) * 1.9, height: 40))
    cellTitle.textColor = UIColor.darkGray
    cellTitle.textAlignment = .right
    cellTitle.text = dict["title"] as? String
    cellTitle.font = cellTitle.font.withSize(self.view.frame.height * self.relativeFontConstantT)
    cell.addSubview(cellTitle)

    let cellDescription = UILabel(frame: CGRect(x: view.frame.size.width / 3, y: 55, width: (view.frame.size.width / 3) * 1.9, height: 40))
    cellDescription.textColor = UIColor.darkGray
    cellDescription.textAlignment = .right
    cellDescription.text = dict["description"] as? String
    cellDescription.font = cellDescription.font.withSize(self.view.frame.height * self.relativeFontConstant)
    cell.addSubview(cellDescription)

    return cell
}

Answer 1

您在使可重用单元出列时多次添加子视图。您可以做的是在情节提要或 xib 文件中制作原型单元格，然后在 cellForRowAtIndexPath 处将该单元格出列。

您的单元格自定义类将类似于从原型单元格中绘制出口的情况。

注意：您需要为该原型单元分配可重用标识符。

class DemoProtoTypeCell: UITableViewCell { @IBOutlet var titleLabel: UILabel! @IBOutlet var descriptionLabel: UILabel! @IBOutlet var titleImageView: UIImageView! }

现在您可以对 DemoProtoTypeCell 进行 deque 并相应地使用。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: String(describing: DemoProtoTypeCell.self), for: indexPath) as! DemoProtoTypeCell
  cell.titleImageView.image = UIImage(named: "demoImage")
  cell.titleLabel.text = "demoTitle"
  cell.descriptionLabel.text = "Your description will go here."
  return cell
}

Answer 2

那是因为您正在将子视图添加到重用（因此它可能已经有之前添加的子视图）单元格。

尝试检查单元格是否有子视图并填写您需要的信息，如果没有子视图则将它们添加到单元格中。

选项 1

if let imageView = cell.viewWithTag(1) {
    imageView.image = //your image
} else {
    let imageView = UIImageView(//with your settings)
    imageView.tag = 1
    cell.addSubview(imageView)
}

选项 2

Crete UITableViewCell 子类已经拥有你需要的所有子视图。

Answer 3

我使用以下方法从单元格中删除所有子视图：

override func prepareForReuse() {
    for views in self.subviews {
        views.removeFromSuperview()
    }
}

但是我已经创建了UITableViewCell 子类并在其中声明了这个方法。

您也可以按照@sCha 的建议做一件事。为子视图添加标签，然后使用相同的方法从单元格中删除子视图：

override func prepareForReuse() {
    for view in self.subviews {
        if view.tag == 1 {
          view.removeFromSuperview()
        } 
    }
}

希望这会有所帮助。

Answer 4

我认为其他答案已经提到了解决方案。您应该子类化 tableview 单元格，只需更改每一行的布局元素的值。

但我想解释一下为什么你会出现这种奇怪的行为。

当你打电话时 tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) 它尝试使用传递的标识符@"cell" 重用已创建的单元格。这可以节省内存并优化性能。如果不可能，它会创建一个新的。

所以现在我们得到了一个单元格，其中布局元素已经到位并填充了您的数据。然后，您的代码在旧元素之上添加新元素。这就是为什么你的布局搞砸了。它仅在您滚动时才会显示，因为第一个单元格没有以前的单元格可以加载。

当您对单元进行子类化时，尝试在第一次初始化时只创建一次布局。现在您可以将所有值传递给相应的布局元素，让 tableview 完成它的工作。

Answer 5

试试这个：

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        var cell:UITableViewCell! = tableView.dequeueReusableCell(withIdentifier: "cell")
        if cell == nil
        {
            cell = UITableViewCell.init(style: UITableViewCellStyle.default, reuseIdentifier: "cell")
        }
        for subView in cell.subviews
        {
            subView.removeFromSuperview()
        }
// Your Code here
    return cell
    }