Search code examples
iosswiftuiviewautolayoutuilabel

UILabel's width is exceeding the text using programmed Auto-Layout

So I have two UIViews, a UILabel and a UITextField, the first one is the title of the field, second is where the info will be typed.. This is how I'm setting their AutoLayout Constraints:

For the input field:

 //Constraints:
    inputField.translatesAutoresizingMaskIntoConstraints = false;
    //Setting trailing = superview(which is called self)'s trailing +2.0
    NSLayoutConstraint(item: inputField, 
    attribute: .trailing, relatedBy: .equal, 
    toItem: self, attribute: .trailingMargin, 
    multiplier: 1.0, constant: 2.0).isActive = true;

    //Set Top = superview(which is called self) top -2.0
    NSLayoutConstraint(item: inputField, 
    attribute: .top, relatedBy: .equal, 
    toItem: self, attribute: .topMargin, 
    multiplier: 1.0, constant: -2.0).isActive = true;

    //Setting the height = 30
    NSLayoutConstraint(item: inputField, attribute: .height, 
    relatedBy: .equal, 
    toItem: nil, attribute: .notAnAttribute, 
    multiplier: 1.0, constant: 30).isActive = true;

Then for the UILabel (called emailLabel22):

//Constraints:
    //      Left
    NSLayoutConstraint(item: emailLabel22, 
    attribute: .leading, relatedBy: .equal, 
    toItem: self, attribute: .leadingMargin, 
    multiplier: 1.0, constant: 2.0).isActive = true;

    //      Buffer Right
    NSLayoutConstraint(item: emailLabel22, 
    attribute: .trailing, relatedBy: .equal, 
    toItem: inputField, attribute: .leading, 
    multiplier: 1.0, constant: -8.0).isActive = true;

    //      Align Tops
    NSLayoutConstraint(item: emailLabel22, 
    attribute: .top, relatedBy: .equal, 
    toItem: inputField, attribute: .top, 
    multiplier: 1.0, constant: 0).isActive = true;

    //      Height
    NSLayoutConstraint(item: emailLabel22, 
    attribute: .height, relatedBy: .equal, 
    toItem: nil, attribute: .notAnAttribute, 
    multiplier: 1.0, constant: 30).isActive = true;

    //      Buffer Right -- **For Input Field**
    NSLayoutConstraint(item: inputField, 
    attribute: .leading, relatedBy: .equal, 
    toItem: emailLabel22, attribute: .trailing, 
    multiplier: 1.0, constant: 8.0).isActive = true;

    //      Locking in Width??? (Should I use this?)
    NSLayoutConstraint(item: emailLabel22, 
    attribute: .width, relatedBy: .equal, 
    toItem: nil, attribute: .notAnAttribute, 
    multiplier: 1.0, constant: emailLabel22.frame.size.width);

The gist of the code above is this: inputField is right-aligned to the superview (self). Email is left aligned. They then have a gap between them for aesthetics.

This is the problem:

If I set emailLabel22 first, then it's width becomes huge and input field is squished to the right side of the screen with a lot empty space between them. Like so.

If I set the input field first, as in the code above, I then squish email down to its locked in width, which in this case is 73. Which means any text that doesn't fit into the 73pt width is truncated with ellipsis. Like So

If I remove the lock down on the width of e-mail, the inputField's size expands if I type in words that don't fit in the textfield. Like So

This wouldn't really be a problem, but I'm trying to build a robust label/text field combo that I can set any text to and have it fit perfectly, so I don't want to have to "Lock Down the Width" of the Email Label. I want it to expand as much as it wants to the right, but within the text size. I also don't want the inputField to squish down the email label. I also don't want to squish down the email's font size, input squishing down is fine.

I've been trying to fix this for 3 hours. I have no idea how to.

Thanks.

Solution

  • Try set hugging and commpresion resistance priority on your UILabel and UITextField

    enter image description here