CODEWITHSUNDEEP
iosxcodeautolayoutconstraints
StackUnderflow
StackUnderflow

Reputation: 2463

How do I solve this Auto Layout "puzzle" with constraints?

enter image description here On the left is the normal state of the layout. On the right is the expanded state of the layout.

My problem is that I can't figure out how to keep the pink boxes centered within their cells, and the green lines connected between the pink boxes as the layout grows in any direction. The AutoSizing.xib with just these two views can be found here: https://dl.dropboxusercontent.com/u/6979623/AutoSizing.xib

Upvotes: 1

Views: 169

Answers (1)

Rob
Rob

Reputation: 437632

There are two approaches to keeping the pink boxes centered within the four quadrants of the super view:

  1. You can add four invisible views that even split up the four quadrants of this main view (using constraints to pin them to their respective corners and another set of constraints to make them equal widths and heights). If I were going to represent that in VFL (just because it's a concise way of representing all of those constraints), it might be something like:

    H:|[quadrant1][quadrant2(==quadrant1)]|
H:|[quadrant3(==quadrant1)][quadrant4(==quadrant1)]|
V:|[quadrant1][quadrant3(==quadrant1)]|
V:|[quadrant2(==quadrant1)][quadrant4(==quadrant1)]|

    You can then center the pink views in the center of each of those four quadrant views.

  2. You can add center constraints that employ multipliers to offset these pink squares within their shared superview. Interface Builder has only recently gotten multiplier support and it's not super solid, in my opinion, so when I want to use multipliers, I often fall back to adding those programmatically.

Once you have the pink boxes laid out correctly, then the green lines between them are simply fixed spacing leading/trailing or top/bottom for horizontal or vertical lines, respectively. Combine that with fixed width and center alignment and you're done. Bottom line, take care of the placement of the pink boxes, as discussed above, and then the creation of the green lines becomes pretty easy.

Upvotes: 5

Related Questions