ios - 具有自动布局的 UITableView 页脚和页眉的奇怪位置

Question

我有一个 tableView，我想在其中添加页眉和页脚(针对整个表格，而不是每个部分。所以我在 viewDidLoad 中执行了以下操作:

let footer = UIButton.buttonWithType(.System) as UIButton
footer.addTarget(self, action: "add", forControlEvents: UIControlEvents.TouchUpInside)
footer.setBackgroundImage(UIImage(named: "add"), forState: .Normal)
footer.backgroundColor = UIColor.purpleColor()
footer.setTranslatesAutoresizingMaskIntoConstraints(false)

let header = UIButton.buttonWithType(.System) as UIButton
header.addTarget(self, action: "add", forControlEvents: UIControlEvents.TouchUpInside)
header.setBackgroundImage(UIImage(named: "US"), forState: .Normal)
header.backgroundColor = UIColor.redColor()
header.setTranslatesAutoresizingMaskIntoConstraints(false)

tableView.tableFooterView = footer
tableView.tableHeaderView = header

我添加约束(也在 viewDidLoad 中)

let viewsDictionary = ["footer": footer, "header": header]
tableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-[header]-|", options: nil, metrics: nil, views: viewsDictionary))
tableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[header]-|", options: nil, metrics: nil, views: viewsDictionary))
tableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[footer]-0-|", options: nil, metrics: nil, views: viewsDictionary))
tableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[footer]-0-|", options: nil, metrics: nil, views: viewsDictionary))

我明白了:

当我这样做时:

let viewsDictionary = ["footer": footer, "header": header]
tableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[header]-0-|", options: nil, metrics: nil, views: viewsDictionary))
tableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[header(50)]", options: nil, metrics: nil, views: viewsDictionary))
tableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[footer]-0-|", options: nil, metrics: nil, views: viewsDictionary))
tableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[footer(100)]-0-|", options: nil, metrics: nil, views: viewsDictionary))

我明白了:

我不明白为什么会得到这些结果。我检查了页眉和页脚的 superView，它确实是 tableView(如预期的那样)，但如您所见，这就像两者之间是否有其他东西(如另一个 View )。当我将页脚放在其 superView 的底部并将页眉放在顶部时，我确实得到了页眉在顶部(但就像它像以前一样在另一个 View 中一样)并且页脚实际上在 tableView 的顶部(我必须下拉tableView才能截图)

如果我只是将按钮用作页脚或页眉，我还必须管理按钮的布局，这让我感到有些惊讶。它不应该是自动的吗？

编辑:

我使用以下页脚修复了它:

footer.frame = CGRectMake(0, 0, tableView.frame.size.width, 68)
footer.setTranslatesAutoresizingMaskIntoConstraints(true) //or remove this line

它有效(即使我不明白为什么它不能使用约束)但是当我从纵向切换到横向时出现约束错误，转到 tableView 的底部以使页脚出现并且然后切换回纵向:

Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x174091da0 UIImageView:0x1743e7b00.width == UIImageView:0x1743e7b00.height>",
    "<NSLayoutConstraint:0x174094000 H:[UIButton:0x14c600b60'>'(25)]>",
    "<NSLayoutConstraint:0x17409bda0 V:[UIImageView:0x1743e7b00]-(1)-|   (Names: '|':UITableViewCellContentView:0x174384030 )>",
    "<NSLayoutConstraint:0x1740949b0 V:|-(1)-[UIImageView:0x1743e7b00]   (Names: '|':UITableViewCellContentView:0x174384030 )>",
    "<NSLayoutConstraint:0x174099320 UIImageView:0x1743e7b00.leading == UITableViewCellContentView:0x174384030.leadingMargin + 1>",
    "<NSLayoutConstraint:0x174093880 H:[UIImageView:0x1743e7b00]-(NSSpace(8))-[UILabel:0x14c603320'$ 1,09']>",
    "<NSLayoutConstraint:0x17409a9f0 H:[UILabel:0x14c603320'$ 1,09']-(2)-[UIButton:0x14c600b60'>']>",
    "<NSLayoutConstraint:0x174094b40 H:[UIButton:0x14c600b60'>']-(0)-|   (Names: '|':UITableViewCellContentView:0x174384030 )>",
    "<NSLayoutConstraint:0x170097110 'UIView-Encapsulated-Layout-Width' H:[UITableViewCellContentView:0x174384030(83)]>",
    "<NSLayoutConstraint:0x170098650 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x174384030(67.5)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x174091da0 UIImageView:0x1743e7b00.width == UIImageView:0x1743e7b00.height>

我又迷路了，因为我没有指定任何约束。

Answer 1

它仅在宽度上是自动的，这意味着无论您设置什么宽度或为分配给 tableHeader(Footer)View 的 View 设置宽度约束， View 将始终占据整个屏幕宽度。

实际上，您并没有过多地谈论您想要的正确布局是什么。所以一般来说我建议你

1. 初始化一个UIView
2. 随意设置高度
3. 将其分配给tableHeaderView
4. 将 UIButton 添加为 subview

看看你是否可以在没有自动布局的情况下为 tableHeader(Footer)View 实现正确的布局