1430242728 ios split 2 4086

A basic Navigation Controller is connected to a Master View Controller that segues to a Detail View Controller as shown in Figure 7-1.. Double-click the title Master on the header of the

305

7 Chapter

Mastering Table Views with Storyboarding:

Designing the Flow

You’ve finished setting up the foundation for the bookManager Master-Detail Application (in step 1 of 3, Chapter 6) and are ready to move on to step 2 of the app in this chapter You’ve brought in all the images and the info about the books and set up the SQLite database Cool! Well, if you think that was cool, wait until you see what we have in store for you as we lay out the entire app’s workflow in the Storyboard Here in Chapter 7 you’ll be routing and connecting elements with such ease it will amaze you -particularly if you ever tried that sans Storyboard

Step 2: Storyboarding the App

Okay -let’s go

Figure 7-1 Open the Storyboard

1 Now that you’ve set up your data model, you can start designing your interface Open the Storyboard You will immediately see that Xcode has already created a basic hierarchy of the Master-Detail Application for you A basic Navigation Controller is connected to a Master View Controller that segues to a Detail View Controller as shown in Figure 7-1

You’ll be using this template to fulfill your requirements

Figure 7-2 Rename the title to My Library

2 Double-click the title Master on the header of the Master View Controller, rename it My Library, and then click once on the prototype cell to select it as shown in Figure 7-2

Figure 7-3 Change the Row Height of the cell to 50

Figure 7-4 Select the Table View

4 The scene you’re working on is going to be the first view in your app In this case, it will let the user choose between the two top hierarchies of your library: Books and Authors So, you know exactly how many cells you’re going to display in your Table View: two cells That makes it a great candidate for being a Static T able View -a wonderful new feature only available with Storyboarding that allows you to lay out the content of your Table View statically in Storyboard, display it at the runtime, and even transition to other views when user selects a cell, all without writing any code at all! Let’s convert the Table View to static format: select the Table View by clicking below the prototype cell as shown in Figure 7-4

Figure 7-5 Change the Table View Content type

5 Select the Attributes Inspector and change the Content type from Dynamic Prototypes to Static Cells You’ll see three identical cells appear as shown in Figure 7-5

NOTE: Dynamic Table Views display dynamic content, and in that case Table View is

a large (and sometimes unbounded) number of rows Dynamic Table Views use reusable Dynamic Cell Prototypes to display quite large data sets very efficiently

Static Table Views are basically “what you see is what you get.” With static content, the number of rows in a Table View is a known and fixed number, so you can design all rows in the Interface Builder Note that Static Table Views can only be created using Storyboards and must be controlled by a Table View Controller subclass