iOS Swift使用for循环在TableView单元格中添加两个视图

Question

i recently work on new project and I need to add Two Custom view in one Cell in TableViewController. like this:

if indexPath.row == 4 {

        for index in 0..<2 {

            let reviewView = ReviewView()
            reviewView.translatesAutoresizingMaskIntoConstraints = false


            cell.addSubview(reviewView)
            cell.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-[v0]-|",options: [],metrics: nil,views: ["v0" : reviewView]))

            if index == 0 {

                cell.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[v0(71)]",options: [],metrics: nil,views:["v0" : reviewView]))
                reviewView.backgroundColor = UIColor.redColor()
                reviewView.frame = CGRectMake(0, 0, cell.contentView.frame.size.width, 71)
            }
            if index == 1 {
                cell.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[v0(71)]-|",options: [],metrics: nil,views:["v0" : reviewView]))
                reviewView.backgroundColor = UIColor.blueColor()
                reviewView.frame = CGRectMake(0, 71, cell.contentView.frame.size.width, 71)
            }


            print(index)
        }

        return cell

    }

but the result is like this(height of both view must be equal and 71) :

Simulator Result

I guess the problem is about Constraint between two view.How I manage that?

Thanks guys

EDIT: cell height is auto (UITableViewAutomaticDimension)

Answer 1

将约束添加到单元的contentView而不是直接添加到单元

Answer 2

Check out the frame X position

I think there you have problem

reviewView.frame = CGRectMake(0, 71, cell.contentView.frame.size.width, 71)

Change

reviewView.frame = CGRectMake(200, 0, cell.contentView.frame.size.width, 71)

Answer 3

Take custom UITableViewCell instead of doing programmatically. In a custom UITableViewCell, you can give constraints directly in storyboard file.

Answer 4

You're correct that you need constraints between the two subviews.

Using auto layout to determine the height of a view requires there to be a clear chain of constraints between the top and bottom of the view. This can be as simple as a single height constraint on a view to a series of constraints between subviews.

This is your current chain of constraints from top to bottom on the contentView of your cell:

|-[v0] : This is constraining the first view's .Top to the .Top of the contentView

[v0(71)] : This is telling the view to have a height of 71 (or another way to think about it is that it's telling that view's .Bottom to be 71 points down from it's .Top

[v0(71)] (second loop) : This is telling the second view to have a height of 71 , similar to the first

[v0]-| : This constrains the second view's .Bottom to the .Bottom of the contentView

The missing piece is between the first view's .Bottom and the second view's .Top .

The easiest way to fix this with your current code would be to keep track of the first view and keep a constraint between it's .Bottom and the second view's .Top , like this:

if indexPath.row == 4 {

    var lastReviewView:ReviewView?;
    for index in 0..<2 {

        let reviewView = ReviewView()
        reviewView.translatesAutoresizingMaskIntoConstraints = false


        cell.addSubview(reviewView)
        cell.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-[v0]-|",options: [],metrics: nil,views: ["v0" : reviewView]))

        if index == 0 {

            cell.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[v0(71)]",options: [],metrics: nil,views:["v0" : reviewView]))
            reviewView.backgroundColor = UIColor.redColor()
        }
        if index == 1 {
            cell.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[v0(71)]-|",options: [],metrics: nil,views:["v0" : reviewView]))
            reviewView.backgroundColor = UIColor.blueColor()
        }

        if (lastReviewView != nil) {
            cell.contentView.addConstraint(NSLayoutConstraint(item: lastReviewView!, attribute: .Bottom, relatedBy: .Equal, toItem: reviewView, attribute: .Top, multiplier: 1.0, constant: 0.0))
        }

        lastReviewView = reviewView
        print(index)
    }

    return cell

}

If you are looking to deal with a variable amount of views stacked on each other, you could do it like this instead:

var reviewViews:[ReviewView] = [] // Fill this out with your loop
let contentView = cell.contentView
    var constraints:[NSLayoutConstraint] = []

let firstView = reviewViews.first
constraints.append(NSLayoutConstraint(item: contentView, attribute: .Top, relatedBy: .Equal, toItem: firstView, attribute: .Top, multiplier: 1.0, constant: 0.0))

for i in 0..<reviewViews.count {

    let view = reviewViews[i]
    constraints.append(NSLayoutConstraint(item: view, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 71.0))

    if i > 0 {
        let lastView = reviewViews[i-1]
        constraints.append(NSLayoutConstraint(item: lastView, attribute: .Bottom, relatedBy: .Equal, toItem: view, attribute: .Top, multiplier: 1.0, constant: 0.0))
    }

}

let lastView = reviewViews.last
constraints.append(NSLayoutConstraint(item: contentView, attribute: .Bottom, relatedBy: .Equal, toItem: lastView, attribute: .Bottom, multiplier: 1.0, constant: 0.0))

NSLayoutConstraint.activateConstraints(constraints)