What constraints would prevent my UIViews from sta

My UIView's are stacking up on top of each other like so :

Each UIView is inside a wordContainer. Each UIView has two UILabel's inside of it

I create each individual UIView with two child UILabel's like so :

    var labels = [UIView]()
    for word in words {

        let wordLabel               = UILabel(frame: CGRectZero)
        wordLabel.text              = word.valueForKey("sanskrit") as? String
        wordLabel.numberOfLines     = 0
        wordLabel.sizeToFit()
        wordLabel.translatesAutoresizingMaskIntoConstraints = false

        let englishWordLabel           = UILabel(frame: CGRectMake(wordLabel.frame.width + 10,0,0,0))
        englishWordLabel.text          = word.valueForKey("english") as? String)
        englishWordLabel.numberOfLines = 0
        englishWordLabel.sizeToFit()
        englishWordLabel.lineBreakMode     = .ByWordWrapping
        englishWordLabel.translatesAutoresizingMaskIntoConstraints = false

        let wordView = UIView(frame: CGRectMake(0,0,self.view.frame.width,englishWordLabel.frame.height))
        wordView.translatesAutoresizingMaskIntoConstraints = false
        wordView.addSubview(wordLabel)
        wordView.addSubview(englishWordLabel)

        wordView.sizeToFit()

        labels.append(wordView)
    }

Then I take this collection of UIView's and add them to my wordContainer. This is the part, where I imagine, I should be setting NSLayoutConstraints. The idea is that I want them all to stack up on top of each other properly. For example, it should look like this :

word: definition
word: definition
word: definition
word: definition

But instead it looks like this :

I add them into the wordContainer like so :

    let wordContainer  = UIView(frame: CGRectZero)

    var currentY:CGFloat      = 0.0
    let margin_height:CGFloat = 4.0
    var height:CGFloat        = 0

    for view in wordViews {
        var rect = view.frame
        rect.origin.y = currentY
        view.frame = rect

        currentY += view.frame.height
        height += view.frame.height

        wordContainer.addSubview(view)

    }
    let containRect = CGRectMake(0,0,self.view.frame.width, height)
    wordContainer.frame = containRect

And then I set my constraints for the wordContainer which effectually allows the space for all the words to exist if they weren't piled on top of each other :

   wordContainer.bottomAnchor.constraintEqualToAnchor(cell.contentView.bottomAnchor).active     = true
   wordContainer.topAnchor.constraintEqualToAnchor(cell.contentView.topAnchor).active           = true

My latest idea is that maybe I should be adding constraints to this. I have experimented with adding NSLayoutConstraints to the height of the cell, and when I do all the words no longer are appropriately laid out. Instead, they are stacked on top of each other. But this seems like the right direction..

回答1:

In order for the cell to adjust its height automatically your content inside the contentView must have constraints against all 4 edges of the contentView.

I have just done this myself with different cell types for text, images and embedded tweets and had some of the issues you've described. I found the easiest way was to add a view around any components within the content view and then you can easily add the constraints to that element all around.

I've just had a quick look around for something that can demonstrate this and found another SO answer that explains it with a few screenshots.

Also the reference I used when doing this today was This post on Ray Wenderlich's site

回答2:

In your UITableViewController, in viewDidLoad() , try:

//set up table view cell dynamic height
tableView.rowHeight = UITableViewAutomaticDimension

In the Storyboard, make sure you use AutoLayout and that all of the constraints of your cell's elements to the superview are set and fixed. For example, the top text of your cell must have its margin to Superview defined and set to a value.