如何使用autolayout设置tableHeaderView（UITableView）的高度？

Question

在过去的3到4个小时里，我一直把头撞在墙上，我似乎无法弄明白。我有一个UIViewController，里面有一个全屏UITableView（屏幕上有一些其他的东西，这就是为什么我不能使用UITableViewController）我想让我的tableHeaderView用autolayout调整大小。不用说，它不合作。

见下面的截图。

因为overviewLabel（例如“此处列出概述信息。”文本）具有动态内容，所以我使用autolayout来调整它的大小和它的超级视图。除了tableHeaderView之外，我已经很好地调整了所有内容，它位于层次结构中的Paralax Table View之下。

我发现以编程方式调整标题视图ios的唯一方法，使用以下代码：

CGRect headerFrame = self.headerView.frame;
headerFrame.size.height = headerFrameHeight;
self.headerView.frame = headerFrame;
[self.listTableView setTableHeaderView:self.headerView];

在这种情况下，标题Frame Height是tableView Header高度的手动计算，如下所示（innerHeaderView是白色区域，或者第二个是“View”，headerView是tableHeaderView）：

CGFloat startingY = self.innerHeaderView.frame.origin.y + self.overviewLabel.frame.origin.y;
CGRect overviewSize = [self.overviewLabel.text
                       boundingRectWithSize:CGSizeMake(290.f, CGFLOAT_MAX)
                       options:NSStringDrawingUsesLineFragmentOrigin
                       attributes:@{NSFontAttributeName: self.overviewLabel.font}
                       context:nil];
CGFloat overviewHeight = overviewSize.size.height;
CGFloat overviewPadding = ([self.overviewLabel.text length] > 0) ? 10 : 0; // If there's no overviewText, eliminate the padding in the overall height.
CGFloat headerFrameHeight = ceilf(startingY + overviewHeight + overviewPadding + 21.f + 10.f);

手动计算有效，但如果将来发生变化，它会很笨拙并容易出错。我想要做的是让tableHeaderView根据提供的约束自动调整大小，就像你可以在其他地方一样。但对于我的生活，我无法弄明白。

关于这个问题有几个关于此的帖子，但没有一个是明确的，最后让我更加困惑。这里有几个：

将translatesAutoresizingMaskIntoConstraints属性更改为NO并不是真的有意义，因为这只会导致我的错误，并且无论如何在概念上都没有意义。

真的很感激任何帮助！

编辑1：感谢TomSwift的建议，我能够弄明白。而不是手动计算概览的高度，我可以按如下方式为我计算，然后像以前一样重新设置tableHeaderView。

[self.headerView setNeedsLayout];
[self.headerView layoutIfNeeded];
CGFloat height = [self.innerHeaderView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height + self.innerHeaderView.frame.origin.y; // adding the origin because innerHeaderView starts partway down headerView.

CGRect headerFrame = self.headerView.frame;
headerFrame.size.height = height;
self.headerView.frame = headerFrame;
[self.listTableView setTableHeaderView:self.headerView];

编辑2：正如其他人所说，编辑1中发布的解决方案似乎在viewDidLoad中不起作用。但是，它似乎适用于viewWillLayoutSubviews。示例代码如下：

// Note 1: The variable names below don't match the variables above - this is intended to be a simplified "final" answer.
// Note 2: _headerView was previously assigned to tableViewHeader (in loadView in my case since I now do everything programatically).
// Note 3: autoLayout code can be setup programatically in updateViewConstraints.
- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];

    [_headerWrapper setNeedsLayout];
    [_headerWrapper layoutIfNeeded];
    CGFloat height = [_headerWrapper systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;

    CGRect headerFrame = _headerWrapper.frame;
    headerFrame.size.height = height;
    _headerWrapper.frame = headerFrame;
    _tableView.tableHeaderView = _headerWrapper;
}

Answer 1

您需要使用UIView systemLayoutSizeFittingSize:方法来获取标题视图的最小边界大小。

我在本Q / A中提供了有关使用此API的进一步讨论：

How to resize superview to fit all subviews with autolayout?

Answer 2

这个解决方案非常适合我：

https://spin.atomicobject.com/2017/08/11/swift-extending-uitableviewcontroller/

它扩展了UITableViewController。但是如果您只是使用UITableView，它仍然可以工作，只需扩展UITableView而不是UITableViewController。只要有更改sizeHeaderToFit()高度的事件，就调用方法sizeFooterToFit()或tableViewHeader。

