Ios 在UITableView中滚动时视图被替换

我是一名Android开发者，对iOS应用程序开发非常陌生。我正在尝试构建一个简单的聊天系统，每个单元中只有一行数据

我正在使用一个自定义的

UIView

类以编程方式生成一个气泡、一个

UILabel

和一个

UIImageView

当我第一次运行应用程序时，一切看起来都很好。请参见下图：

但是，当我向上滚动

UITableView

时，问题就出现了，我不明白为什么气泡会向右侧移动。见下图：

有帖子说这是

UITableView

的功能之一

我应该如何解决这个问题

如果您需要应用程序任何部分的任何代码片段，请在下面进行评论

PS:我使用Xcode 9和iOS 11.4作为测试设备和Swift 4编程

任何帮助都将不胜感激。谢谢

下面是

BubbleView

类：

编辑

import UIKit
import Foundation

class BubbleView: UIView {

    var incomingColor = UIColor(white: 0.9, alpha: 1)
    var outgoingColor = UIColor(red: 0.09, green: 0.54, blue: 1, alpha: 1)

    var isIncoming: Bool = false

    init(isIncoming: Bool) {
        self.isIncoming = isIncoming
        super.init(frame: UIScreen.main.bounds);
    }

    required init?(coder decoder: NSCoder) {
        super.init(coder: decoder)
    }

    override func draw(_ rect: CGRect) {
        let width = rect.width
        let height = rect.height

        let bezierPath = UIBezierPath()

        if self.isIncoming == true {
            bezierPath.move(to: CGPoint(x: 22, y: height))
            bezierPath.addLine(to: CGPoint(x: width - 17, y: height))
            bezierPath.addCurve(to: CGPoint(x: width, y: height - 17), controlPoint1: CGPoint(x: width - 7.61, y: height), controlPoint2: CGPoint(x: width, y: height - 7.61))
            bezierPath.addLine(to: CGPoint(x: width, y: 17))
            bezierPath.addCurve(to: CGPoint(x: width - 17, y: 0), controlPoint1: CGPoint(x: width, y: 7.61), controlPoint2: CGPoint(x: width - 7.61, y: 0))
            bezierPath.addLine(to: CGPoint(x: 21, y: 0))
            bezierPath.addCurve(to: CGPoint(x: 4, y: 17), controlPoint1: CGPoint(x: 11.61, y: 0), controlPoint2: CGPoint(x: 4, y: 7.61))
            bezierPath.addLine(to: CGPoint(x: 4, y: height - 11))
            bezierPath.addCurve(to: CGPoint(x: 0, y: height), controlPoint1: CGPoint(x: 4, y: height - 1), controlPoint2: CGPoint(x: 0, y: height))
            bezierPath.addLine(to: CGPoint(x: -0.05, y: height - 0.01))
            bezierPath.addCurve(to: CGPoint(x: 11.04, y: height - 4.04), controlPoint1: CGPoint(x: 4.07, y: height + 0.43), controlPoint2: CGPoint(x: 8.16, y: height - 1.06))
            bezierPath.addCurve(to: CGPoint(x: 22, y: height), controlPoint1: CGPoint(x: 16, y: height), controlPoint2: CGPoint(x: 19, y: height))

            incomingColor.setFill()

        } else {
            bezierPath.move(to: CGPoint(x: width - 22, y: height))
            bezierPath.addLine(to: CGPoint(x: 17, y: height))
            bezierPath.addCurve(to: CGPoint(x: 0, y: height - 17), controlPoint1: CGPoint(x: 7.61, y: height), controlPoint2: CGPoint(x: 0, y: height - 7.61))
            bezierPath.addLine(to: CGPoint(x: 0, y: 17))
            bezierPath.addCurve(to: CGPoint(x: 17, y: 0), controlPoint1: CGPoint(x: 0, y: 7.61), controlPoint2: CGPoint(x: 7.61, y: 0))
            bezierPath.addLine(to: CGPoint(x: width - 21, y: 0))
            bezierPath.addCurve(to: CGPoint(x: width - 4, y: 17), controlPoint1: CGPoint(x: width - 11.61, y: 0), controlPoint2: CGPoint(x: width - 4, y: 7.61))
            bezierPath.addLine(to: CGPoint(x: width - 4, y: height - 11))
            bezierPath.addCurve(to: CGPoint(x: width, y: height), controlPoint1: CGPoint(x: width - 4, y: height - 1), controlPoint2: CGPoint(x: width, y: height))
            bezierPath.addLine(to: CGPoint(x: width + 0.05, y: height - 0.01))
            bezierPath.addCurve(to: CGPoint(x: width - 11.04, y: height - 4.04), controlPoint1: CGPoint(x: width - 4.07, y: height + 0.43), controlPoint2: CGPoint(x: width - 8.16, y: height - 1.06))
            bezierPath.addCurve(to: CGPoint(x: width - 22, y: height), controlPoint1: CGPoint(x: width - 16, y: height), controlPoint2: CGPoint(x: width - 19, y: height))

            outgoingColor.setFill()
        }

        bezierPath.close()
        bezierPath.fill()
    }

}

