Why cell is display overflow the table view in Swift

Question

I have try to find the solution for it a few days time. However non of the answers online are suitable for my situation. I have fix make the cell to cliptobounds in the table view and also assign constraints to fix the table position and height. Below are some part of my code.

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    
    if hiddenRow.contains(indexPath.row) || hiddenRow2.contains(indexPath.row){
        rowHeight.append(300)
        return 300 //Expanded
    }
    else{
        rowHeight.append(120)
        return 120 //Not Expanded
    }
    
} 

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
    let cell = tableView.dequeueReusableCell(withIdentifier: "med_reusable_cell", for: indexPath as IndexPath) as! MedListTableViewCell
    
    cell.backgroundColor = TRANSPARENT
    cell.layer.cornerRadius = DEFAULT_CORNER_RADIUS
    
    active_table_height.constant = self.view.frame.size.height * 11/36
    expired_table_height.constant = self.view.frame.size.height * 11/36

cell overflow

The different between my code and others are

1. This is an expendable view cell which the height will be change based whether the cell is expended
2. I use a reusable cell for two tables.

Hope can get some ideas on how this could solve. Thanks in advanced.

Answer 1

You can achieve this by adding a header to each cell, then when you'll click it, reload the table view with the opened cell look at this example:

DataModel :

struct  DataItem {
    var isExpand: Bool
    var title: String
    var value:String
    
    
    init(isExpand:Bool = false, title:String, value:String) {

        self.isExpand = isExpand
        self.title = title
        self.value = value
    }
}

Custom Header witch will listen to events:

protocol CustomHeaderViewDelegate: AnyObject {
    func headerViewTap(_ section: Int)
}

class CustomHeaderView: UITableViewHeaderFooterView {
    
    weak var delegate: CustomHeaderViewDelegate?
    var sectionNumber: Int?
            
     required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        let gesture = UITapGestureRecognizer(target: self, action: #selector(CustomHeaderView.tableViewSectionTapped(_:)))
        self.addGestureRecognizer(gesture)
    }

    @objc func tableViewSectionTapped(_ gesture: UIGestureRecognizer) {
        if let sectionNumber =  sectionNumber{
            delegate?.headerViewTap(sectionNumber)
        }
    }
}

TableView and Custom Header delegates

extension ViewController :  UITableViewDelegate, UITableViewDataSource{
    //The number of sections fits the number of cells, the current list is an array of DataObject, holding a title and a content.
    func numberOfSections(in tableView: UITableView) -> Int {
        return self.currentList.count
    }
    //Each section(group of cells) contains one row
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as UITableViewCell
        return cell
    }
    
    //update heights for row if the header has been taped
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        let isExpanded = self.currentList[indexPath.section].isExpand
        if isExpanded {
            return UITableView.automaticDimension
        }
        return 0
    }
    //update the estimatedHeightForRowAt if the hader has been taped
    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        let isExpanded = self.currentList[indexPath.section].isExpand
        if isExpanded{
            return UITableView.automaticDimension
        }
        return 0
    }
    
    //returns a custom header
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "Header") as! CustomHeaderView
        return headerView
    }
}

extension ViewController : CustomeHeaderViewDelegate{
    func headerViewTap(_ section: Int) {
        selectedItem = self.currentList[section]
        let output = self.currentList.map({ (item:DataItem) -> DataItem in
            var result = item
            if result.title == self.selectedItem?.title{
                result.isExpand = !result.isExpand
            }
            return result
        })
        self.currentList = output
        self.tableView.reloadSections(IndexSet(integer: section), with: UITableView.RowAnimation.automatic)
        self.tableView.endUpdates()
    }
}