Using Constraints To Keep Two TableViews The Same

问题:

Context / What I'd Like to Do

• I'm building this for iOS 7
• I'm using a StoryBoard
• I have two UITableViews, that I'd like to keep the same height and distance apart, to retain visual consistency between 3.5 & 4 inch devices
• So on the shift from a 4 inch screen to 3.5 inch screen I'd like for:
• The table views to get shorter but remain equal in height
• For the top table view to keep the same y pos
• For the bottom table view to shift its y pos up to maintain the same distance between the bottom of the top table view and the top of the bottom table view. AKA the same gap between them

What I've Tried

• Using the Pin Icon in the storyboard I've selected both TableViews and set their heights to equal and included this code in the view controller:

[self.topTableView addConstraint:[NSLayoutConstraint constraintWithItem:self.bottomTableView attribute:NSLayoutAttributeBottom relatedBy:0 toItem:self.bottomTableView attribute:NSLayoutAttributeTop multiplier:1 constant:30]];

Question

• How do I keep them the same height while retaining the same distance

Update

回答1:

Check out the Apple suggested way to do this (it's in the section titled "Creating Equal Spacing Between Views").

Edit: Apple now favors the use of stack views for this purpose. See this WWDC 2013 video for OS X and this iOS one from WWDC 2015

They don't present a constraints-only solution. Instead, they suggest placing hidden "spacer views" between your visible views.

The reasoning behind this is rooted in the way the constraint system works. Constraint relationships are always strictly between two objects. In a spacing constraint, that relationship must be between the thing that's being spaced, and the thing it's X space from. That's it. There's no room for a third relation to make the space (itself the result of a relation) equal to some other value.

Height (and width) constraints, on the other hand, are not relations. You can set the height of a thing with a simple constant that's unrelated to anything else. Thus there's "room" to specify a relationship to another object — that a height should be equal to another height (or width, or whatever), for example.

So if you ever find yourself wanting constraints that are all related in some way to each other, look to heights and widths instead of spaces. In your particular example, you can surround your UITableViews with hidden UIViews, set their heights to be equal, and their space to neighbors/containers to 0 or some other low constant.

As an added bonus, this is all possible in IB. No need for custom code or subclasses.

回答2:

The top table view should have a constraint to the top of the superview (or the top layout constraint), a vertical spacing constraint to the bottom table view, and a height constraint. The bottom table view should have a constraint to the bottom of the superview and an equal height constraint with the top table view. The key thing you need, is to make the priority of the top table view's height constraint less than 1000, so that when the height of the screen changes, the one thing that isn't mandatory (that <1000 height constraint) will be the thing that adjusts. All of this can be set up in IB.

After Edit:

Actually, you don't need the height constraint on the top table view at all. Since I have constraints to the top and bottom of the superview, as well as one between the two table views, having a constraint that makes the heights of the table views equal is all you need.