具有自动布局的 iOS UITableViewCell 水平滚动 subview

Question

我正在尝试构建一个 TableView ，其单元格包含水平滚动的卡片。我创建了一个简单的演示应用程序，并成功地实现了一个在一定程度上使用自动布局的版本。一个(我相信是最终的)问题仍然存在。卡片的垂直尺寸有问题。

表格 View :

class MultiCardTableViewController: UITableViewController {
    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 12
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("CardCell", forIndexPath: indexPath) as CardCell

        //since these cells are re-used, we have to clear out the previous dynamic subviews
        for subView in cell.scrollContentView.subviews { subView.removeFromSuperview() }

        var card = NSBundle.mainBundle().loadNibNamed("CardView", owner: self, options: nil)[0] as CardView
        //Turn this off because subviews of UIScrollView use autoresizing mask by default, which conflict with Auto-Layout constraints
        card.setTranslatesAutoresizingMaskIntoConstraints(false)
        cell.scrollContentView.addSubview(card)

        var card2 = NSBundle.mainBundle().loadNibNamed("CardView", owner: self, options: nil)[0] as CardView
        //Turn this off because subviews of UIScrollView use autoresizing mask by default, which conflict with Auto-Layout constraints
        card2.setTranslatesAutoresizingMaskIntoConstraints(false)
        cell.scrollContentView.addSubview(card2)

        //Add bottom margin to the last cell (for consistency)
        //Add vertical constraints (standard margins) for each card
        var constraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[card]|", options: nil, metrics: nil, views: ["card": card])
        constraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[card2]|", options: nil, metrics: nil, views: ["card2": card2])
        //Add horizontal constraints that tie the cards together, and to the super view
        constraints += NSLayoutConstraint.constraintsWithVisualFormat("H:|-[card]-(16)-[card2]-|", options: nil, metrics: nil, views: ["card": card, "card2": card2])
        //Add horizontal constraint that disambiguates individual card width
        constraints += NSLayoutConstraint.constraintsWithVisualFormat("H:[card(==card2)]", options: nil, metrics: nil, views: ["card": card, "card2": card2])
        cell.scrollContentView.addConstraints(constraints)

        //Set the scrollview content horizontal size constraint to double the window width (1 window width for each card
        cell.contentWidthConstraint.constant = self.tableView.frame.width * 2

        return cell
    }
}

单元格:

class CardCell: UITableViewCell
{
    @IBOutlet weak var scrollView: UIScrollView!
    //A content view directly inside of the scroll view, constrained to super view on all sides, as well as height & width
    @IBOutlet weak var scrollContentView: UIView!
    //A reference to the width constraint for the scrollContentView
    @IBOutlet weak var contentWidthConstraint: NSLayoutConstraint!
}

卡片 View .xib:

结果:

水平间距和大小是正确的，但似乎垂直约束不充分或不正确。我觉得这很难相信，因为它们太简单了。每张卡片都有垂直约束:V:|-[card]|

我尝试在卡片上添加明确的高度限制，类似于宽度，但这也不会产生正确的结果:V:[card(==card2)]

显式垂直高度约束的结果:

我已经绞尽脑汁好几天了……我错过了什么？

编辑:添加了github source link对于示例项目

Answer 1

幸运的是，这个问题是我上面的代码示例中的一个小错别字:

constraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[card2]|", options: nil, metrics: nil, views: ["card2": card2])

正在覆盖以前的约束数组，应该添加到它:

constraints += NSLayoutConstraint.constraintsWithVisualFormat("V:|-[card2]|", options: nil, metrics: nil, views: ["card2": card2])