根据单元格内容自动调整 Tableview 单元格的大小 (SWIFT)

Question

我正在尝试让我的 tableview 工作，因此当单击单元格时，它会自动调整大小以适应单元格内的内容。 （不同数量的文字会自动调整大小不同。

Cell when not clicked (first state and size it should go back to when clicked = 44.0

因此，对于此图像，这是每个单元格将处于默认状态并取消选择的阶段。白色文本将是唯一可见的内容。

Cell clicked state. resizes to my "let selectedCellHeight: CGFloat = 88.0 " constant. Which needs to automatically size to fit the green text no matter how much is in there.

这是我的 tableview 和 viewcontroller 的完整代码。

import UIKit

class TasksViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

@IBOutlet weak var tblTasks: UITableView!

//For persisting data
let defaults = UserDefaults.standard


override func viewDidLoad() {
    super.viewDidLoad()



    self.tblTasks.backgroundColor = UIColor(red: 64/255.0, green: 67/255.0, blue: 68/255.0, alpha: 0)


    self.tblTasks.reloadData()
    self.tblTasks.register(UINib(nibName: "WhiteTaskTableViewCell", bundle: nil), forCellReuseIdentifier: "nameCell")
    tblTasks.tableFooterView = UIView()

    let darkModeColor = UIColor(red: 52/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1.0)
    view.backgroundColor = darkModeColor


    tblTasks.dataSource = self;

    // Do any additional setup after loading the view.
}



override func viewWillAppear(_ animated: Bool) {
    self.tblTasks.reloadData()
}



override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}


func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
    return taskMgr.tasks.count

}



//Define how our cells look - 2 lines a heading and a subtitle
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{


    let identifier = "nameCell"
    var cell: WhiteTaskTableViewCell! = tableView.dequeueReusableCell(withIdentifier: identifier) as? WhiteTaskTableViewCell

    if cell == nil {
        tableView.register(UINib(nibName: "WhiteTaskTableViewCell", bundle: nil), forCellReuseIdentifier: identifier)
        cell = tableView.dequeueReusableCell(withIdentifier: identifier) as? WhiteTaskTableViewCell
    }


    //        Assign the contents of our var "items" to the textLabel of each cell
    //        cell.textLabel!.text = taskMgr.tasks[indexPath.row].name
    //        cell.detailTextLabel!.text = taskMgr.tasks[indexPath.row].desc

    cell.TaskNameLabel.text = taskMgr.tasks[indexPath.row].name
    cell.NotesLabel.text = taskMgr.tasks[indexPath.row].note

    cell.selectionStyle = .none



    return cell

}



func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
}



   func tableView(_ willDisplayforRowAttableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.backgroundColor = UIColor(red: 64/255.0, green: 67/255.0, blue: 68/255.0, alpha: 0)
}



func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
    if (editingStyle == UITableViewCellEditingStyle.delete) {
        // handle delete (by removing the data from your array and updating the tableview)

        taskMgr.removeTask(indexPath.row)
        tblTasks.reloadData()
    }
}



   // EXPAND CELL ON CLICK


// Global Variables/Constants

var selectedCellIndexPath: NSIndexPath?

let selectedCellHeight: CGFloat = 88.0
let unselectedCellHeight: CGFloat = 44.0

 func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

    self.tblTasks.rowHeight = UITableViewAutomaticDimension

    if selectedCellIndexPath == indexPath as NSIndexPath?  {
        return selectedCellHeight
    }
    return unselectedCellHeight
}



 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    if selectedCellIndexPath != nil && selectedCellIndexPath == indexPath as NSIndexPath? {
        selectedCellIndexPath = nil
    } else {
        selectedCellIndexPath = indexPath as NSIndexPath?
    }

    tableView.beginUpdates()
    tableView.endUpdates()

    if selectedCellIndexPath != nil {
        // This ensures, that the cell is fully visible once expanded
        tableView.scrollToRow(at: indexPath as IndexPath, at: .none, animated: true)
    }
}

/*
// MARK: - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    // Get the new view controller using segue.destinationViewController.
    // Pass the selected object to the new view controller.
}
*/


}

我愿意接受任何帮助和见解。非常感谢。

Answer 1

您需要为您的UITableView 设置一个Outlet，并将rowHeight 参数设置为UITableViewAutomaticDimension。您还需要将estimatedRowHeight 设置为适合您需要的值。这样，单元格的大小将适合其内容的大小。

@IBOutlet weak var tableView: UITableView!

override func viewDidLoad() {
      super.viewDidLoad()        
      tableView.estimatedRowHeight = 55
      tableView.rowHeight = UITableViewAutomaticDimension
}

为此，您需要为 Cell 的每个元素设置自动布局约束。

Source Apple Doc:

使用自动调整大小的表格视图单元格

在 iOS 中，您可以使用自动布局来定义表格视图的高度 细胞;但是，该功能默认不启用。

通常，单元格的高度由表格视图委托的 tableView:heightForRowAtIndexPath: 方法。启用自定尺寸表 查看单元格，您必须将表格视图的rowHeight 属性设置为 UITableViewAutomaticDimension。您还必须为 estimatedRowHeight 财产。只要这两个属性都 设置后，系统使用 Auto Layout 计算行的实际高度。

此外，尽量使估计的行高尽可能准确 可能的。系统计算滚动条高度等项目 基于这些估计。估计越准确，越 无缝的用户体验。