Constraints for universal storyboard on iPhones

Question

I'm struggling a bit with constraints on iOS with the differents screens sizes nowadays.

I tried google and stackoverflow to find a solution but my english does not seem fluent enough to find an answer.

I got 4 buttons verticaly aligned, the first and the last one are constrained by the edges of screens (kinda easy). But I'm really struggling with the constrains of the 2 middle buttons. I can't find a way to make them equally spaced from the left and right buttons on every size screens.

Is there something easy and tricky to make these constraints right ? Or am I doing it wrong and should I try to do it programmaticaly ?

Thanks

what about the button width? its need to be fixed or dynamic — Suhail kalathil, Dec 22 '15 at 11:05
I used 50 for width, I'd like it to be fixed but I can change it programmaticaly — Bryan ORTIZ, Dec 22 '15 at 11:26
may be this link worked for you....http://stackoverflow.com/questions/32862142/how-to-add-equal-spacing-and-equal-width-for-button-in-ios-auto-layout/32862693#32862693 — Bhavin Bhadani, Dec 22 '15 at 12:47

score 2 · Answer 1 · edited Dec 22 '15 at 11:22

2

Add three invisible views in middle of each button, make their width equal with each other with constraint then your four buttons will be equally spaced. For the Y then you just need to pin it at your desired place.

If you are going to support only iOS 9 and higher, then use a UIStackView.

edited Dec 22 '15 at 11:22

Marco Boschi

2,321
1
16
30

answered Dec 22 '15 at 11:17

Tj3n

9,837
2
24
35

LearneriOS · Accepted Answer · 2015-12-22T11:25:54.540

1

The solutions to this problem is very simple. This can be solved using the concept of "spacer views". You have to place invisible views between each red coloured view. You would be requiring 3 in your case. Then make their background as clear colour. . Next, make their width equal and constrain their edges to the views that are after and before that view. You then define the size for red coloured view. REMEMBER dont give the "clear coloured views" any fixed width. It would be determined by the runtime.This would solve the problem. Tell me if any more information is required.

Here is a blog post for the solution for this http://adamdelong.com/fluid-layouts-with-auto-layout-size-classes-spacer-views-and-constraint-priorities/

This is the youtube video for this https://www.youtube.com/watch?v=eSG-3-QpmWk&feature=youtu.be

edited Dec 22 '15 at 11:25

answered Dec 22 '15 at 11:20

LearneriOS

309
6
18

You can follow the solution in the following answer as well. http://stackoverflow.com/questions/13075415/evenly-space-multiple-views-within-a-container-view – LearneriOS Dec 22 '15 at 11:23
Here is a blog post for the solution for this http://adamdelong.com/fluid-layouts-with-auto-layout-size-classes-spacer-views-and-constraint-priorities/ This is the youtube video for this https://www.youtube.com/watch?v=eSG-3-QpmWk&feature=youtu.be – LearneriOS Dec 22 '15 at 11:25
Got it, it worked. The video and the tutorial you linked did explain me everything and does support version prior iOS9. Perfect answer to me, thanks. – Bryan ORTIZ Dec 22 '15 at 11:36
pssst.... one more recommendation for iOS9 : iOS 9 has introduced some more UIAutolayout concepts which obviate the need of spacer views by introducing some other concepts . You can search more on that. Cheers. :) – LearneriOS Dec 22 '15 at 11:39
ONE MORE LINK FOR OTHERS : https://www.packtpub.com/books/content/evenly-spaced-views-auto-layout-ios – LearneriOS Dec 22 '15 at 11:43

score 1 · Answer 3 · answered Dec 22 '15 at 11:23

Besides Tj3n's answer with views between buttons, you could use

A UIStackView (iOS 9!) where you use for settings Axis: horizontal, Distribution: equal spacing
A Toolbar (depends on what you want to do with your buttons) with toolbar items and flexible Space between them

score 1 · Answer 4 · answered Dec 22 '15 at 11:38

Why not size classes? Apple introduced the concept of adaptive user interfaces in iOS 8 relying on a combination of Auto Layout and size classes.

If you aren't aware of what is size classes, there are plenty of tutorials available, please find one.

Summary: Apple very cleverly removed two story borads for iphone and ipad and made a single story board for universal app. No you dont have to struggle trying to apply autolayout constraint that satisfies all the screen sizes :)

Below are few of the size classes and their meaning :) Regular width x Regular Height ----> iPad Potrait mode/ipad landscape mode Compact width x Regular Height ----> iPhone 6 plus,iPhone 6,iPhone 5s,iPhone 5,iPhone 4s potrait mode Compact width X Compact Height ----> iPhone 6,iPhone 5s,iPhone 5,iPhone 4s landscape mode Regular width x Compact Height ----> iphone 6 plus landscape mode.

You can select the size classes you want to support from story board :) and start applying constraints specific to each size classes (like buttons in middle) or if you have generic one (like your buttons fixed to screen) for all the size classes.

You can deploy, remove, reuse or delete the constraints form various size classes.

SUMMARY: Buddy, If you are not using size class yet, its a high time to start using it :) There is a wonderful video on it in apple WWDC sessions 2014 i believe. Download, watch, start playing with it.

Happy coding :)

Thanks for the info, I heard a bit about size classes but didn't check about it yet since I though the best way to handle universal applications were constraints. I'll look into it ! — Bryan ORTIZ, Dec 22 '15 at 11:43
Hey Bryan, You dont have to write constraints that works for all size clasess any more buddy :) dont waste your energy on that :) I did the same mistake a almost a year ago then I got to know about size classes :) have a look at it believe me development will be much simpler :) and faster :) happy coding :) — Sandeep Bhandari, Dec 22 '15 at 11:46
@BryanORTIZ note that size classes are -in my opinion- only preferrable when you can't do something universal for all devices (like your question). Ideally you would only edit **one** size class (`Any:Any`, the default one) and do everything in there. — Alejandro Iván, Dec 22 '15 at 13:44

score 0 · Answer 5 · answered Dec 22 '15 at 11:29

you can use equations to get this appearance. use views' trailing points to get this.

View1.trailing = superview.trailing*(2.0f/9.0f)

View2.trailing = superview.trailing*(4.0f/9.0f)

View3.trailing = superview.trailing*(6.0f/9.0f)

View4.trailing = superview.trailing*(8.0f/9.0f)

if you make View1.width = superview.width*(1/9.0f) you can achieve what you want.

there are a lot of similar solutions for this issue. but the base is using trailing points. It may also be done with using centerX positions of Views.

View1.centerX = superview.trailing*(3.0f/15.0f)

View2.centerX = superview.trailing*(6.0f/15.0f)

View3.centerX = superview.trailing*(9.0f/15.0f)

View4.centerX = superview.trailing*(12.0f/15.0f)

score 0 · Answer 6 · answered Dec 22 '15 at 15:12

Thanks to LearneriOS answer, I solved my problem.

In order to get my wished result, I created 3 views with 10 width.

My first and my last button were already constrained. I constrained my first extra view to my first button with Horizontal spacing then i constrained my first extra view with the Center vertically in container. I then constrained my extra view to his own width and heights.

There come the important part: I did go on the constraint menus and selected the width constraint. The value inside was still 10 but I did change the priority from 1000 to 750.

Then I did copy my first extra view and constrained all of them to the nearest buttons, the same way I did with my first entra view but I removed their width constraint (to all the extra views but the first one) and constrained the extra views with the first one by plugging the: Equals Width.

Then I got my result, I hope it was clear enough and thanks again.

Constraints for universal storyboard on iPhones

6 Answers6