Align UILabel along bottom of its parent view using Autolayout

Question

I am attempting to display a UILabel centered at the bottom of its parent view, with leading and trailing set to stretch to the parent view's bounds. Unfortunately, the label isn't appearing on screen at all. I have verified the parent view is correctly filling the entire screen as desired.

    //set up parent view
    let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
    let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = blurEffectView.bounds
    vibrancyEffectView.autoresizingMask = .FlexibleWidth | .FlexibleHeight

    //Label for vibrant text
    let vibrantLabel = UILabel()
    vibrantLabel.text = "My Label"
    vibrantLabel.textColor = UIColor(white: 0.64, alpha: 1)
    vibrantLabel.textAlignment = .Center
    vibrantLabel.sizeToFit()
    vibrantLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
    vibrancyEffectView.contentView.addSubview(vibrantLabel)

    vibrancyEffectView.addConstraint(NSLayoutConstraint(item: vibrantLabel, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: vibrancyEffectView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 15))
    vibrancyEffectView.addConstraint(NSLayoutConstraint(item: vibrantLabel, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: vibrancyEffectView, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 0))
    vibrancyEffectView.addConstraint(NSLayoutConstraint(item: vibrantLabel, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: vibrancyEffectView, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: 0))
    vibrancyEffectView.addConstraint(NSLayoutConstraint(item: vibrantLabel, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: vibrantLabel, attribute: NSLayoutAttribute.Height, multiplier: 1, constant: 30))

    blurEffectView.contentView.addSubview(vibrancyEffectView)

Could this be due to the autoresizing mask set on the parent, or is my auto layout constraints incorrect? Also I was wondering what is the best way to handle the height - I want to ensure the text fits it in.

Answer 1

I think a couple of your constraints are wrong.

You're pinning the bottom of the label to the bottom of the vibrancy view, with a constant of 15 - this will pin it 15 points below the bottom.

You're also pinning the height of the label to its own height plus 30 - this is unsatisfiable and I'm surprised you're not seeing error logs. A label doesn't need height constraints as it will have a intrinsic content size based on the text value - you also don't need the sizeToFit call. To make the label flow onto multiple lines, set the numberOfLines property to zero.

Answer 2

Type of constrains to be added for label.

left, top, width and height

TOP constrain(sample):

mylabel.setTranslatesAutoresizingMaskIntoConstraints(false) 

self.addConstraint(NSLayoutConstraint(

                item:mylabel, attribute:NSLayoutAttribute.Top,

                relatedBy:NSLayoutRelation.Equal, toItem:myView,

                attribute:NSLayoutAttribute.Bottom, multiplier:1.0, constant: 0.0))