iosautolayoutconstraintsaspect-ratioautoresizingmask

autolayout view gets overlapped on smaller devices

Basically I have one view with some height x and 4 other views with same height y all these 5 views are vertically one after another with 10 px space

all these views have again some child views which depends on them.

For this scenario stackview is ideal but it support starts from iOS 9 unfortunately I have to support from iOS 6

so basically I fixed all the views with leading,trailing,top,bottom and height constraint...

it works good in iPhone 7s ... but in iphone 4s the view gets overlapped on each other

in iphone se the views are very much congested..

I was always thinking the height will change according to the screen size for iPHone 4s but that didn't happen

How can I work this out ?

Solution

  • There are two ways to solve the problem you are facing.

    First:

    Instead of giving a fixed height to any of your UIView you can use a proportional height constraint. Select your UIView and control + drag from your UIView to the main superview. Select equal height constraint. Now, double click the height constraint and set the multiplier to 0.15 or any value you seem nice. This will ensure the view thus created is always 0.15 times the entire view's height. Now you can create your other views either proportional to this view following the same steps or to the superview.

    enter image description here

    Second: (I prefer this approach as for items as sometimes you need to create forms the above approach might still push elements off the screen).

    This will use a UIScrollView. To your main view add a UIScrollView and add a leading, trailing, top and bottom constraint to your superview. Add a UIView to this UIScrollView and give it a leading, trailing, top and bottom as well. Additionally give it a equal height and width constraints to the superview of the UIScrollView with a low priority of like say 250. Now add all your elements inside this UIView however you seem fit. With fixed height, proportional height whatever and happily run it. But ensure you add a bottom of >= a minimum value for your bottom most view.

    The screen will automatically become scrollable if the content will go off screen otherwise it won't be scrollable at all.