1

enter image description here

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 ?

Deepak
  • 724
  • 4
  • 13
Ankur Patel
  • 477
  • 5
  • 19
  • recommend you to read this article, to understand more about autolayout and constraints https://www.raywenderlich.com/160527/auto-layout-tutorial-ios-11-getting-started – Bence Pattogato May 01 '18 at 10:35
  • Possible duplicate of [What is Auto Layout?](https://stackoverflow.com/questions/12424248/what-is-auto-layout) – Nitish May 01 '18 at 10:36
  • You can set constraint like **1.** Leading, Bottom, Trailing, Equal Height of View and need to change multiplier from 1 to 0.64 or as you want. **2.** Bottom, Centre Horizontal Of View, Equal Width of View and change equal width multiplier from 1 to 0.9, Equal Height of View and need to change multiplier from 1 to 0.64 – Kuldeep May 01 '18 at 10:46

3 Answers3

1

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

enter image description here

enter image description here

Shehata Gamal
  • 98,760
  • 8
  • 65
  • 87
0

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

Try this and see:

enter image description here

Preview with iPhone-X device:

enter image description here

Krunal
  • 77,632
  • 48
  • 245
  • 261
  • Not as a parent view but safe area layout itself, adds a layer for subviews of main view, protecting them from to be clipped by notch, nozel and rounded corners – Krunal May 01 '18 at 12:33
0

(1) Red View enter image description here

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

(2) Light Grey UIbuttonenter image description here

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

Ankur Patel
  • 477
  • 5
  • 19
  • You are almost correct, but what happen when you run this in iPhone-X? check this layout in iPhone-X also. I think bottom view (red) will be covered by voice nozel. – Krunal May 01 '18 at 12:35
  • I check My current code when safe area is necessary for iPad Pro 12.9, its shows perfect but when safe area is not necessary for iPad Pro 9.7, its does not show perfect – Ankur Patel May 01 '18 at 12:56