IOS adaptive layout using Autolayout

Question

I am working on IOS app and its my first app to be build on IOS. I have good experience of developing Android apps. So I have gathered basic information and knowledge about IOS development. I am working on autolayout. But I am not getting it work completely. I have seen Some developers are working on code, But I just want to use IB as I believe there will be some way to handle this.

So looking for help, Please do not down vote my this post As I am posting this after trying almost everything I get on internet.

First take a look at what I have developed and what it is :

in picture there are different numbers of simulator such as Ipad pro 12.9, Ipone 8 plus and I phone se

What I have done so far:

• I have taken the View (the white box in middle). I have made it center vertically and center horizontally.
• I have set view height as 300 points, and width to match the superview with some margins
• I have put the Text Fields for taking Phone and PIN from user and OK button as shown in picture.

Problem & what I want: - The problem is view is center vertical and horizontal but not its
content are. I want this view to manage its height on the basis of
its content inside. so that It can be looked as center aligned
vertically. Right now its not center align vertically - Secondly the problem is the width of text fields, as on Ipad they looks too bad. So I really want them to be look good on all devices.

Is there any solution for this using the adaptive/Auto layout? please help me that How can I get this using IB.

Answer 1

@Android Teem, For this you need to use SizeClasses along with the AutoLayout.

Below I am trying to give you solution.

use items structure as like below. Don't use another UIView inside main view. Instead user StackView. It automatically adjust contents inside it. For more just look for "UIStackView" on Apple Doc.

Next you need to add constraints to stack view as

• Leading 10 (for x)
• Trailing 10 (for y)
• Allign to center (for width)

height stack view will automatically adjust.

Now double click on leading and trailing constraint will open size attributes. Click on "+" icon just before Constant. It will show you a pop up. add Regular Width Regular Height for iPad and set values as 200 (I have give 200, you can give based on your calculation and requirement). this will show like below image

Now Either run or check from preview for all screens. you will get desired results. my changes show result as below

Happy Coding

Answer 2

Here is what you need to do. Go to the storyboard

1. Right click on the white area of the screen and drag the cursor to the green area.
   2. Few options will appear, select Equal Heights
   3. Now the white dialog box will become equal height to the green screen but don't worry. Select that height constraint and set the multiplier to let's say 0.5 for 50% height of super view. Repeat the same for width

Answer 3

Try following solution:-

1. Fix the width of textfield.
2. For label use minimum font scale(search on google).
3. For width and height you have to use adaptive layout.

width = 70% of superview which means multiplier for your view will be 0.7

height = 60% of superview which means multiplier for your view will be 0.6

Refer to the image:-

Equal width with the superview

Set the multiplier as 0.7

Answer 4

Remove the height constraint and hook the bottom most button to the bottom of the view