AutoLayout - 如何绑定两个视图并相应地更改大小

Question

i want something who seems simple at first glance, but i can't figure out how to make it nicely from IB.

I want something simple, let's say i have two view into one parent (a view container that hold the two children). What i want is that they are each connected to vertical space at 0 px (one to his top the other to the bottom of the other). So that when one of them change his size the other occupy the remainder size, and so there're will still be connected at 0 pixel each other.

I've put two screenshoots of what i want.

I've tried lot and lot, and nothing is working like i'm expecting.

What is strange that even if i put the priority at the vertical space, the other constraints take priority, and i just get a warning from XCode that my verticalSpace constraint is wrong.

Could someone help me ? I didn't find a specific tutorial on this kind of view managements. Thanks

* EDIT *

Ok i figured out: I finally read the entire tutorial of Ray as suggested, and it helped me a lot (to my defense, i have read before the IOS official documentation about constraints, and it has confuse me more than helped me). To me, what was hard to understand is that now you can't change UIView by frame but now by constraint. When I understood this, it was really easy to make the changes.

By the way i tried the @Handsomeguy's response, and it worked like a charm.

Answer 1

I think you'll need at least one height constraint (with IBOutlet to your view controller) on one of your views... when you change its constant value, the other view should automatically change. You can try on storyboard first, and then write down the logic. But without an height constraint on one of them I don't think it will ever work.

Answer 2

I was able to do it by setting constraints in interface builder:

1. vertical spacing: top layout guide -> yellow
2. vertical spacing: yellow -> red
3. vertical spacing: red -> bottom layout guide
4. height: yellow

Set an outlet to the height constraint, then to change the height of the yellow view just use _height.constant = NEW_HEIGHT

You can probably omit the height constraint if the top view reports it's intrinsic content height appropriately.

Answer 3

Without auto layout it would be as easy as putting an anchor-bottom on the yellow view, and putting an anchor-top on the red one. Now, when you change the parent view, the views would resize 50/50.

Answer 4

Use autolayout. You need the following constraints:

both views pinned to left and right edge of containerView
redView top pinned to containerView top
yellowView top pinned to redView bottom
yellowView bottom pinned to containerView bottom
height constraint on **either* redView **or** yellowView!

This is very easy using this category: https://github.com/jrturton/UIView-Autolayout

UPDATE

I just noticed you said you wanted to do it in IB. You can use the same principle here, but I find it is much more convenient (and also easier to read later) if you use the category mentioned. There will be very few lines of code, and the code will clearly show the intent.

** UPDATE 2**

An explicit height constraint may not be necessary if the intrinsic size on one view is changed. This depends on what kind of views the yellow and green views are.