Auto layout of multiple views

Question

I'm trying to use auto layout for positioning the following views inside a viewController that may have different sizes on different devices:

All of the UILabels should have fixed space from the top or bottom and between them. The UIImageView should have flexible width and height according to the space that left, and a 1:1 aspect ratio.

The UILabels have the following constraints:

Top space
Bottom space
Horizontal center in container

The UIImage view has the following constraints:

Horizontal center in container
1:1 ratio
Bottom space to label
Top space to label
Width: 100 (priority 250)
Height: 100 (priority 250)

In the Xcode preview everything looks good, but when running the app the UIImage covers the entire screen instead of adjusting its width and height correctly.

select one of your views on interface builder. then, click the triangular icon at the bottom right corner. at the bottom section that says All Views click on Update Frames. what is the results? — hasan
you also should remove the width and height constraint on the UIImageView for good — hasan
There are no misplaced views, so when I click "Update Frames" nothing happens. — Rgo
I removed the width and height constraints and the problem still exists. — Rgo

Thejaswi Venigalla Thejaswi Venigalla · Accepted Answer · 2015-08-10T13:04:23

First make sure that the label above ImageView is hooked to Top space to Top Layout Guide and bottom most label below ImageView is hooked to Bottom space to bottom Layout Guide.

Check whether all the labels below ImageView are hooked to the label under that. Now check if the Image view is hooked to top and bottom labels. Give width constraint and get an outlet it.

As per the constraints Height of the ImageView varies according to screen height. Width can be changed accordingly in program using width outlet as given below

self.img_width.constant = self.imgView.frame.size.height;

Hope this solves your problem.

Auto layout of multiple views

3 Answers