Workshop 5: Preview The App’s Layout in The Assistant Editor

In this workshop you will learn how to use Xcode Assistant editor to quickly preview the application’s layout on different devices. Before you be begin I assume the following:

  • You installed Xcode 6 on your Mac
  • You created an iOS project called Swift Variable; if not then read Workshop 2

In the olden days, you had to run the iOS application you are working on in the iOS Simulator to see what the application’s layout looked like on an iOS device. In Xcode 6, you don’t have to do that. You can use Xcode’s Assistant editor to preview the application’s layout on the iPhone 3 device, the iPhone 4 device, and the iPad device. Here’s how to do it.

01 Click the Main.storyboard file to launch it in IB and hide the Utility panel.

02 Show the Assistant editor.

03 Click the Assistant pop-up menu. It is the first item to the right of the back and forward arrows in the assistant editor jump bar.

xcode6-assistant-menu

04 In the pop-up menu, scroll to the Preview item and choose the Main.storyboard file.

xcode6-preview-layout-step1

05 A preview of the app’s view appear in the Assistant editor.

xcode6-preview-layout-step2

06 Click the Add (+) button in the lower left corner of the Assistant editor and select the iPhone 3.5 inch devices in the preview layout pop-up menu.

07 Repeat step 6 to select the iPad device.

08 Now, hide the Navigator panel and adjust the zoom level of the preview to toggle between 100% and 50% by double-clicking the Assistant editor’s background. Your screen will now look like this:

xcode6-preview-layout-step3

09 To switch the layout between landscape and portrait view, move the cursor over a previewed device and click the the Orientation Layout button.

xcode6-orientation-button

To delete a previewed device, select it and press the delete button on your keyboard. That’s pretty much how you use Xcode Assistant editor to quickly preview the application’s layout on different devices.