Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

autolayout - make height of view relative to half superview height

have been getting into autolayouts recently and I'm stuck on what seems like a really trivial problem example. I have a view that I want to sit at the top of the screen, and take up half of the screen-height. Simple before autolayout - just tack it in place and tell it to expand vertically when the superview resizes.

Now, I can't for the life of me see how to do it. Here's what I get when I try to set this up:

autolayout blues

The bottom space constraint is set to "equals 284", which is absolute and absolutely useless to me when I change to iPhone4 layout, as it keeps 284 points space at the bottom of the screen, and shrinks the view to no longer be half the size of the screen. And there's no way of setting that constraint to equal some fraction of any other view's height..

After struggling for a while, the only way I can think of doing this would be to introduce another view below this view, pin their heights equally, have them sit above and below each other and then set the second (bottom) view to be invisible.. which seems a bit ugly!

Am I missing something obvious?..

like image 606
Mete Avatar asked Feb 18 '13 12:02

Mete


People also ask

What is Autolayout aspect ratio?

If you select Aspect Ratio for a single item, the width of the item is used as the numerator for the ratio, and the height is used for the denominator. If you select Aspect Ratio for multiple items, Auto Layout chooses the width of one of the items for the numerator and the height of another item for the denominator.

How does a view's intrinsic content size aid in auto layout?

In general, the intrinsic content size simplifies the layout, reducing the number of constraints you need. However, using the intrinsic content size often requires setting the view's content-hugging and compression-resistance (CHCR) priorities, which can add additional complications.

How to Add constraints to view in xcode?

In Xcode 7.2 (and perhaps also in your version of Xcode), firstly select the view that you want to add constraint to, and then press the "control" button on your keyboard and keep doing it, and then drag the view to the super-view. Then a menu will appear, and then you can select to add some constraints.


2 Answers

Storyboard solution where you can set exact ratio between any views:

Set height equality constraint

Now:

Edit constraint's multiplier

PROFIT!!!

Result

P.S. Also note that this method works with views on different nesting levels and (obviously) applicable for width

P.P.S. sometimes it might be helpful to "reverse first and second item" of constraint or set reverse multiplier (for example 2 instead of 0.5) (but these methods are not helpful if you don't understand how views relate between each other).

like image 163
Fyodor Volchyok Avatar answered Sep 18 '22 23:09

Fyodor Volchyok


This is now possible in IB as of [at least] Xcode 5.1.1. Although it took me sometime to figure out it is actually super simple:

First create a basic top alignment constraint (you will also need to setup bottom, left, and right constraints, like normal) . Then select the constraint and navigate to the Attribute inspector:

Demonstration of steps above

Then you can adjust the multiplier. If you want it 50% of the super view leave it at 1, since it is aligned per the super's center. This is also a great way to create views that are other percentages too (like 25% of super view)

Demonstration of second step above

like image 34
Firo Avatar answered Sep 18 '22 23:09

Firo