CP469 Lesson 07 A: View hierarchy

Creating a new view

Every additional view requires two additions:

• a code file (for @IBActions and @IBOutlets, etc.), and
• a corresponding storyboard object.

Adding a code file

To add a code file, select the appropriate file folder and right-click. Then,

• select New File > Cocoa Touch Class
• choose UIViewController from the subclass of drop-down menu¹⁾This is the second item.
• qualify the default name which is provided appropriately²⁾The name should be representative of the function of the new view.—it’s a type, so remember to capitalize!
• click Create.

Adding the storyboard object.

Open the storyboard, then

• expand the object library by clicking the plus-sign in the top right of the storyboard pane, then search for and drag a view controller object to the storyboard
• click the left-most icon above the view controller in the storyboard³⁾It reads View Controller, surprisingly enough!
• access the identity inspector and select the name you provided earlier from the Class drop-down menu.

The view object on the storyboard and the associated code are now linked.

Linking parent and child views

The new child view is at this point inaccessible; some mechanism must be provided to link it to its parent.

For example,

• create a button on the parent view and provide suitable constraints in the usual way
• control-drag from the button to the new view to open the segue menu
• choose Show; an arrow will now appear showing the hierarchical relationship between the views
• with the new view selected, make whatever changes are desired in the Attributes Inspector.⁴⁾For example, changing the background colour or whatever.

At this point, one can segue from the top-level view to the subordinate view by clicking the button.

Adding navigational control

Of course, one typically would like to return to the parent view as well.

Iterative return

Here’s the conceptually simple way to do this:

• select the parent view, then
• from the Xcode menu, choose Editor > Embed in > Navigation Controller to add a higher level controller to the storyboard.⁵⁾The relationship is again indicated by an arrow.

If we now run the code, a Back navigation option will appear at the top of the subordinate view whenever it is active. Clicking it will dismiss the child view and return to the parent without taking any other action.

Return via unwinding

Thus far, we can descend through the hierarchy and return iteratively, step by step. However, one might like to go straight back to some earlier point in the view stack, skipping the intermediate views. This is known as unwinding.

To do this, we must implement a special action in the superordinate target view in question. In that view controller’s code, we add

@IBAction func someFunctionName( unwindSegue: UIStoryboardSegue )
{
    // No code is actually needed here.
}

where someFunctionName should be properly descriptive.⁶⁾In other words, it should be clear which view it belongs to, e.g., unwindFromXYZView or the like, so that it is easy to select; see how this is done below.

Then,

• create some means of triggering an action—by means of a button, for example—in the view from which we wish to return
• control-drag from it to the right-most icon (the Exit icon) above that view in the storyboard
• a list of return points will become available in the menu corresponding to the unwind function(s) we have available
• select the one corresponding to the desired return point.

That’s it!!

User-defined menu buttons

The procedure described above relies upon standard back button navigation. One can also create one’s own buttons.

To do this, one can embed a view a navigation controller as described above. This makes it the top level of a new (subordinate) hierarchy without any back button.

From the library, one can then add bar buttons to the menu bar which can then be named as desired and linked to actions in the usual way.