Practical Auto Layout: Beginning Auto Layout Techniques for iOS8 (2015)

Chapter 4. Preview Mode

The square story board does not look like any device I'm familiar with. We can see what this will look like on a device by using the simulator, though that requires building and compiling. A faster way during the layout stage is to use the preview mode in the assistant editor.

Click on the assistant editor. At the bottom of the drop down menu that usually shows you will find a Preview selection.

Select the Main.Storyboard and the current view appears for a iPhone 4 inch.

At the bottom of each preview is the name of the device. If you float your cursor over the device name, a small icon for rotation appears.

Click it and the phone rotates. It may be too big for the panel. On a touchpad, pinch to change the scale until you can see the preview

On the lower left side of the preview, there is a + button to add more devices to your preview. Click the + button

A list of possible previews appears. You can select any of these you wish. If you want to see both landscape and portrait at the same time, you can select the same device twice and rotate one.

Usually you'll want an iPhone and iPad preview, since these may be different. As we'll learn more in the next sections on size classes, you can customize for each size class and orientation. It becomes handy to see every change you make.

If you make a mistake, the preview pane gets too busy, or need to get rid of a preview device for any other reason, click on the name of the device to select it, then press the Delete key on your keyboard to remove the device.

Localization in Preview

For those using localization, on the bottom right you will find a button you can use to preview in the different localization languages. Click the default language, nd a list of languages appear. One interesting selection for testing is the Double Length Pseudo-language, which doubles all your test to give you an idea how a interface will look with a language that uses a lot of characters.

With these basics, you can layout most user interfaces. There are more features and ways to use auto layout. We'll cover some of those in the next sections.