View is getting replaced while Scrolling in UITableView - ios

Question

I am an Android Developer and very new to iOS App Development. I am trying to build a simple chat system with only one line of data in each cell.
I am using a custom UIView class to generate a bubble and a UILabel and an UIImageView programmatically.
When I run the app for the first time, everything looks good. Please see the image below:
But, the problem occurs when I scroll the UITableView Upwards and I don't understand why the bubbles shift themselves towards the right side. See the image below:
Some post in SO said that it is one of the feature of UITableView.
How should I solve this?
If you need any code snippets from any part of the App, please comment below.
PS: I am using Xcode 9 and iOS 11.4 as testing device and Swift 4 programming.
Any help would be appreciated. Thanks.
Below is BubbleView Class:
EDIT
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()
}
}
And, The tableView thingy:
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
}
Code Updated as Requested.

Answer 1

You need to move your code that adds the subviews to the cell from the cellForRowAt delegate to inside their respective cell classes.
The problem right now like #PeteMorris said, is that your cells which will be reused will already have the subviews which you added when it was dequeued the first time. So whenever the same cell is dequeued, subviews are added to it again.
The elegant solution would be to move the code that sets up the view to inside your cell class.
If you are looking for a hotfix you could remove all the subviews from the cell in prepareForReuse. (This method is called every time your cell is reused before dequeue-ing)
Your reuse method would look like this. (This method is inside your cell class)
override func prepareForReuse() {
super.prepareForReuse()
for view in subviews {
view.removeFromSuperview()
}
}