How to Format the DestinationController View in Your iOS App

By Neal Goldstein, Dave Wilson

After you have the Presentation and the Transition selected in the Attributes inspector, you can get on in your iOS app creation with formatting the Destination Controller view, which will have a Table view, a Label view, and a very spiffy image as well after you follow these steps:

  1. Select the Destination controller in the storyboard Canvas and then drag in a Navigation bar from the Library.

    You’re going to need someplace to put the Cancel button. Place the Navigation bar at the top of the view.

  2. In the Navigation bar on the Canvas, select the Title (field). Still in the Attributes inspector, enter Destinations in the Title field for the selected element (Navigation bar, in this case).

  3. Drag a Bar Button item from the Library and place it on the left side of the Navigation bar on the Canvas.

  4. Choose Cancel from the Identifier drop-down menu in the Bar Button section of the Attributes Inspector.

    You don’t have to select a tint for the button in the Bar Button Tint section of the Attributes inspector. The app-wide tint color will be used for the button.

  5. Drag an Image view from the Library in the Utility area and place it in the Destination controller on the Canvas so that it takes up the entire view.

  6. Control-drag from the Image view in the canvas or the Document Outline to the Top Layout Guide in the Document Outline and select Vertical Spacing.

  7. With the Image view selected, choose Editor→Resolve Auto Layout Issues→Add Missing Constraints.

    If you have any warnings, use Editor→Resolve Auto Layout Issues subcommands to fix them. You may need to use Editor→Resolve Auto Layout Issues→Clear Constraints if you have to start over.

  8. In the Image View section of the Attributes inspector, select DestinationImage from the Image drop-down menu.

    The appropriate image from the asset catalog will be used automatically.

  9. Drag a Label from the Library and add it to the view toward the top of the Image view.

  10. With the Label selected, enter Pick a place in the Text field in the Label section of the Attributes inspector.

  11. Still in the Attributes inspector, change the style to Text Styles – Headline by selecting the Text icon in the Font field (which opens a window in which you can change the font size).

    Adding an image to an app on Xcode.

  12. Select the label and then choose Editor→Size Fit to Content from the Xcode main menu.

    The label will expand to fit the text.

  13. Change the text color to white in the Text Color drop-down menu.

  14. Position the Pick a place label.

    Positioning a label in the screen preview of an app.

    A word of warning: You need to follow the next set of steps exactly. You can get the look you want in other ways, but this is the most straightforward. The Table view won’t be transparent; you’ll fix that in viewDidLoad.

  15. Drag a Table view (not Table View controller) from the Library onto the Image view and position it.

    This is the area in which the Table view will display. If you have more selections than can fit in the visible area, the user will be able to scroll the Table view.

    Dragging a Table onto the image view of an app.

  16. With the Table view selected, scroll down the Attributes inspector to reach the View section and then select Clear Color from the Background drop-down menu.

  17. Still in the Attributes inspector, scroll back up to the Table View section and choose Grouped from the Style menu.

  18. Enter 1 in the Prototype Cells field (or just use the stepper control to get to 1).

    Leave these as prototype cells because you’ll provide the content for the cells programmatically.

  19. Select the prototype Table View Cell, either on the Canvas or in the Document Outline, and then choose Basic from the inspector’s Style menu and enter DestinationCell in the Identifier field.

    You will need to have a reuse identifier.

  20. Still in the Attributes inspector, scroll down to the View section and select Clear Color from the Background drop-down menu.

  21. Select the Table View cell in the Document Outline, open the disclosure triangle, and select the label.

  22. In the Attributes inspector, scroll down and then choose Clear Color from the Background drop-down menu.

  23. Close the Utility area and select the Assistant in the Editor selector.

  24. If the DestinationController.h file doesn’t appear, select it in the Jump bar.

  25. Control-drag from the Table view in Document Outline or on the Canvas to the DestinationController.h Interface. Release the mouse button, and in the dialog that pops up, enter destinationTableView.

  26. Control-drag from the Cancel button in Document Outline or in the Navigation bar on the Canvas to the DestinationController.h Interface. Release the mouse button, and in the dialog that pops up, select Action in the Connection drop-down menu and enter cancel in the Name field.

    Final preview of an app's section.