Autolayout problems in bigger devices

Question

I am developing an iPhone app in which, i have made this page using autolayout

but it shows unwanted spaces above Register Me(yellow button) in bigger iPhones

Constraints given are: top,bottom, leading and trailing with respect to its subviews to all the controls. (there is no warning or misplaced constraints i see in xcode)

Here is the screenshot of iPhone 4s

Here is the screenshot of iPhone 6+

I want to minimize the empty spacing in bigger iPhones... How do i solve this problem?

Please help and thanks in advance

That is a design problem without generic answer. It is something *you* have to decide about - *you* have to define what you want. — luk2302, May 19 '16 at 08:54
**Constraints given are: top,bottom, leading and trailing with respect to its subviews to all the controls.** if you give button's bottom it will create issues so **register me** button constraint should be top (YOU WILLREGISTER's BOTTOM) , leading , Trailing and height — Prashant Tukadiya, May 19 '16 at 09:10
if you want all thing in center like iphone 4 screen other solution can be you can put all in a view align vertically, horizontally center with supverview will solve your problem — Prashant Tukadiya, May 19 '16 at 09:12

BangOperator · Answer 1 · 2016-05-19T09:05:35.413

1

If your intent to target iOS 9 users, you should use UIStackView, the provide a lot of flexibility in terms of alignment and distribution. If not, then you or your design team has to find a solution.

edited May 19 '16 at 09:05

answered May 19 '16 at 08:52

BangOperator

4,377
2
24
38

My app also supports iOS 7, Stackview is available after iOS 9 :( – Krunal May 19 '16 at 08:58
Ok. So now for "I want to minimize the empty spacing in bigger iPhones" there could be lots of answers. Put it in a view align it in horizontal centre. Put everything in scrollview etc etc. – BangOperator May 19 '16 at 09:01

score 1 · Answer 2 · answered May 19 '16 at 09:05

Heres a suggestion for you. You have roughly seven regions of interest there. First one is the title 'Register Kano .. ' etc. Then there are 5 text entry areas - name, email, password, etc. Finally you have 3 small lines of info text - I would count this as one final area, so 7 in all.

What I would do is create 7 parent UIViews to put that stuff in. I would give them 'equal height' constraints, and make them sit above and below each other with no gap. Then as the iphone screen changes height, those areas stretch out height-wise to fill the area. Heres a rough mockup :

Select all those UIViews and select the 'equal heights' constraint :

Then every view except the bottom one needs these constraints (top, leading trailing to superview 0px)

Then your bottom view needs those plus 'bottom' too :

So all that remains to do is to put your content in each of those boxes, but centre them in terms of vertical position relative to their superview.

You can simply do this using aspect ration constraint instead of putting each component in various container views. — Dharmendra Chaudhary, May 19 '16 at 09:57

score 0 · Answer 3 · answered May 19 '16 at 08:57

0

You can update the margin contraints of your controls on big devices.
This would add space between each rows on big screens, will looks better as you ask.

Something like :

myControl.heightConstraint.constant += 20.0f

This is how I would do, but you have to decide how you update your layout for big devices

answered May 19 '16 at 08:57

David Ansermot

6,052
8
47
82

How do i add this kind of constraint in storyboard for bigger iPhones only? – Krunal May 19 '16 at 09:03
1

You have two options : 1) Programmaticaly 2) By using the SizeClass to set updated contraint only for certain sizes – David Ansermot May 19 '16 at 09:05

score 0 · Answer 4 · answered May 19 '16 at 08:57

0

@Krunal you can use the size class and set the constraints accordingly so it will give a brief idea how to fit the UI design for every device!!

answered May 19 '16 at 08:57

Sanjeet Verma

551
4
15

score 0 · Answer 5 · answered May 19 '16 at 09:24

you can set constraints relative to height of your base view. This will make your interface objects evenly distributed over layout. Lets assume you have 8 regions. for registerLabel

registerLabel.leading = baseView.leading
registerLabel.trailing = baseView.trailing
registerLabel.top     = baseView.top
registerLabel.bottom  = baseView.bottom * (1/8)// it will be always proportional to height of view

then for icons at the beginning firstIcon

firstIcon.leading = baseView.leading + 10
firstIcon.height  = firstIcon.width
firstIcon.height  = baseView.height*(1/9)// to give a gap between icons
firstIcon.bottom  = baseView.bottom * (2/8)

and then you can set textfield's constraints according to firstIcon

for other icons you can go on with 3/8, 4/8, 5/8, 6/8 and set the relative textfields constraints according to that icon.

and lastly for registerMe button

registerButton.leading  = baseView.leading
registerButton.trailing = baseView.trailing
registerButton.bottom   = baseView.bottom
registerLabel.height    = baseView.height * (1/8)

With this approach your icons size also decrease and increase relatively with height of view and all the page will be filled.

baseView is view of controller.

score 0 · Answer 6 · answered May 19 '16 at 09:55

What is happening here, you kept the width according to superview ie phone width, but your height is fixed.

Do one thing instead of giving Height constraint, use aspect ration in combination with leading , trailing and top constraint. When view will stretch widthwise , your component's height will also Increase and fill the extra space for iphone 6.

This is the best thing you can do keeping the same layout and design pattern.

score 0 · Answer 7 · answered May 19 '16 at 11:27

Seems you have given some fixed height in views.

As every element is depends on it above and below elements constraints, this might be possible of empty space.

So try to divide the View part then the dependency of constraints will reduce.

If you don't want to show empty space, then use center horizontally to one of the element which will look good, here it may be the third field.

Then start giving same constraints to Register button. Sure it will help you in resolving this issue.

score 0 · Answer 8 · answered May 19 '16 at 12:31

Hey its the best solution for you is stackView Combine your objects in single stackView. You can combine your object vertically and also horizontally. It will decrease your space and view will arranged in awesome manner. You can select your objects like this. Click here to make it stack. Now you can reduce your space like this.

Autolayout problems in bigger devices

8 Answers8