运行时 UITableView 标头动态高度答案

【问题标题】：UITableView header dynamic height in run-time运行时 UITableView 标头动态高度
【发布时间】：2017-10-27 00:25:36
【问题描述】：

我知道有很多关于它的帖子，但也许在最新的 iOS 中对此有一些更新......

我认为我们所有人都有一个任务来创建 viewController，它在顶部有很多内容，其中大多数是自定大小的，在最底部它发现你需要显示一些 @987654323 @ 有很多项目...

可以做到的第一个解决方案是使用UIScrollView，完全不用关心reusableCells。
第二是使用UITableView的headerView并在每次需要时手动调整其高度（或通过调用systemLayoutSizeFittingSize:）。
也许第三种解决方案是分别使用UITableView 和自定大小的UIView，在tableView 上使用UIEdgeInsets。并且取决于哪个对象具有更高的“zIndex”，它可能会带来处理交互的问题...
第四个解决方案是使用单元格上方的全部内容，就像一个单独的单元格一样。完全不确定这是个好主意...

问题：这个问题有什么新的解决方案吗？我已经有 2 年没有深入研究了……也许在新的 iOS 中，UIScrollView 有类似 reusableViews 之类的东西……当然，目标是拥有可重复使用的单元格，以及使用自动布局而无需更新的标题它的高度手动...

【问题讨论】：

你说的是tableView header还是section header？
@Rishab 我的第二句话说明了我的意思。大多数情况下，当您有项目列表时，它必须在实际项目之上有大量信息......我已经为此描述了最常用的“解决方案”，并询问我们是否有任何更新这个问题。您的答案类似于@Pankaj。这个想法是使用项目上方的所有内容作为sectionHeader，可以动态调整大小。但也许有一些新的很酷的方法可以解决这个问题。无论如何，谢谢。
这能回答你的问题吗？ Setting tableHeaderView height dynamically

标签： ios uitableview uiscrollview

【解决方案1】：

我就是这样处理的

使用表格视图我已经为 XIB 中的标题创建了 UI

现在在下面的委托方法中

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {

}

我为header创建一个UIView，根据内容计算高度并返回。

现在我可以从以下委托方法返回相同的标题视图

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

}

基于该部分，我再次从 xib 创建一个视图并从该方法返回该视图。

在我的情况下，我只需要一个表头视图，所以我保留了 2 个部分并返回了第一部分的标题视图。

【讨论】：

当你的sectionHeader的内容发生变化时，你如何处理？例如，在 sectionHeader 中，我们有 UILabel，它有 0 numberOfLines，它甚至可以在运行时更改。你打电话给self.tableView.reloadSections...？
暂时我只是重新加载tableview，你仍然可以使用reloadSection方法。使用 collectionview 也可以实现相同的实现。我已经在这个应用程序中使用collectionview 实现了它，用于配置文件屏幕itunes.apple.com/nz/app/baetter-poll-on-the-go/…
如果有帮助，请批准答案:)
我会尽快尝试，但使用它作为 sectionHeader 看起来不像其他解决方案那样邪恶。

【解决方案2】：

我猜你在这里谈论的是表格视图的部分标题。如果是这样，您绝对可以对节标题使用自动布局。

在viewDidLoad:中使用下面两个代码

tableView.sectionHeaderHeight = UITableViewAutomaticDimension
tableView.estimatedSectionHeaderHeight = 36;

现在在viewForHeaderInSection: 中尝试以下代码，以了解事情的进展情况。根据您的要求更改它。

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let label: UILabel = {
       let lb = UILabel()
        lb.translatesAutoresizingMaskIntoConstraints = false
        lb.text = "HEADER \(section) with a loooooooooooooooonnngngngngngngngng texxxxxxxxxxxxxxxxt"
        lb.textColor = .black
        lb.backgroundColor = .yellow
        lb.numberOfLines = 0
        return lb
    }()

    let header: UIView = {
        let hd = UIView()
        hd.backgroundColor = .blue
        hd.addSubview(label)
        label.leadingAnchor.constraint(equalTo: hd.leadingAnchor, constant: 8).isActive = true
        label.topAnchor.constraint(equalTo: hd.topAnchor, constant: 8).isActive = true
        label.trailingAnchor.constraint(equalTo: hd.trailingAnchor, constant: -8).isActive = true
        label.bottomAnchor.constraint(equalTo: hd.bottomAnchor, constant: -8).isActive = true
        return hd
    }()
    return header
}

【讨论】：