Answer 3

我真的与这一个进行斗争并将设置放入viewDidLoad对我来说不起作用，因为未在viewDidLoad中设置框架，我还最终得到了大量凌乱的警告，其中封装的自动布局高度降低到0我在表单演示文稿中展示tableView时，才注意到iPad上的问题。

解决这个问题的原因是在viewWillLayoutSubviews而不是viewDidLoad中设置tableViewHeader。

func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        if tableView.tableViewHeaderView == nil {
            let header: MyHeaderView = MyHeaderView.createHeaderView()
            header.setNeedsUpdateConstraints()
            header.updateConstraintsIfNeeded()
            header.frame = CGRectMake(0, 0, CGRectGetWidth(tableView.bounds), CGFloat.max)
            var newFrame = header.frame
            header.setNeedsLayout()
            header.layoutIfNeeded()
            let newSize = header.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize)
            newFrame.size.height = newSize.height
            header.frame = newFrame
            self.tableView.tableHeaderView = header
        }
    }

Answer 4

我发现了一种优雅的方式来使用自动布局来调整表头的大小，有和没有动画。

只需将其添加到View Controller即可。

func sizeHeaderToFit(tableView: UITableView) {
    if let headerView = tableView.tableHeaderView {
        let height = headerView.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).height
        var frame = headerView.frame
        frame.size.height = height
        headerView.frame = frame
        tableView.tableHeaderView = headerView
        headerView.setNeedsLayout()
        headerView.layoutIfNeeded()
    }
}

要根据动态更改的标签调整大小：

@IBAction func addMoreText(sender: AnyObject) {
    self.label.text = self.label.text! + "\nThis header can dynamically resize according to its contents."
}

override func viewDidLayoutSubviews() {
    // viewDidLayoutSubviews is called when labels change.
    super.viewDidLayoutSubviews()
    sizeHeaderToFit(tableView)
}

要根据约束中的更改为调整大小设置动画：

@IBOutlet weak var makeThisTallerHeight: NSLayoutConstraint!

@IBAction func makeThisTaller(sender: AnyObject) {

    UIView.animateWithDuration(0.3) {
        self.tableView.beginUpdates()
        self.makeThisTallerHeight.constant += 20
        self.sizeHeaderToFit(self.tableView)
        self.tableView.endUpdates()
    }
}

请参阅AutoResizingHeader项目以查看此操作。 https://github.com/p-sun/Swift2-iOS9-UI

Answer 5

使用systemLayoutSizeFittingSize的解决方案：如果标题视图在每个视图外观上只更新一次，则有效。在我的例子中，标题视图多次更新以反映状态更改。但是systemLayoutSizeFittingSize：总是报告相同的大小。也就是说，对应于第一次更新的大小。

要获得systemLayoutSizeFittingSize：在每次更新后返回正确的大小，我必须首先删除表头视图，然后再更新它并重新添加它：

self.listTableView.tableHeaderView = nil;
[self.headerView removeFromSuperview];

Answer 6

这对ios10和Xcode 8有用

func layoutTableHeaderView() {

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

    let headerWidth = headerView.bounds.size.width;
    let temporaryWidthConstraints = NSLayoutConstraint.constraintsWithVisualFormat("[headerView(width)]", options: NSLayoutFormatOptions(rawValue: UInt(0)), metrics: ["width": headerWidth], views: ["headerView": headerView])

    headerView.addConstraints(temporaryWidthConstraints)

    headerView.setNeedsLayout()
    headerView.layoutIfNeeded()

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

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

    self.tableView.tableHeaderView = headerView

    headerView.removeConstraints(temporaryWidthConstraints)
    headerView.translatesAutoresizingMaskIntoConstraints = true

}

Answer 7

这个解决方案调整了tableHeaderView的大小，避免了viewDidLayoutSubviews()方法中的无限循环，我在这里遇到了一些其他答案：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    if let headerView = tableView.tableHeaderView {
        let height = headerView.systemLayoutSizeFitting(UILayoutFittingCompressedSize).height
        var headerFrame = headerView.frame

        // comparison necessary to avoid infinite loop
        if height != headerFrame.size.height {
            headerFrame.size.height = height
            headerView.frame = headerFrame
            tableView.tableHeaderView = headerView
        }
    }
}

