Expandable/Collapsable TableView with Custom Cell for FAQs - ios

Question

I wanted to implement expandable/collapsable UITableView with Custom UITableViewCell that adjusts its side according to the question/answer text. I have tried with different methods but none of it worked as I desire. If there is anyone who has implemented the same thing then kindly share the project link or let me know how it's done. Any kind of help would be greatly appreciated. I am sharing the screenshot of what I wanted.
Here's what I have tried. When I scroll the table view, it adds extra spaces between the cells and also messed up the UITextView.
enter code here
// Mark: Table View Delegate Methods
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let questionTextView = UITextView(frame:CGRect(x: 0, y: 0, width: 265.0, height: 30))
let answerTextView = UITextView(frame:CGRect(x: 0, y: 0, width: 265.0, height: 30))
questionTextView.text = questionStringArray[indexPath.row]
answerTextView.text = answerStringArray[indexPath.row]
Common.adjustUITextViewHeight(questionTextView)
Common.adjustUITextViewHeight(answerTextView)
let cellHeightExpanded:CGFloat = CGFloat(3 + Double(questionTextView.frame.size.height) + 5 + Double(answerTextView.frame.size.height) + 10)
let cellHeightCollapsed:CGFloat = CGFloat(3 + Double(questionTextView.frame.size.height) + 5)
if (indexPath.row == selectedQuestion)
{
return cellHeightExpanded
}
else
{
return cellHeightCollapsed
}
}
// number of rows in table view
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
// create a cell for each table view row
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! FAQsCell
cell.backgroundColor = UIColor.white
cell.tvQuestion.text = questionStringArray[indexPath.row]
cell.tvAnswer.text = answerStringArray[indexPath.row]
Common.adjustUITextViewHeight(cell.tvQuestion)
Common.adjustUITextViewHeight(cell.tvAnswer)
cell.tvAnswer.frame = CGRect(origin: CGPoint(x: cell.tvAnswer.frame.origin.x, y : cell.tvQuestion.frame.origin.y + cell.tvQuestion.frame.size.height), size: CGSize(width: cell.tvAnswer.frame.size.width, height: cell.tvAnswer.frame.size.height))
if indexPath.row == selectedQuestion {
cell.backgroundColor = UIColor.okapiCellGrayColorForPendingAppLevel()
cell.tvQuestion.textColor = UIColor.white
cell.tvAnswer.textColor = UIColor.white
}
else {
cell.backgroundColor = UIColor.clear
cell.tvQuestion.textColor = UIColor.blue_grey_700()
cell.tvAnswer.textColor = UIColor.blue_grey_700()
}
return cell
}
// method to run when table view cell is tapped
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
selectedQuestion = indexPath.row
faqsTableView.reloadData()
}

Answer 1

Add a vertical stackview in the custom cell and show/hide answer based on selected cell
class ViewController: UITableViewController {
var questions = [(question:String,answer:String)]()
var selectedQuestion = -1
override func viewDidLoad() {
super.viewDidLoad()
questions = [(question:"Question 1",answer:"Answer 1"),(question:"Question 2",answer:"Answer 2"),
(question:"Question 3",answer:"Answer 3"),(question:"Question 4",answer:"Answer 4"),
(question:"Question 5",answer:"Answer 5")]
self.view.backgroundColor = .white
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 50
tableView.register(FAQsCell.self, forCellReuseIdentifier: "FAQsCell")
}
}
extension ViewController {
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return 50
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return questions.count
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "FAQsCell") as! FAQsCell
cell.questionLbl.text = questions[indexPath.row].question
cell.answerLbl.text = questions[indexPath.row].answer
if indexPath.row == selectedQuestion {
cell.backgroundColor = .groupTableViewBackground
cell.dropDownImgView.image = //upimage
cell.answerView.isHidden = false
} else {
cell.backgroundColor = .white
cell.dropDownImgView.image = //downimage
cell.answerView.isHidden = true
}
return cell
}
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
selectedQuestion = indexPath.row
tableView.reloadData()
}
}
class FAQsCell: UITableViewCell {
let stackView = UIStackView()
let questionLbl = UILabel()
let dropDownImgView = UIImageView()
let answerView = UIView()
let answerLbl = UILabel()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit() {
stackView.axis = .vertical
stackView.distribution = .fillProportionally
stackView.spacing = 5
stackView.alignment = .fill
stackView.translatesAutoresizingMaskIntoConstraints = false
addSubview(stackView)
let questionView = UIView()
questionView.translatesAutoresizingMaskIntoConstraints = false
questionView.heightAnchor.constraint(equalToConstant: 35).isActive = true
stackView.addArrangedSubview(questionView)
questionLbl.font = UIFont.boldSystemFont(ofSize: 18)
questionLbl.translatesAutoresizingMaskIntoConstraints = false
questionView.addSubview(questionLbl)
dropDownImgView.contentMode = .scaleAspectFit
dropDownImgView.translatesAutoresizingMaskIntoConstraints = false
questionView.addSubview(dropDownImgView)
answerView.translatesAutoresizingMaskIntoConstraints = false
answerView.heightAnchor.constraint(greaterThanOrEqualToConstant: 35).isActive = true
stackView.addArrangedSubview(answerView)
answerLbl.numberOfLines = 0
answerLbl.lineBreakMode = .byWordWrapping
answerLbl.font = UIFont.systemFont(ofSize: 17)
answerLbl.translatesAutoresizingMaskIntoConstraints = false
answerView.addSubview(answerLbl)
questionView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-(10)-[questionLbl]-(10)-[dropDownImgView(25)]-(10#999)-|", options: [.alignAllCenterY], metrics: nil, views: ["questionLbl":questionLbl, "dropDownImgView": dropDownImgView]))
dropDownImgView.heightAnchor.constraint(equalTo: dropDownImgView.widthAnchor).isActive = true
questionView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-(5)-[questionLbl(25)]-(5)-|", options: [], metrics: nil, views: ["questionLbl":questionLbl]))
answerView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-(10)-[answerLbl]-(10)-|", options: [], metrics: nil, views: ["answerLbl":answerLbl]))
answerView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-(5)-[answerLbl(>=25)]-(5)-|", options: [], metrics: nil, views: ["answerLbl":answerLbl]))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-(5)-[stackView]-(5#999)-|", options: [], metrics: nil, views: ["stackView":stackView]))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-(5)-[stackView]-(5)-|", options: [], metrics: nil, views: ["stackView":stackView]))
}
}

Answer 2

you can achieve through constraint.
give title and description constraint to bottom to superview.
after that change priority of constraint accordingly.
let me know if you want to understand through imagee.