In workshop 5 you learned how to use Xcode Preview assistant editor to preview the layout of the application’s user interface on the iPhone 3 and 4 device, and the iPad device. In this workshop you will learn how to resolve layout issues that show up in the Assistant editor window.
Take a look at the image shown in Figure 1 below. The left side of the image shows the Standard editor window. The right side of the image shows the Standard editor window. The generic layout of the application’s user interface is shown in the Standard editor window. Previews of the application’s user interface layout is shown in Assistant editor window. Here are the problems the Assistant editor previews are showing:
- The Text View object (aka control) is cut off in the iPhone 3.5-inch and 4-inch device previews
- The button object isn’t shown in the iPhone 3.5-inch device preview
- The Text View object doesn’t extend to the right edge of the preview
Above problems are known as auto layout issues. To fix them, you’ll have to add missing constraints for the generic layout shown in the Standard editor window, which is on the left side of Figure 1 below.
 |
| Figure 1: Preview of the app user interface |
Here are the steps to fix above mentioned auto layout issues.
1. Click the storyboard scene’s View Controller icon in the Standard editor window. Its the first one shown in the scene’s title bar.
2. In the Xcode’s Editor menu, select Resolve Auto Layout Issues | Add Missing Constraints. Next, look at the previews in the Assistant Editor window. Figure A below shows what it should look like now. As you can see, all three auto layout issues are resolved.
 |
 |
| Figure A: iPhone and iPad previews in portrait orientation | Figure B: iPhone and iPad previews in landscape orientation |
Use the Orientation Layout button
to preview the app’s user interface in landscape mode for the iPhone devices and the iPad device. The Assistant editor window should look like Figure B above.