另见这篇文章：https://stackoverflow.com/a/34689293/1245231

Answer 8

在我看来，viewDidLayoutSubviews工作得更好。 viewWillLayoutSubviews导致tableView的白线出现。我还添加了检查我的headerView对象是否已经存在。

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];

    if ( ! self.userHeaderView ) {
        // Setup HeaderView
        self.userHeaderView = [[[NSBundle mainBundle] loadNibNamed:@"SSUserHeaderView" owner:self options:nil] objectAtIndex:0];
        [self.userHeaderView setNeedsLayout];
        [self.userHeaderView layoutIfNeeded];
        CGFloat height = [self.userHeaderView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
        CGRect headerFrame = self.userHeaderView.frame;
        headerFrame.size.height = height;
        self.userHeaderView.frame = headerFrame;
        self.tableView.tableHeaderView = self.userHeaderView;

        // Update HeaderView with data
        [self.userHeaderView updateWithProfileData];
    }
}

Answer 9

很可能使用基于AutoLayout的通用UIView和任何AL内部子视图结构作为tableHeaderView。

唯一需要的是之前设置一个简单的tableFooterView！

让self.headerView是一些基于约束的UIView。

- (void)viewDidLoad {

    ........................

    self.tableView.tableFooterView = [UIView new];

    [self.headerView layoutIfNeeded]; // to set initial size

    self.tableView.tableHeaderView = self.headerView;

    [self.tableView.leadingAnchor constraintEqualToAnchor:self.headerView.leadingAnchor].active = YES;
    [self.tableView.trailingAnchor constraintEqualToAnchor:self.headerView.trailingAnchor].active = YES;
    [self.tableView.topAnchor constraintEqualToAnchor:self.headerView.topAnchor].active = YES;

    // and the key constraint
    [self.tableFooterView.trailingAnchor constraintEqualToAnchor:self.headerView.trailingAnchor].active = YES;
}

如果self.headerView在UI旋转下改变高度，则必须实现

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];

    [coordinator animateAlongsideTransition: ^(id<UIViewControllerTransitionCoordinatorContext> context) {
        // needed to resize header height
        self.tableView.tableHeaderView = self.headerView;
    } completion: NULL];
}

可以使用ObjC类别来实现此目的

@interface UITableView (AMHeaderView)
- (void)am_insertHeaderView:(UIView *)headerView;
@end

@implementation UITableView (AMHeaderView)

- (void)am_insertHeaderView:(UIView *)headerView {

    NSAssert(self.tableFooterView, @"Need to define tableFooterView first!");

    [headerView layoutIfNeeded];

    self.tableHeaderView = headerView;

    [self.leadingAnchor constraintEqualToAnchor:headerView.leadingAnchor].active = YES;
    [self.trailingAnchor constraintEqualToAnchor:headerView.trailingAnchor].active = YES;
    [self.topAnchor constraintEqualToAnchor:headerView.topAnchor].active = YES;

    [self.tableFooterView.trailingAnchor constraintEqualToAnchor:headerView.trailingAnchor].active = YES;
}
@end

还有Swift扩展

extension UITableView {

    func am_insertHeaderView2(_ headerView: UIView) {

        assert(tableFooterView != nil, "Need to define tableFooterView first!")

        headerView.layoutIfNeeded()

        tableHeaderView = headerView

        leadingAnchor.constraint(equalTo: headerView.leadingAnchor).isActive = true
        trailingAnchor.constraint(equalTo: headerView.trailingAnchor).isActive = true
        topAnchor.constraint(equalTo: headerView.topAnchor).isActive = true

        tableFooterView?.trailingAnchor.constraint(equalTo: headerView.trailingAnchor).isActive = true
    }
}

Answer 10

它适用于页眉视图和页脚，只需用页脚替换页眉

func sizeHeaderToFit() {
    if let headerView = tableView.tableHeaderView {

        headerView.setNeedsLayout()
        headerView.layoutIfNeeded()

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

        tableView.tableHeaderView = headerView
    }
}

如何使用autolayout设置tableHeaderView（UITableView）的高度？

问题描述投票：82回答：10

10个回答

最新问题

如何使用autolayout设置tableHeaderView（UITableView）的高度？

问题描述 投票：82回答：10

10个回答

最新问题

问题描述投票：82回答：10