Flexible image views

Question

I'm working on a view that contains three UIImageViews. The view and the child imageviews are created in the storyboard. The images for these imageviews are loaded from a server. When the server returns images for all three images, it should look like this:

When there is no image available for the third imageview, the layout should dynamically change like this (with image scaling into the imageview etc, I know that part):

I am already working quite a while with the Interface Builder, but have no idea how to achieve this..

Anyone can help me out figuring this, preferred using autosizing in IB?

Answer 1

This kind of possible using autolayout, but you still have to modify one constraint programatically, based on whether you are displaying one or two UIImageViews.

Here's how you do it, with autolayout:

Create The Container View

1. Create a UIView as a container.
2. Move the left edge of the container view to the left margin.
3. Move the right edge of the container view to the right margin.
4. Pin the container view's height.
5. Delete the constraint for the bottom space to superview.

Create The UIImageViews

1. Create the three UIImageViews inside the container view.
2. Size and align the UIImage views as you want them to display.
3. Pin the horizontal spacing between the first and second image view.
4. Pin the horizontal spacing between the second and third image view.
5. Pin the leading space on the first image view to the superview.
6. Pin the trailing space on the third image view to the superview.
7. Select all three image views and pin the widths equally.
8. Delete the align center x constraint on the second image view.
9. Select the trailing space to image view constraint on the second image view and set the priority to 900 (important).

Create the Magic Extra Constraint

1. Pin the trailing space to superview on the second image view.
2. Select the new constraint and set the priority to 850.
3. Set the constant value for the constraint to 0.

The container UIView is simply to maintain the margins and height for the containing views.

The second image view should now have two trailing constraints, both appear as dotted lines. Rotating the screen should have the container view stretching to fit, and the three UIImageViews also stretch to fit.

Currently, the constraint between the second and third image views is higher priority than the "magic" constraint between the second image view and the container view, causing the second image view's right edge to be spaced away from the third image view's left edge. To adjust the layout for just two images, the "magic" constraint has to be higher priority than the other one, causing the second image view's right edge to align with the superview's right edge.

Simply create an IBOutlet for the "magic" constraint (trailing space to superview on the second image view) and raise and lower the priority as needed.

if (imageCount == 2) {
  // Second image view should favor right edge of superview
  self.myConstraint.priority = 950;
} else if (imageCount == 3) {
  // Second image view should favor left edge of third image view
  self.myConstraint.priority = 850;
}

You may also wish to hide the third image view when necessary.