Расширяемый / складной TableView с пользовательской ячейкой для часто задаваемых вопросов

Question

Я хотел реализовать расширяемый / складываемый UITableView с помощью Custom UITableViewCell, который регулирует свою сторону в соответствии с текстом вопроса / ответа.Я пробовал разными методами, но ни один из них не работал так, как я хочу.Если есть кто-то, кто реализовал то же самое, пожалуйста, поделитесь ссылкой на проект или дайте мне знать, как это делается.Любая помощь будет принята с благодарностью.Я делюсь скриншотом того, что я хотел.

Вот что я попробовал.Когда я прокручиваю табличное представление, это добавляет дополнительные пробелы между ячейками, а также портит 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

Добавление вертикального стека в пользовательской ячейке и отображение / скрытие ответа на основе выбранной ячейки

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

вы можете достичь через ограничение.

задайте ограничение заголовка и описания снизу для суперпредставления.

после этого соответственно изменить приоритет ограничения.

Дайте мне знать, если вы хотите понять через изображение.