UITableViewCell subclass displaying itself twice on top of itself - swift

Question

Excuse the terrible title. The best way to explain this is to show it visually.
So I have a custom UITableViewCell, and when the view controller (with the table view) is loaded, the cell ends up looking like this:
and I have no idea why. It DOES fix itself if I tap on it, as shown here:
I’ve also noticed that this only happens when the cell is not immediately present on screen when the view controller loads (aka, you have to scroll down to it). If it was the first cell in the table view, it appears correctly.
code:
class CustomTableViewCell: UITableViewCell {
let label1 = UILabel()
let label2 = UILabel()
let label3 = UILabel()
let label4 = UILabel()
let label5 = UILabel()
let label6 = UILabel()
let label7 = UILabel()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
label1.translatesAutoresizingMaskIntoConstraints = false
label1.text = "Test"
label1.font = UIFont.systemFont(ofSize: 20, weight: .bold)
addSubview(label1)
label2.translatesAutoresizingMaskIntoConstraints = false
label2.text = "Test"
label2.textColor = .secondaryLabel
label2.font = UIFont.systemFont(ofSize: 13)
addSubview(label2)
label3.translatesAutoresizingMaskIntoConstraints = false
label3.text = "Test"
label3.font = UIFont.systemFont(ofSize: 17)
addSubview(label3)
label4.translatesAutoresizingMaskIntoConstraints = false
label4.text = "Test"
label4.textColor = .secondaryLabel
label4.font = UIFont.systemFont(ofSize: 13)
addSubview(label4)
label5.translatesAutoresizingMaskIntoConstraints = false
label5.text = "Test"
label5.font = UIFont.systemFont(ofSize: 17)
addSubview(label5)
label6.translatesAutoresizingMaskIntoConstraints = false
label6.text = "Test"
label6.textColor = .secondaryLabel
label6.font = UIFont.systemFont(ofSize: 13)
addSubview(label6)
label7.translatesAutoresizingMaskIntoConstraints = false
label7.text = "Test"
label7.font = UIFont.systemFont(ofSize: 17)
addSubview(label7)
NSLayoutConstraint.activate([
label1.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor, constant: 20),
label1.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor, constant: 16),
label1.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor, constant: -16),
label2.topAnchor.constraint(equalTo: label1.bottomAnchor, constant: 20),
label2.leadingAnchor.constraint(equalTo: label1.leadingAnchor),
label2.trailingAnchor.constraint(equalTo: label1.trailingAnchor),
label3.topAnchor.constraint(equalTo: label2.bottomAnchor, constant: 3),
label3.leadingAnchor.constraint(equalTo: label2.leadingAnchor),
label3.trailingAnchor.constraint(equalTo: label2.trailingAnchor),
label4.topAnchor.constraint(equalTo: label3.bottomAnchor, constant: 20),
label4.leadingAnchor.constraint(equalTo: label3.leadingAnchor),
label4.trailingAnchor.constraint(equalTo: label3.trailingAnchor),
label5.topAnchor.constraint(equalTo: label4.bottomAnchor, constant: 3),
label5.leadingAnchor.constraint(equalTo: label4.leadingAnchor),
label5.trailingAnchor.constraint(equalTo: label4.trailingAnchor),
label6.topAnchor.constraint(equalTo: label5.bottomAnchor, constant: 20),
label6.leadingAnchor.constraint(equalTo: label5.leadingAnchor),
label6.trailingAnchor.constraint(equalTo: label5.trailingAnchor),
label7.topAnchor.constraint(equalTo: label6.bottomAnchor, constant: 3),
label7.leadingAnchor.constraint(equalTo: label6.leadingAnchor),
label7.trailingAnchor.constraint(equalTo: label6.trailingAnchor),
])
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
--
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomTableViewCell
return cell
}

Answer 1

My dear friend, I can not see any bottomAnchor constraints :). Why don't you check this out. Maybe it helps you to understand how autolayout works in programmatically. If you have any question about it, please reach out. Have fun :)
PS: You should addsubview into contentView. Do not add any view directly to cell superview. :)
class TestTableViewCell: UITableViewCell {
private lazy var labelFirst: UILabel = {
let temp = UILabel()
temp.translatesAutoresizingMaskIntoConstraints = false
temp.font = UIFont(name: "System", size: 12)
temp.text = "Test"
return temp
}()
private lazy var labelSecond: UILabel = {
let temp = UILabel()
temp.translatesAutoresizingMaskIntoConstraints = false
temp.font = UIFont(name: "System", size: 15)
temp.text = "Test"
return temp
}()
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
addMajorViews()
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
func addMajorViews() {
contentView.addSubview(labelFirst)
contentView.addSubview(labelSecond)
NSLayoutConstraint.activate([
labelFirst.topAnchor.constraint(equalTo: contentView.topAnchor),
labelFirst.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
labelFirst.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
labelSecond.topAnchor.constraint(equalTo: labelFirst.bottomAnchor),
labelSecond.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
labelSecond.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
labelSecond.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
])
}
}