In many programing scenarios we face difficulty using Autolayout. We sometimes want subviews in fixed bases or sometimes in the aspect ratio of parent view. Sometimes we want imageview having Aspect fit content mode. If the container size is unknown at runtime, we want the subview to respect the aspect ratios which are defined. Sometimes if container views aspect ratiois wider than subview, then subview must have parent view height. Sometimes they are required to be Centered Horizontal and Vertical.
Is there any way to achieve this with simplicity using Auto layout?
[one_third last="no"]
[/one_third]
[two_third last="yes"]
Image shows two views one in light blue having child with light green color whereas second view with light pink color having child view with dark green color in one container.
Aspect ratio of light green view is 4:1 and aspect ratio of dark green view having 1:4 ratios.
Step 1: Set the light blue and light pink view with top margin, bottom margin, left margin and right margin with 0. (Ref Image 1 and Image 2)
First we set all the margins with 0. Due to which views became width equal as parent container view.
Step 2: Set the light blue and light pink views with equal height. (Image 3)
In this case we can set Equal width constraints so light blue view fills in the upper part of the container, whereas light pink view fills up lower part of container. Sub views light green and Dark green adjust their aspect ratio according to the parent views.
We get the storyboard views, shows in
Next image shows you what we have done in it:
[/two_third]
[one_half last="no"]
Image 1
[/one_half]
[one_half last="yes"]
Image 2
[/one_half]
[one_half last="no"]
Image 3
[/one_half]
[one_half last="yes"]
Image 4
[/one_half]
So the constraints I've set up so far are correct. I undo that and start work on the light green view.
Aspect-fitting the light green view requires five constraints:
- A required-priority aspect ratio constraint on the light green view. You can create this constraint in a xib or storyboard with Xcode 5.1 or later.
- A required-priority constraint limiting the width of the light green view to be less than or equal to the width of its container.(Ref Image 1, 2 , 3)
- A high-priority constraint setting the width of the light green view to be equal to the width of its container. (Ref Image 4,5)
- A required-priority constraint limiting the height of the light green view to be less than or equal to the height of its container.(Ref Image 4,5)
- A high-priority constraint setting the height of the light green view to be equal to the height of its container.
Let's consider the two width constraints. The less-than-or-equal constraint, by itself, is certainly not sufficient to determine the width of the light green view; many widths will fit the constraint. Since there's ambiguity, autolayout will try to choose a solution that minimizes the error in the other (high-priority but not required) constraint. Minimizing the error only means changing the width as close as possible to the container's width, and that too without violating the required less-than-or-equal constraint.
The same thing happens with the height constraint. And since the aspect-ratio constraint is also required, it only helps maximize the size of the subview along one axis (unless the container happens to have the same aspect ratio as the subview).
[one_half last="no"]
Apply same constraints to the Dark green view at bottom then we get the result as expected.
(References: http://stackoverflow.com/questions/25766747/emulating-aspect-fit-behaviour-using-autolayout-constraints-in-xcode-6/25768875#25768875)
