UITableView Custom Cell is duplicating UIButton on scroll - ios

Question

I have a UITableViewController that contains a number of custom UITableViewCells types.
One of these types simply is a cell containing a UIStackView that itself contains one or more UIButton's.
When scrolling off screen and back on, the buttons are being added again. This happens on each scroll event.
Pre Scroll Image
Post Scroll Image
I understand that as a cell is reused for performance potentially what is happening is my setup code in cellForRowAt where I configure a cell is being executed again.
Hence it is adding 3 buttons from the data source, to the cell, which already contains buttons from the last render.
I do not understand how I can clear this up and prevent this behaviour however and would very much appreciated someone offering an insight as I am lost.
I have been able to prepare a small app that recreates this as I cannot share my current project as it is closed source.
I apologise for the mountain of code below, this is however the minimum required to simply drop into a project and recreate.
class TableViewController: UITableViewController {
let textCellId = "textCellId"
let buttonCellId = "buttonCellId"
// MARK: - Mock Data Source
let cellContent = [
Message(type: .buttonGroup, buttonGroup: [
MessageButton(label: "Button #1"),
MessageButton(label: "Button #2"),
MessageButton(label: "Button #3")
]),
Message(type: .text, text: "A"),
Message(type: .text, text: "B"),
Message(type: .text, text: "C"),
Message(type: .text, text: "D"),
Message(type: .text, text: "E"),
Message(type: .text, text: "F"),
Message(type: .text, text: "G"),
Message(type: .text, text: "H"),
Message(type: .text, text: "I"),
Message(type: .text, text: "J"),
Message(type: .text, text: "K"),
Message(type: .text, text: "L"),
Message(type: .text, text: "M"),
Message(type: .text, text: "N"),
Message(type: .text, text: "O"),
Message(type: .text, text: "P"),
Message(type: .text, text: "Q"),
Message(type: .text, text: "R"),
Message(type: .text, text: "S"),
]
override func viewDidLoad() {
super.viewDidLoad()
registerCells()
configureTableView()
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return cellContent.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let item = cellContent[indexPath.row]
switch indexPath.row {
case 0:
let cell = tableView.dequeueReusableCell(withIdentifier: buttonCellId, for: indexPath) as! ButtonCell
cell.buttonGroupContent = item.buttonGroup
return cell
default:
let cell = tableView.dequeueReusableCell(withIdentifier: textCellId, for: indexPath) as! TextCell
cell.textLabel?.text = item.text
return cell
}
}
}
// MARK: - Misc TableView Setup
extension TableViewController {
fileprivate func registerCells() {
tableView.register(TextCell.self, forCellReuseIdentifier: textCellId)
tableView.register(ButtonCell.self, forCellReuseIdentifier: buttonCellId)
}
fileprivate func configureTableView() {
tableView.allowsSelection = false
tableView.alwaysBounceVertical = false
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 200
tableView.separatorStyle = .none
tableView.backgroundColor = UIColor.lightGray
tableView.contentInset = UIEdgeInsets(top: 24, left: 0, bottom: 50, right: 0)
tableView.tableFooterView = UIView()
}
}
// MARK: - Cell Types
class TextCell: UITableViewCell {
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
class ButtonCell: UITableViewCell {
var buttonGroupContent: [MessageButton]? {
didSet {
anchorSubViews()
}
}
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
fileprivate var button: UIButton {
let button = UIButton(type: .custom)
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.darkGray
button.contentEdgeInsets = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
button.layer.cornerRadius = 5
button.layer.masksToBounds = true
return button
}
fileprivate let buttonGroupStackView: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.distribution = .fillEqually
stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
stackView.isLayoutMarginsRelativeArrangement = true
stackView.spacing = UIStackView.spacingUseSystem
return stackView
}()
}
extension ButtonCell {
fileprivate func anchorSubViews() {
guard let buttons = buttonGroupContent?.enumerated() else { return }
for (index, b) in buttons {
let btn = button
btn.setTitle(b.label, for: .normal)
btn.frame = CGRect(x: 0, y: 0, width: 200, height: 40)
btn.tag = index
buttonGroupStackView.addArrangedSubview(btn)
}
addSubview(buttonGroupStackView)
NSLayoutConstraint.activate([
buttonGroupStackView.topAnchor.constraint(equalTo: topAnchor),
buttonGroupStackView.leadingAnchor.constraint(equalTo: leadingAnchor),
buttonGroupStackView.bottomAnchor.constraint(equalTo: bottomAnchor),
buttonGroupStackView.trailingAnchor.constraint(equalTo: trailingAnchor)
])
}
}
// MARK: - Misc for setup
struct MessageButton {
let label: String
}
enum MessageType {
case text, buttonGroup
}
struct Message {
let type: MessageType
let text: String?
let buttonGroup: [MessageButton]?
init(type: MessageType, text: String? = nil, buttonGroup: [MessageButton]? = nil) {
self.type = type
self.text = text
self.buttonGroup = buttonGroup
}
}

Answer 1

Because cells are reusable, content stays. So your old buttons are still in your stack view and you're adding next buttons every time.
To fix this, before you add new buttons to UIStackView remove old buttons
extension ButtonCell {
fileprivate func anchorSubViews() {
...
for case let button as UIButton in buttonGroupStackView.subviews {
button.removeFromSuperview()
}
for (index, b) in buttons {
...
buttonGroupStackView.addArrangedSubview(btn)
}
...
}
}

Answer 2

Make your button and buttonGroupStackView properties optional and weak. The addSubview method on will retain a strong reference to it's subview. So it never gets removed. And override prepareForReuse() to do whatever cleanup necessary and make sure the stackview has been removed from the cell. Here's how you could do it:
class ButtonCell: UITableViewCell {
var buttonGroupContent: [MessageButton]? {
didSet {
anchorSubViews()
}
}
fileprivate weak var buttonGroupStackView: UIStackView?
// MARK: - Initialization
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.initialSetup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.initialSetup()
}
private func initialSetup() -> Void {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.distribution = .fillEqually
stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
stackView.isLayoutMarginsRelativeArrangement = true
stackView.spacing = UIStackView.spacingUseSystem
self.addSubview(stackView)
self.buttonGroupStackView = stackView
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: topAnchor),
stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
stackView.bottomAnchor.constraint(equalTo: bottomAnchor),
stackView.trailingAnchor.constraint(equalTo: trailingAnchor)
])
}
// MARK: - Subclass Overrides
override func prepareForReuse() {
super.prepareForReuse()
self.buttonGroupStackView?.subviews.forEach({ $0.removeFromSuperview()} )
}
// MARK: - Private
fileprivate func createButton() -> UIButton {
let button = UIButton(type: .custom)
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.darkGray
button.contentEdgeInsets = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
button.layer.cornerRadius = 5
button.layer.masksToBounds = true
return button
}
}
extension ButtonCell {
fileprivate func anchorSubViews() {
guard let buttons = buttonGroupContent?.enumerated() else { return }
for (index, b) in buttons {
let btn = self.createButton()
btn.setTitle(b.label, for: .normal)
btn.frame = CGRect(x: 0, y: 0, width: 200, height: 40)
btn.tag = index
self.buttonGroupStackView?.addArrangedSubview(btn)
}
}
}
It is always recommended to use a weak reference to subviews or IBOutlet properties unless you require otherwise.