iOS UITableViewCell水平滚动带有自动布局的子视图

我正在尝试构建一个表视图,其单元格包含水平滚动的卡片.我创建了一个简单的演示应用程序,并在一定程度上成功实现了使用自动布局…的版本.一个(我认为是最终的)问题仍然存在.卡的垂直尺寸被窃听.

TableView中:

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",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]|",views: ["card2": card2])
        //Add horizontal constraints that tie the cards together,and to the super view
        constraints += NSLayoutConstraint.constraintsWithVisualFormat("H:|-[card]-(16)-[card2]-|",views: ["card": card,"card2": card2])
        //Add horizontal constraint that disambiguates individual card width
        constraints += NSLayoutConstraint.constraintsWithVisualFormat("H:[card(==card2)]","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!
}

CardView.xib:

结果:

水平间距和尺寸是正确的,但似乎垂直约束不充分或不正确.我觉得很难相信,因为它们很简单.每张卡都有垂直约束:V:| – [card] |

我已经尝试在卡上添加显式高度约束,类似于宽度,但这也不会产生正确的结果:V:[card(== card2)]

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

几天我一直在绞尽脑汁……我错过了什么?

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

解决方法

幸运的是,上面的代码示例中的问题是一个小问题:
constraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[card2]|",views: ["card2": card2])

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

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

以上是来客网为你收集整理的iOS UITableViewCell水平滚动带有自动布局的子视图全部内容,希望文章能够帮你解决iOS UITableViewCell水平滚动带有自动布局的子视图所遇到的程序开发问题。

如果觉得来客网网站内容还不错,欢迎将来客网网站推荐给程序员好友。