How to Autosize an Image with Auto Layout for Your iOS App

By Jesse Feiler

Because you’re sure to decide — as all good iOS app developers have decided and will continue to decide in perpetuity — that your app needs to function well in both Portrait and Landscape orientations, you’ll need to make sure that, when you rotate the view, the car (subview) remains positioned at the bottom of the screen.

Luckily for you, most of that work gets done for you in — the class UIViewConroller from which we’ve derived TestDriveController. The only thing you have to do is tell the view controller exactly how you want it to move things around when the view changes orientation. You can make such wishes known in the storyboard using the Size inspector.

You’ll need to select some of the views to manage their autosizing. For this process, make certain that the Document Outline is shown at the left of the storyboard. The reason for this becomes clear if you look at the Document Outline. Inside the View Controller – TestDrive, you have a view.

Within that view, you have an image view containing SeeTheUSA image from the asset catalog. The image view is now the same size as its containing view. You need to be able to select each one separately, so the easiest way to do that is in the Document Outline.

image0.jpg

There are four sections of the Size settings. From top to bottom, they are

  • Metrics: Here at the top of the Size inspector, you set the location coordinates and the view size. Most of the time, you will use the Interface Builder tools, but when you want specific and accurate sizes, you type them in here.

  • Content Hugging Priority and Content Compression Resistance Priority: These sections are used mostly for adjusting the view’s size based on its contents. Each of these has a slider where you can adjust the horizontal and vertical values. This is not an on/off situation: at runtime, the values are weighed and the highest values win out where there’s a conflict. You may set constraints that are contradictory.

    For example, you may want a view to be positioned in a certain location based on another view. In order to do that, the view may need to be resized. In such a case, a higher hugging priority will mean that view will resist resizing at the expense of not fulfilling the request to position it 10 points away from another view.

    Compression is the other side of the coin. If the compression resistance has a higher value, resizing that might truncate the view’s content will be resisted.

  • Intrinsic Size: This is set to default, which is where you’ll leave it for basic layouts. This is the natural size of the view that may be resized or reshaped.

  • Constraints: These are the heart of Auto Layout. You provide constraints as to the view’s location. These constraints may be contradictory in some cases, but you can assign a weight to each one to indicate which constraints are more important than others. At runtime, Auto Layout quickly figures out the optimal collection of constraints that does as much as possible of what you want.

If you don’t see the Constraints section, Auto Layout may be turned off for your storyboard. To turn it on, select the storyboard in the Project navigator and open the File inspector. The Use Auto Layout option is a check box in the Interface Builder Document section.

To set the constraints, select the view in the Document Outline, and choose Editor → Resolve Auto Layout Issues → Reset to Suggested Constraints in View Controller.

You now should have the three constraints. All three have the same basic structure. The first one specifies the trailing space from the selected view (the top-most View object) to the image view. The second specifies the leading space, and the third specifies the bottom space.

image1.jpg

You may wonder what leading and trailing are in this context. In a left-to-right script such as English, Spanish, French, and the like, the leading space is the space between the left edge of the two views, and trailing is the space between the right edges.

For a right-to-left language such as Hebrew or Arabic, the leading space is the space on the right and the trailing space is the space on the left. Spaces for top and bottom are independent of language direction.

If you select the first one, you’ll see that you can click the gear wheel at the right of each constraint to open more details. The default is quite simple: The spacing between right edges of the top-most View and the image view is zero points. If you explore further, you’ll see that the bottom spacing is the default, which is also zero.

You’re not yet done with managing Auto Layout. Select the image view and pin it to the bottom of its superview. Use Editor →Pin →Bottom Space to Superview. This means that it will be the right size when the device is rotated.

Repeat the process for the car image. The defaults show you another aspect of constraints. You’ll have the default bottom space to superview again, but you’ll have a new constraint that aligns the center of the car image to the center of the image view for the X (horizontal) coordinate.

image2.jpg

Although the app won’t run until you enter the code. But, when you do enter that code, you’ll be able to rotate the app in the simulator.

image3.jpg

This process is typical of using Auto Layout. Draw your layout in the storyboard scene. Some constraints will be created for you automatically, and you can test to see what happens. You may need to tweak the constraints (such as by pinning an object to a superview). You also may choose to clear all the constraints and reset to the defaults. Another tweak may be necessary.