I want two buttons to have equal width and position themselves proportionally in all screens sizes from the top of the scree using autolayout?

Question

Attaching the view i am planning to design. I would like to position the Buttons with respect to Superview and their Width and Height must increase proportionally to the Screen

Answer 1

My answer is in a bit different way. I prefer not to use size class until and unless specially required. Now for your requirement i will disable size class and i will add the constraint like below.

I will add a clear color alpha 0 UIView to the superview just above those buttons named SpacerView

SpacerView -

1) Leading to superView - 0 - For Alignment of SpacerView

2) Trailing to superView - 0 - For Alignment of SpacerView

3) Top to superView - 0 - For Alignment of SpacerView

4) Proportional Height to SuperView - For Dynamic Sizing Height of SpacerView

Button 1 -

1) Leading to superview - 0 - For Alignment of Button 1

2) Trailing to Button 2 - 0 - For Alignment of Button 1 and Button 2

3) Proportional height to super view - 40:568 - For Dynamic Sizing Height of Button 1

4) Equal width to Button 2 - 0 - For Sizing of Width of Button 2 equal as Button 1

5) Equal Height to Button 2 - 0 - For Sizing of Height of Button 2 equal as Button 1

6) Top to SpacerView - 0 - For Alignment of Button 1

7) Center Y to Button 2 - 0 - For Alignment of Button 2 equal as Button 1

Button 2 -

1) Trailing to superView - For Alignment of Button 2

Here not even a single constraint is extra as per your requirement. If you have still problem i can send you a testing repository which i will make for your understanding.

Answer 2

Steps 1. Take two button side by side. 2. Give constraint for left button leading, top to superview. 3. Select height for left button. 3. Press control drag cursor from left button to right button and select horizontal spacing(select space between two button) 4. Give constraint to right side button top, trailing to superview. 5. Select height for right button. 6. Now press command ,select both buttons and see pin option below right side there select equal widths. 7.If some warning is showing means , no problem just click remove that warnings.

Answer 3

I've found the solution. Following are the constraints which i provided

LEFT BUTTON:

1.left leading constraint 2. top leading constraint

RIGHT BUTTON

1.right trailing constraint 2.top leading constraint

Common for both

1.Equal heights constraint 2.Equal Widths constraint

To proportionally increase the height depending on the superview i added aspect ratio constraint from both buttons to the superview with button height 0.6 of superview height.

Answer 4

For the Left Button:

1. Top constraint from the top of the view
2. Left constraint from the left edge of the view
3. Height constraint
4. Right constraint to the right button -> That will be 0

For the Right Button:

1. Top constraint from the top of the view
2. Right constraint from the right edge of the view
3. Height constraint
4. Left constraint to the right button -> That will be 0

Answer 5

You can try to use StackView feature, supported from Xcode7, take a look at this tutorial. StackView Sample

Answer 6

This is an example just for one row of your buttons, so they can be reused for other UI elements.

Put these constraints onto your buttons:

LEFT BUTTON:

• left leading constraint
• top leading constraint
• height constraint

RIGHT BUTTON

• right trailing constraint
• top leading constraint
• height constraint

And constraints related to both buttons: (you need to select both buttons to be able to apply relation constraints)

• spacing constraint between buttons
• equal width of these buttons

In Interface Builder it looks like this:

And these layout is universal, so I chose some device sizes to present:

iPhone 5

iPhone 6

iPhone 6 Plus

... etc.