Static Spacing on AutoLayout

Question

I'm currently setting up a login screen that should ultimately look something like this:

I've successfully accomplished all the constraints needed to create the desired look on all screen sizes, however, I can not seem to figure out the constraint needed to correctly align the "Don't have an account? Signup". I've designed it so the "Don't have an account?" is a UILabel, and "Signup" is a UIButton. I've just aligned these side by side.

The UILabel, "Don't have an account?", has the following constraints:

The UIButton, "Signup, has the following constraints:

These constraints seem to accomplish what they need to on screen sizes 4" and below. however the 4.7 inch, and 5.5 inch (iPads excluded), have wide spacing between the UILabel and UIButton. I've read Ray Wenderlich's tutorial on auto layout, and still can not figure out the problem (I'm new to auto layout, but I have an idea what I'm doing. I'm not just adding random constraints hoping it works).

This is what it looks like on all my targeted devices:

Notice as screen size increases, so does the gap in between the label and button. Any help is appreciated.

Answer 1

You are setting the leading space of the label to its superview, and you are setting the trailing space of the button to its superview. So obviously if the superview gets wider, they are going to get further apart.

So if that's not what you want, don't do that.

The actual solution to what you want to do is quite tricky. You want these two objects to behave as a group, and you want that group to be centered. There's no simple way to express that. You will need to make a group. In other words, you will need a container view, give that view an absolute width and center it, and put these two objects inside the container.

New in iOS 9, a UIStackView can help you with this.

Answer 2

Another approach that works is to use a couple UIViews as spacers. I sometimes prefer this to containment, but it is probably a matter of taste.

1. Remove the leading constraint from your UILabel.

2. Remove the trailing constraint from your UIButton.

3. Add a UIView with clear background in front of your UILabel. Set a leading constraint from this UIView to the container leading edge with constant 0. Set a trailing constraint to the UILabel with constant 0.

4. Similarly, add another UIView after your UIButton. Set a leading constraint from this UIView to the UIButton with constant 0. Set a trailing constraint from this UIView to the container trailing edge with constant 0.

5. Both UIViews will need a Y position and height. These are somewhat arbitrary so I would set Align Center-Y constraints with your UILabel, and height constraints of say 5.

6. Here's where the magic happens: select both UIViews and set an Equal Widths constraint. This forces the UIViews to occupy equal space on both sides.

Answer 3

UIStackView is overkill for this situation. Just

1. Put the label and button in a single UIView.
2. Constrain the label's left and center Y to the container view.
3. Constrain the button's right and center Y to the container view.
4. Constrain the label's right edge to the button's left edge.
5. Set the horizontal content hugging priority of the containing view to 1000.
6. Constrain the containing view's center X to its superview.

Answer 4

You can do it to your existing code only by setting few constraints. And this would work on all resolutions even on the iPad. You don't need to group them , i have attached the images to show the constraints that i have applied.

And for the button set this constraints

It would be shown properly on all the devices kindly have look as to how it looks on all the resolutions and also in the landscape mode of each resolution

Thanks

Omkar