How to maintain UITableViewCell state when UITableView scrolling?

Question

I have a question about expanding UITableViewCell.
When I click UIButton which title is "Show more" and it's expanding successfully.
And Then When I scroll UITableView, I see a situation which is the other cell I don't click it's UIButton also expand.
Have any good idea to me to fix this problem?
Thanks.

class ViewController: UIViewController {

let tableView = UITableView()
let cellWithButton = "cellWithButton"
var isExpand: Bool = false
var expandIndexs: [IndexPath] = []
let text = "If you read and listen to two articles every day, your reading and listening skills can immm If you read and listen to two articles every day, your reading and listening skills can immm If you read and listen to two articles every day, your reading and listening skills can immm If you read and listen to two articles every day, your reading and listening skills can immm If you read and listen to two articles every day, your reading and listening skills can immm"

override func viewDidLoad() {
    super.viewDidLoad()

    tableView.delegate = self
    tableView.dataSource = self
    tableView.allowsSelection = false
    tableView.separatorInset = .zero
    tableView.estimatedRowHeight = 44
    tableView.rowHeight = UITableViewAutomaticDimension
    tableView.register(WithButtonTableViewCell.self, forCellReuseIdentifier: cellWithButton)


    self.view.addSubview(tableView)

    tableView.snp.makeConstraints { (make) in
        make.top.left.right.bottom.equalToSuperview()
    }
}

@objc func btnPressed(sender: UIButton) {

    let indexPath = IndexPath(row: sender.tag, section: 0)

    if self.isExpand == false {

        self.isExpand = true

        self.expandIndexs.append(indexPath)

    } else {
        self.isExpand = false

        let index = self.expandIndexs.index(of: indexPath)

        if let index = index {
            self.expandIndexs.remove(at: index)
        }
    }

    tableView.beginUpdates()
    tableView.reloadRows(at: [indexPath], with: .none)
    tableView.endUpdates()

}
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
}

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

    let cell = tableView.dequeueReusableCell(withIdentifier: cellWithButton, for: indexPath) as! WithButtonTableViewCell

    if self.expandIndexs.contains(indexPath) {
        cell.cellIsExpand = self.isExpand
    }
    cell.titleLabel.text = text
    cell.expandButton.addTarget(self, action: #selector(btnPressed), for: .touchUpInside)
    cell.expandButton.tag = indexPath.row
    cell.layoutIfNeeded()

    return cell
}
}


class WithButtonTableViewCell: UITableViewCell {

var cellIsExpand: Bool = false

let titleLabel: UILabel = { () -> UILabel in
    let ui = UILabel()
    ui.textColor = UIColor.black
    return ui
}()

let expandButton: UIButton = { () -> UIButton in
    let ui = UIButton()
    ui.setTitleColor(UIColor.blue, for: .normal)
    return ui
}()

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}

override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    loadUI()
    loadLayout()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")

}

override func layoutIfNeeded() {
    super.layoutIfNeeded()

    if cellIsExpand == true {
        titleLabel.numberOfLines = 0
        expandButton.setTitle("Close.", for: .normal)
    }else{
        titleLabel.numberOfLines = 2
        expandButton.setTitle("Show More.", for: .normal)
    }
}

func loadUI() {

    self.addSubview(titleLabel)
    self.addSubview(expandButton)
}

func loadLayout() {

    titleLabel.snp.makeConstraints { (make) in
        make.top.left.equalTo(15)
        make.right.equalTo(-15)
    }

    expandButton.snp.makeConstraints { (make) in
        make.top.equalTo(titleLabel.snp.bottom).offset(10)
        make.left.equalTo(10)
        make.right.equalTo(-15)
        make.bottom.equalTo(-15)            
    }
}
}

Answer 1

You should have an array of boolean for isExpand , and in cellForRow check if it's true change height of row .

First of all make array :

var expandingStateArray = [false,false,false,false,false,false,false,false,false,false]

Then in cellForRows check state of each cell :

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

        let cell = tableView.dequeueReusableCell(withIdentifier: cellWithButton, for: indexPath) as! WithButtonTableViewCell

if expandingStateArray[indexPath.row] {
            titleLabel.numberOfLines = 0
            expandButton.setTitle("Close.", for: .normal)
        }else{
            titleLabel.numberOfLines = 2
            expandButton.setTitle("Show More.", for: .normal)
        }
        cell.titleLabel.text = text
        cell.expandButton.addTarget(self, action: #selector(btnPressed), for: .touchUpInside)
        cell.expandButton.tag = indexPath.row
        cell.layoutIfNeeded()


        return cell
    }
    }

And in target method for button write this :

@objc func btnPressed(sender: UIButton) {

let indexPath = IndexPath(row: sender.tag, section: 0)

expandingStateArray[sender.tag] = !expandingStateArray[sender.tag]

tableView.beginUpdates()
tableView.reloadRows(at: [indexPath], with: .none)
tableView.endUpdates()

}
}

Answer 2

Just call layoutIfNeeded() on your cell after you assign/or not its cellIsExpand variable

if self.expandIndexs.contains(indexPath) {
    cell.cellIsExpand = self.isExpand
}
cell.layoutIfNeeded()