29

Am new to Auto layout constraints in Xcode. I have one Bottom View like UITabBar with 6 UIButtons. Without constraints I aligned those buttons with 5 space padding with each buttons and each buttons has 50 width. Now,I am trying to make it by using Auto layout to support all Screen sizes.

In Storyboard constrains I set equal width for 6 buttons and I made 60 space between each buttons. I set first button 0 to leading space and I set the last button 0 to tail constraints.

I want the buttons with equal width and flexible spaces between views in all device sizes.

Can anyone pleas help me? Looking for the help. Thanks in advance.

enter image description here

Bhavin Bhadani
  • 22,224
  • 10
  • 78
  • 108
Yuvaraj.M
  • 9,741
  • 16
  • 71
  • 100

5 Answers5

62

check this image and made your constraints like below...

enter image description here

RESULT:- preview in different sizes

enter image description here

With Stackview (For iOS 9.0 and above)

enter image description here

NOTE: If you have to make app for iOS 9 and later then UIStackView is another option for you

Bhavin Bhadani
  • 22,224
  • 10
  • 78
  • 108
  • Thank you for your help. I need one clarification. Have you added 5 views in between the buttons (1-6) is it? – Yuvaraj.M Sep 30 '15 at 09:41
  • @EICaptainv2.0 great answer! i have a question why when using stackview the views don't obtain perfect squares? i posted this question but no answer to it yet http://stackoverflow.com/questions/38540494/using-stackview-to-create-matrix-of-square-views-ios – Ali Alebrahim Jul 23 '16 at 18:36
  • 1
    Perfect solution 100 Points for you – Ravi Ojha Nov 19 '16 at 08:34
  • there is a spacing option for the UIstackView, why aren't using that? and you are adding extra views between the buttons? – KarimIhab Feb 22 '18 at 14:35
  • 1
    @KarimIhab Its just simple demonstrate if u dont want to use sizeclass with seperate spacing .. this will adjust spacing according to views – Bhavin Bhadani Feb 23 '18 at 06:45
11

With iOS 9 and Xcode 7, you can now have the expected result with UIStackView and only 3 or 4 auto layout constraints.

The following step by step uses Storyboard.

  1. Create 6 UIButtons and 5 UIViews. Align them horizontally. Give some color to your views.

enter image description here

  1. Select all your views and buttons and click on the Stack button. You will have all your buttons and colored views aligned in a UIStackView.

enter image description here

  1. Select your stack view, go to the Utilities panel and select the Attributes Inspector item. There, click on the Distribution button and select "Fill Equally".

enter image description here

  1. For now, your stack view's height relies on your buttons intrinsic content size. If you're fine with it, you can go to step 5. However, if needed, you can give your stack view a height constraint. Select your stack view, click on the Pin button, check the Height button, add the required value and click on the Add 1 Constraint button.

enter image description here

As an alternative, If you want each element of your stack view to have its height matching its width, select the first button of your stack view, click on the Pin button, select Aspect Ratio and click on the Add 1 Constraint button.

enter image description here

You can check that your aspect ratio constraint is correct in your Document outline (left panel) and, if you need, you can change it with a different constraint in the Attribute inspector (right panel).

enter image description here

  1. Now, it's time to give some external constraints to your stack view. Select your stack view. Click on the pin button, make sure the Constrain to margin button is not select and set leading, trailing and bottom constraints to zero. Make sure that the bottom constraint is related to your view controller's view. Then, change the Update Frames button to "All Frames in Container". You can now click on the Add 3 Constraints button.

enter image description here

Your stack view is now set.

enter image description here

Further remark:

If you don't need your colored views width to match your buttons width, you can build a stack view with only UIButtons and simply add spacing to your stack view in the Attribute inspector. However, you will have to find a way to add a background color behind your stack view. Apple states about it in the UIKit Framework Reference:

The UIStackView is a nonrendering subclass of UIView. It does not provide any user interface of its own. Instead, it just manages the position and size of its arranged views. As a result, some properties (like backgroundColor) have no affect on the stack view.

I've build a Xcode project with 4 different stack views:

  • one with colored views and relying on the embedded UIButtons intrinsic content size for its height,
  • one with colored views and with a UIButton "equal width and height" constraint,
  • one with colored views and with its own height constraint,
  • one without colored views but with spacing and embedded inside a colored view.

You can find this project on this GitHub repo.

Imanou Petit
  • 89,880
  • 29
  • 256
  • 218
1

iOS 9 has a new UIKit class called UIStackView. It is very helpful in stacking up views horizontally or vertically, like the way you want. You should check out this tutorial: Raywenderlich: UIStackView Tutorial

Anand V
  • 423
  • 3
  • 13
0

Select all the buttons and in Xcode’s Pin menu

  1. Create a horizontal constraint from the top left view to the top right view by selecting the red line to the selected view’s right side nearest neighbor
  2. Create a horizontal constraint from the top right view to the top left view by selecting the red line to the selected view’s left side nearest neighbor
  3. Create a vertical constraint from the top view by selecting the red line to the selected view’s top side nearest neighbor
  4. Select checkbox near to Height, Equal Widths and click on "Add 22 Constraints"
Bond - Java Bond
  • 3,972
  • 6
  • 36
  • 59
Manisha
  • 181
  • 1
  • 6
0

Spacer views should no longer be necessary unless you need space between borders.

You can create a StackView with equal spacing which will dynamically adjust the space between your stack views to use up all available space without altering the size of your subviews.

Interface builder can be a bit misleading here. the value you put in for spacing is the minimum spacing required not what the actual spacing will be. StackView Configuration Screenshot

The StackView will handle your spacing, making the size of your buttons equal you can use regular constraints for.

Declan McKenna
  • 4,321
  • 6
  • 54
  • 72