1430242728 ios split 2 4086

Simpo PDF Merge and Split Unregistered Version -

Chapter

7

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.

305

j


306 Merge and Split Unregistered Version -
Simpo PDF
CHAPTER 7: Mastering Table Views with Storyboarding: Designing the Flow

Configuring the Master Scene

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.


CHAPTER 7: Mastering Table Views with Storyboarding: Designing the Flow

Simpo PDF Merge and Split Unregistered Version -

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.

307


308 Merge and Split Unregistered Version -
Simpo PDF
CHAPTER 7: Mastering Table Views with Storyboarding: Designing the Flow

3. Select the Utilities View and click the Size Inspector. Enter 50
for the Row Height attribute as shown in Figure 7-3 and press
Enter.

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.


CHAPTER 7: Mastering Table Views with Storyboarding: Designing the Flow

Simpo PDF Merge and Split Unregistered Version -

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.

309


Simpo PDF Merge and Split Unregistered Version -


Simpo PDF Merge and Split Unregistered Version -