User interface layout fundamentals

Until January 2010, the task of user interface layout was an easy task (ha ha). The only issue was portrait vs. landscape orientation on the iPhone. Since 2008, when the iOS SDK was released, Xcode and Interface Builder provided a way to use layout “constraints” (and scrolling views) to handle these situations.

Then, the iPad was introduced, and its larger screen. Up next, in September 2012, with the release of iPhone 5 and its larger screen, changed this task for iPhone apps. Since then, chaos. (Ha ha.)

The current approach is Auto Layout. Before continuing, read/skim these sections of the Auto Layout Guide:

Understanding Auto Layout

Working with Constraints in Interface Builder

Simple Constraints

Debugging Auto Layout

Screen size measurements

Since iOS development began in 2008, developers were (and still are) required to use points, and NOT PIXELS, when considering screen size measurements.

As developers, we need to know a few things about screen sizes. First, the screen origin is the upper-left corner - that’s 0 x and 0 y.

While other sources (here, here) are more complete, the essential need-to-know is that the screen size for a few iPhone models in portrait orientation are shown below:

Model	Diagonal size (marketing/product info)	Points size	Pixel resolution	PPI density
7 or 8	4.7 inch	320 points horizontal x 568 points vertical	Don’t care	Don’t care
7 Plus or 8 Plus	5.5 inch	414 x 736	”	”
X or XS	5.8 inch	375 x 812	”	”
XR	6.1 inch	414 x 896	”	”
XS Max	6.5 inch	414 x 896	”	”

The bottom line is that we’re typically working with a reasonably narrow range of values, but we still must adapt our user interfaces.

The following sections cover two specific layout tasks. To be an effective iOS developer, you must learn these and additional techniques for your apps. A warning, it’s not easy, but the task does get easier with practice and learning.

Other screen info and guides

On typical (e.g. iPhone 8 and larger) screens, there is a default left and right margin of 20 points.

On smaller screens, the margin is 16 points. This fact alone will help reveal the benefits of using these layout techniques, because the margin used will match the device.

When working with the storyboard, on the Edit > Canvas menu, you can choose to show a number of visual helpers. Check a few of them out, as they will help as you learn and practice these layout techniques.

Side-by-side views

The following will be demonstrated by the professor, in class. The idea is that you will be able to do the same on your own.

Scenario:

image view beside a map view
equal widths
constant-size gap between

How to:

drag image view, size accordingly
set height to a constant value
drag map view, align its top edge to match the image view, size accordingly
set height to a constant value
set width to use the default gap

Then:

select both
add new constraints
choose Equal Widths, and save, red lines (angry)
Resolve Auto Layout Issues, in the top Selected Views area, choose Add Missing Constraints
the constraint lines all turn blue

Width of labels and text fields

The following will be demonstrated by the professor, in class. The idea is that you will be able to do the same on your own.

Scenario:

two or more labels and/or text fields
to be positioned to fill the screen width (within margins)
constant size vertical gap

How to:

drag a few labels anywhere (or one, then copy-paste)
drag a few text fields anywhere (ditto)
select all, set to a consistent font size (e.g. 24)
select all, then align left, red lines (angry)
move all to left margin, adjust each to match right margin
Resolve Auto Layout Issues, in the top Selected Views area, choose Add Missing Constraints
the constraint lines all turns blue

Next…

These exercises are the bare minimum to get started.

As noted above, layout done right isn’t easy, but the task does get easier with practice and learning.