还有，tableView的东西：

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

    let cell = tableView.dequeueReusableCell(withIdentifier: "BiddingHistoryIdentifier", for: indexPath) as! BiddingHistoryTableViewCell

    let row = indexPath.row

    var strNew: [String] = splitString[row].components(separatedBy: "-")
    let strFirst = strNew[0].trimmingCharacters(in: .whitespacesAndNewlines)
    let strSecond = strNew[1].trimmingCharacters(in: .whitespacesAndNewlines)

    if !strFirst.elementsEqual(VendorLoginSetterGetter.strName.trimmingCharacters(in: .whitespacesAndNewlines)) {

        let text = strSecond
        let label =  UILabel()
        label.numberOfLines = 0
        label.font = UIFont.systemFont(ofSize: 18)
        label.textColor = .black
        label.text = text

        let constraintRect = CGSize(width: 0.66 * cell.frame.width,
                                    height: .greatestFiniteMagnitude)
        let boundingBox = text.boundingRect(with: constraintRect,
                                            options: .usesLineFragmentOrigin,
                                            attributes: [.font: label.font],
                                            context: nil)
        label.frame.size = CGSize(width: ceil(boundingBox.width),
                                    height: ceil(boundingBox.height))

        let bubbleSize = CGSize(width: label.frame.width + 28,
                                height: label.frame.height + 20)

        let bubbleView = BubbleView(isIncoming: true)
        bubbleView.frame.size = bubbleSize
        bubbleView.backgroundColor = .clear

        //bubbleView.center = cell.center
        bubbleView.frame.origin.y = (cell.frame.size.height / 2) - 20
        bubbleView.frame.origin.x = 50
        cell.addSubview(bubbleView)

        label.center = bubbleView.center
        cell.addSubview(label)

        let imageView = UIImageView(frame: CGRect(x: 8, y: 0, width: 35, height: 35))
        imageView.image = UIImage(named: "ic_vendor_black.png")
        imageView.frame.origin.y = (cell.frame.size.height / 2) - 15
        cell.addSubview(imageView)

    }
    else {

        let text = strSecond
        let label =  UILabel()
        label.numberOfLines = 0
        label.font = UIFont.systemFont(ofSize: 18)
        label.textColor = .white
        label.text = text

        let constraintRect = CGSize(width: 0.66 * cell.frame.width,
                                    height: .greatestFiniteMagnitude)
        let boundingBox = text.boundingRect(with: constraintRect,
                                            options: .usesLineFragmentOrigin,
                                            attributes: [.font: label.font],
                                            context: nil)
        label.frame.size = CGSize(width: ceil(boundingBox.width),
                                  height: ceil(boundingBox.height))

        let bubbleSize = CGSize(width: label.frame.width + 28,
                                height: label.frame.height + 20)

        let bubbleView = BubbleView(isIncoming: false)
        bubbleView.frame.size = bubbleSize
        bubbleView.backgroundColor = .clear

        //bubbleView.center = cell.center
        bubbleView.frame.origin.y = (cell.frame.size.height / 2) - 20
        bubbleView.frame.origin.x = cell.frame.size.width - 200
        cell.addSubview(bubbleView)

        label.center = bubbleView.center
        cell.addSubview(label)

        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 28, height: 28))
        imageView.image = UIImage(named: "ic_user_black.png")
        imageView.frame.origin.y = (cell.frame.size.height / 2) - 15
        imageView.frame.origin.x = cell.frame.size.width - 8
        cell.addSubview(imageView)

    }
    return cell
}

---

代码已按要求更新。

您需要将将将子视图添加到单元格的代码从cellForRowAt委托移动到各自的单元格类内部

正如@PeteMorris所说，现在的问题是，您将被重用的单元已经具有您在第一次出列时添加的子视图。因此，每当同一个单元退出队列时，都会再次向其添加子视图

• 优雅的解决方案是将设置视图的代码移动到cell类内部

• 如果要查找修补程序，可以在

  prepareforeuse

  中删除单元格中的所有子视图。（每次在退出队列之前重用单元格时，都会调用此方法）

您的重用方法如下所示。（此方法位于cell类中）

---

这可能是行重用策略的一个问题，尽管它看起来可能也与重复数据有关。当您有5个不同的号码而不是3个

580

号码时，是否会出现相同的问题？您需要提供有关如何创建和填充每个单元格的更多信息。在我看来，当一个单元格被重用时，您可能会添加另一个UILabel和UIImageView，而不是更改已有单元格的文本。查看如何在示例中的两个单元格中的旧标签上添加第二个标签？如果你能发布你的UITableViewDataSource实现，我相信有人能帮上忙。你能用tableview显示你的类吗？@IanMacDonald是的，当数字不同时也会出现。我在我的帖子中粘贴了整个泡泡类代码。@PeteMorris你的回答很有道理。每次从服务器传入新数据时，我都会添加一个视图。我会发布代码。哦，好吧，当向上滚动时向右移动的问题也是因为这个。。有了这个解决方案，这个问题也会得到解决。？@UmangBurman我还没有检查你的框架数学。但是如果它第一次正确地设置了自己，那么将代码移动到单元格应该可以修复它。但是，我敦促您探索自动布局来定位视图，因为它们比框架更灵活。谢谢您的回答和解释：）我会试试这个，好吧，我现在不在，所以现在无法尝试。。但是，我会投赞成票。再次感谢你。：）我确实修复了我的观点倍增问题，但不断变化的问题仍然存在（@UmangBurman这应该不难。只需在设置帧的位置保留一个断点并检查其值即可。

override func prepareForReuse() {
    super.prepareForReuse()

    for view in subviews {
        view.removeFromSuperview()
    }
}