Search code examples
iosautolayoutstoryboardinterface-buildernslayoutconstraint

Does autolayout add width constraints that I can't remove?


Whenever I write for iOS, I always struggle with Autolayout. Does anyone else have these problems? How do you overcome it? Have you reverted to alternatives like SnapKit?

This is what I'm trying to accomplish:

            UITableViewCell  
+-------------------------------------+
| +-------------------------+ +-----+ |
| | Label #1                | | #2  | |
| +-------------------------+ +-----+ |
+-------------------------------------+

I want the following:

  • Label #1 to be vertically centered
  • Label #2 to be vertically centered
  • The leading space from the left bounds to Label #1 to be constant
  • The trailing space from Label #2 to the right bounds to be constant
  • The horizontal spacing between Label #1 and Label #2 to be constant

These are the warnings I'm getting: Ambiguous Layout Group

  • Main.storyboard: warning: Ambiguous Layout: Vertical position is ambiguous for "Label #2". (1)
  • Main.storyboard 2 views are horizontally ambiguous.
  • Main.storyboard Width is ambiguous for "Label #1". (2)
  • Main.storyboard Width and horizontal position are ambiguous for "Label #2". (2) Main.storyboard: warning: Ambiguous Layout: Vertical position is ambiguous for "Label #1". (1)

My thoughts:

  1. Vertical position should not be ambiguous. If I don't set it to be vertically centered, it appears wrong on my device.
  2. No width constraint has been set by me. I don't even see any width constraints in IB to remove.

Solution

  • You only use autolayout libraries if you want to add constraints programmatically, such as SnapKit indeed.

    One thing to remember by someone who's new in iOS, a view should have Width, Height, X, and Y.

    Now, doing what you want using the interface builder is pretty much easy. When you do your layout in Storyboard or Xib, there should be a warning or error if you're doing your layout not properly.

    YOU want the following, see if it is implemented:

    • Label #1 to be vertically centered to the superView (cell) ✅
    • Label #2 to be vertically centered to the superView (cell) ✅
    • The leading space from the left bounds to Label #1 to be constant ✅
    • The trailing space from Label #2 to the right bounds to be constant ✅
    • The horizontal spacing between Label #1 and Label #2 to be constant ✅

    As you can see in my constraints, there are 5.

    1. Leading distance from the superView to the leading of label 1.
    2. Center Y to the cell of label 1.
    3. Center Y to the cell of label 2.
    4. Trailing distance from the superView to the trailing of label 2.
    5. Distance of label 1 to the label 2

    Lastly, without this #6, you should get an error or warning.

    1. One of the two views (labels) should have a constant width, I'm putting the constant width to the label 2 as per your requirements.

    As for your question:

    Does autolayout add width constraints that I can't remove?

    No, unless you add it automatically by fixing the warnings/errors in your interface builder.

    Hope it helps.

    enter image description here