【解决方案3】：

第一步：

从界面生成器中拖动一个 UIView 并放入

UItableView

此视图将自动充当 UITableView 标题（注意不是部分标题） .假设这个view的宽度是200。如果你运行UItableView这个view会自动显示为一个Header。

为此拖放视图创建一个 Outlet。

@property (weak, nonatomic) IBOutlet UIView *tableViewHeader; // height of this view is 200

现在我的目标是增加表格视图标题的高度。

第二步：

添加这个方法

- (void)viewDidLayoutSubviews
{
int increasedHeight = 100;
// set a frame of this view Like example 
self.tableViewHeader.frame = CGRectMake(0, 0, self.view.frame.size.width , 200 + increasedHeight );

self.tableView.tableHeaderView = self.tableViewHeader;

}

现在你的 tableview 标题高度将是 300 。

【讨论】：

【解决方案4】：

我喜欢这里的做法：

• 如果你想根据它的内容动态设置你的 tableview 标题高度，只需在你将 headerView 设置为 TableViewHeader 之后立即调用self.tableView.layoutTableFooterView()（所以在self.tableView.tableHeaderView = view 之后）

• 如果您需要在运行时更新您的表格视图标题高度，请在您更新表格视图标题的值后立即调用self.tableView.layoutTableFooterView()。

（这显然也适用于 tableviewFooters，但不适用于 section页眉/页脚）

extension UITableView {

    //Variable-height UITableView tableHeaderView with autolayout
    func layoutTableHeaderView() {

        guard let headerView = self.tableHeaderView else { return }
        headerView.translatesAutoresizingMaskIntoConstraints = false

        let headerWidth = headerView.bounds.size.width
        let temporaryWidthConstraint = headerView.widthAnchor.constraint(equalToConstant: headerWidth)

        headerView.addConstraint(temporaryWidthConstraint)

        headerView.setNeedsLayout()
        headerView.layoutIfNeeded()

        let headerSize = headerView.systemLayoutSizeFitting(UILayoutFittingCompressedSize)
        let height = headerSize.height
        var frame = headerView.frame

        frame.size.height = height
        headerView.frame = frame

        self.tableHeaderView = headerView

        headerView.removeConstraint(temporaryWidthConstraint)
        headerView.translatesAutoresizingMaskIntoConstraints = true
    }

}

source

【讨论】：

【解决方案5】：

我正在使用 XCode 10.3，这是我的解决方案与您使用表头视图的第二个解决方案一起使用。

首先，您将使用 xib 文件创建一个分离视图，用于内部带有标签的示例。然后将此标签的约束（上、左、下、右）应用到单元格的容器视图。并设置 numberOfLines = 0。

在视图类中更新 awakeFromNib() 函数。

override func awakeFromNib() {
    super.awakeFromNib()
    ourLabel.translatesAutoresizingMaskIntoConstraints = false
}

其次，在您的 viewController 上，设置您的 tableView：

tableView.sectionHeaderHeight = UITableView.automaticDimension
tableView.estimatedSectionHeaderHeight = 64

记住不要委托这个方法：

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat

因为我们已经设置了视图的约束。

最后，在委托方法中返回它

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?

页眉视图。

let view = UINib(nibName: String(describing: SimpleHeaderTitleView.self), bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! SimpleHeaderTitleView
 view.ourLabel.text = "Your longgggg text"
 return view

完成！检查它是否有效。

【讨论】：

像魅力一样工作。
它使表视图行被标题视图重叠

【解决方案6】：

如果您使用的是 Interface Builder，只需选中这些按钮

【讨论】：

【解决方案7】：

复制自useyourloaf.com

Swift 5.0

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    guard let headerView = tableView.tableHeaderView else {return}
    let size = headerView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
    if headerView.frame.size.height != size.height {
        headerView.frame.size.height = size.height
        tableView.tableHeaderView = headerView
        tableView.layoutIfNeeded()
    }
}

【讨论】：

【解决方案8】：

您可以在包含您的UITableView 的UIViewController 中的viewDidLayoutSubviews 中执行此操作：

@IBOutlet weak var tableView: UITableView!

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    // Resize header view with dynamic size in UITableView
    guard let headerView = tableView.tableHeaderView else {
        return
    }
    let size = headerView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
    if headerView.frame.height != size.height {
        tableView.tableHeaderView?.frame = CGRect(
            origin: headerView.frame.origin,
            size: size
        )
        tableView.layoutIfNeeded()
    }
}

【讨论】：