如何通过更改单元格的高度来创建动态 TableView 页脚

Posted

技术标签:

【中文标题】如何通过更改单元格的高度来创建动态 TableView 页脚【英文标题】:How to create dynamic TableView footer by changing height of cells 【发布时间】:2017-10-20 09:16:17 【问题描述】:

我想创建一个与表格视图单元格高度动态相关的页脚。

我最初的情况是这样的:

如果我点击一行,它会将此单元格的高度更改为 194(之前为 44)

它不显示所有行。

如果我得到页脚 -150,它看起来像:

如果我关闭所有单元格,它看起来像这样,我用 -150 到达页脚的 150 在这里是白色的:

我的代码:

var selectedCellIndexPath: Int?
let selectedCellHeight: CGFloat = 194.0
let unselectedCellHeight: CGFloat = 44.0
var cellsHeight = [44, 44, 44]

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) 
    tableView.beginUpdates()
    if selectedCellIndexPath != nil && selectedCellIndexPath == indexPath.row 
        selectedCellIndexPath = nil
    
    else 
        selectedCellIndexPath = indexPath.row
    
    if selectedCellIndexPath != nil 
        tableView.scrollToRow(at: indexPath, at: .none, animated: true)
    
    tableView.endUpdates()


func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat 
    let rowHeight:CGFloat = 44
    var rowsHeight:CGFloat = 3 * rowHeight
    /*for i in 0..<cellsHeight.count 
        rowsHeight += CGFloat(cellsHeight[i])
    */
    let topHeight = UIApplication.shared.statusBarFrame.height + self.navigationController!.navigationBar.frame.height
    let viewHeight = self.view.frame.height
    let headerHeight:CGFloat = 30
    let height = viewHeight - topHeight - rowsHeight - headerHeight //- 150

    return CGFloat(height)

只有一排的高度为 194,另一排为 44。任何想法如何解决这个问题? 谢谢

编辑:

func numberOfSections(in tableView: UITableView) -> Int 
    return 1


func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
    return 3


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    let dateFormatter = DateFormatter()
    //dateFormatter.dateStyle = DateFormatter.Style.short
    dateFormatter.dateFormat = "dd.MM.yyyy HH:mm"

    if indexPath.row == 0 
        let cell = tableView.dequeueReusableCell(withIdentifier: "workoutDateCell", for: indexPath) as! WorkoutDateTableViewCell
        cell.typeLabel.text = "Beginn"
        cell.dateDatepicker.date = Date()
        cell.dateDatepicker.tag = indexPath.row
        cell.dateLabel.text = dateFormatter.string(from: cell.dateDatepicker.date)
        cell.selectionStyle = .none
        return cell
    
    else if indexPath.row == 1 
        let cell = tableView.dequeueReusableCell(withIdentifier: "workoutDateCell", for: indexPath) as! WorkoutDateTableViewCell
        cell.typeLabel.text = "Ende"
        cell.dateDatepicker.date = Date()
        cell.dateDatepicker.tag = indexPath.row
        cell.dateLabel.text = dateFormatter.string(from: cell.dateDatepicker.date)
        cell.selectionStyle = .none
        return cell
    
    else 
        let cell = tableView.dequeueReusableCell(withIdentifier: "workoutSportsCell", for: indexPath) as! WorkoutSportsTableViewCell
        cell.sportsLabel.text = "Sportart"
        cell.sportstypeLabel.text = workoutSports[coreData.getSportsIndex()]
        cell.sportsPicker.delegate = self
        cell.sportsPicker.dataSource = self
        cell.sportsPicker.selectRow(coreData.getSportsIndex(), inComponent: 0, animated: false)
        cell.selectionStyle = .none
        return cell
    

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat 
    if selectedCellIndexPath == indexPath.row 
        return selectedCellHeight
    
    return unselectedCellHeight

【问题讨论】:

【参考方案1】:

要归档它,您只能使用单元格而不是页脚视图。

第 1 步:删除页脚视图。

第 2 步: 添加日期选择器的单元格。

第 3 步:当您单击开始和结束日期时间单元格时,然后在选定单元格下方插入日期时间单元格并重新加载表格视图。

第 4 步:希望这能解决您的问题。

如果您有任何疑问,请告诉我。

编辑:根据讨论,您只需使用 tableFooterViewForSection 删除多余的单元格分隔符。

所以您只需要添加以下行即可解决您的问题:

tableView.tableFooterView = UIView(frame: CGRect(x:0, y:0, width:tableView.frame.width, heigth:0))

并删除func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -&gt; CGFloat 方法。

希望对你有帮助。

【讨论】:

如果我理解正确,我应该为选择器创建 3 个额外的单元格并在我点击的单元格下方显示一个? 没有。您使用的是静态还是动态单元原型? 动态单元原型 好的,那么您只需要为DateTime Picker创建一个单元格。当您单击任何单元格时,然后通过更改数组中选取器对象的位置重新排列单元格并重新加载表格视图。 这和改变点击单元格的高度一样吗?我不知道你的详细意思..

以上是关于如何通过更改单元格的高度来创建动态 TableView 页脚的主要内容,如果未能解决你的问题,请参考以下文章

动态更改表格视图单元格的高度

如何在 Swift 中动态更改包含 UICollectionView 单元格的 UITableView 单元格的高度?

根据单元格的不更改单元格高度动态更改 UICollectionView 高度

UITableView:单击按钮时如何动态更改单元格高度?

如何通过单击根据其内容更改表格单元格的高度(折叠和展开)?

如何在使用tableViews自定义单元格时在运行时更改表视图单元格高度?