调整 iOS 包含多个视图的表格视图单元格

Resize iOS tableviewcell contaning several views

我正在寻找一种方法来调整具有更复杂布局的 tableView 单元格的大小。

为了简化问题的描述,tableview 单元格包含三个视图。一个定义单元格 "background" 的视图和两个附加视图(每个视图的高度都是背景单元格的 45%。 这些附加视图之一被标记为背景视图的顶部,另一个标记为底部。 如果用户点击 tableview 单元格,它应该以只有顶部视图可见的方式缩小,并且在用户再次点击后,它应该再次调整到完整大小。

用户点击由函数处理

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)

并且调整大小由

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

不幸的是,在缩小表格视图单元格后,两个附加视图都以其原始高度的一半显示。

    var selectedCell = -1

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
    {
        tableView.deselectRow(at: indexPath, animated: true)
        if (selectedCell != indexPath.row)
        {
            selectedCell = indexPath.row
        }
        else {
            selectedCell = -1
        }
        tableView.beginUpdates()
        tableView.endUpdates()

    }

    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if (indexPath.row == selectedCell)
        {
            return 65
        }
        else {

            return UITableView.automaticDimension
        }
    }

我现在正在寻找一种方法来更改代码,在缩小后只有上视图可见。 Example picture of the fully visible cell 在示例图片中,缩小tableview cell后应该只显示红色视图。

提前致谢 帕特里克

原因是当单元格缩小时,您的视图(因为它们的大小是相对于父级的大小定义的)也会缩小并且以一半大小可见。从外观上看,他们并不是真的gone/hidden。您需要的是 hide/remove 从视图中查看它们。

从您的描述来看,您使用的是普通约束来实现此目的。这可以通过仅使用约束来完成,但需要做更多的工作。所以我会提到两种方法来完成这个:

  1. 仅使用约束

当用户点击您的单元格时,您需要将底部视图的高度设置为 0。另外,如果您不希望单元格收缩时显示中间的 10% 部分,则需要额外创建一个从顶视图底部到单元格 contentView 底部的约束。同样,您的底部视图也将有两个高度限制,一个用于 45%,一个用于 0。 这个想法是同时具有这两个约束但具有不同的优先级。初始约束将具有更高的优先级,而另一个将具有更低的优先级。尽管这些约束会相互矛盾,但 iOS 将采用更高优先级的约束来呈现视图。

接下来,您需要在用户点击时切换较高优先级约束的活动 属性,这将反过来让 iOS 使用较低优先级约束来呈现视图。

  1. 使用堆栈视图:

iOS 9 引入了堆栈视图,它是一个辅助视图。它基本上为您处理约束,至少是其中的一部分。当您从堆栈视图的子视图中隐藏一个视图时,堆栈视图会自动使该视图的高度为 0。阅读有关垂直堆栈视图的更多信息,您就会明白这一点。