Autolayout make design according to screen size ios

Question

Hi Guys I want to make design according to screen size. For example My whole design uses autoresizingmask, but now I want use AutoLayout

For example I want red view Leading Trailing and bottom and top space value decrease and increase according to screen size. same as width and height of UIView also decrease and increase according to screen size

How can I do that ? I am trying to set Leading space, Trailing space, Top Space, Bottom Space, Width, Heigh, Constraints I can not get Idea

How do i achieve ?

Answer 1

(1) Red View

I set center x,y of the view to the parent and give it proportional width&height to the parent

(2) Light Grey UIbutton

I set center x,y of the view to the parent and give it proportional width&height to the parent

check let me know if any correction. Thanks you

Answer 2

leading and trailing space would be much easier than proportional width.
Also note, connect your view constraint with SafeAreaLayoutGuide

Try this and see:

Preview with iPhone-X device:

Answer 3

In addition to setting constraints to leading, trailing , top or bottom , when you set height/width make it proportional for example say you have a side menu on the left don't give it explicit width like 200/300 but make it's width Equal to view's width and set multiplier to say 0.5 if you want to make it take half screen width in any screen width , same applies for height ,also use size classes if you want to configure a constraint in a different way say on iPad or any size class you select

//

you can set multiplier for any constraint if it makes sense to , say leading of a view is 50 like the red one below , when you make multipiler of blue view ' leading 2 it will be 100 , use it when there is a value if 50 was zero then setting multiplier to anything won't change the leading of the setted view