How to Customize Your iOS App Table View for the iPad

In an iOS app template, the table view itself is assigned to both the data source and the delegate properties. This means that all of the Table view functionality is embodied in the Table view class. However, having the ability to assign other classes to the delegate or the data source property opens up the opportunity for you to share the functionality among several objects.

You will find a number of cases in the Cocoa frameworks where an object’s functionality is provided by itself as well as by other objects that may from time to time be the same as the primary object.

If you’re using the Table view only as a type of table of contents for your app, selecting Static Cells lets you create the cell content in Interface Builder and use storyboard segues to specify what happens when a user selects a cell.

The following steps show you how to customize your Table view:

1

Select Table View in the Document Outline in the Master View Controller – Master Scene.

The Document Outline can be very useful.

2

Using the Inspector selector, open the Attributes inspector in the Utility area, select Grouped from the inspector’s Style drop-down menu, and then enter 3 in the Sections field.

Note that Table views come in two basic styles:

Plain: The default style is called plain and looks really unadorned — plain vanilla. It’s a list: just one darn thing after another. You can index it, though, just as the Table view in the Contacts app is indexed, so it can be a pretty powerful tool.

Grouped: The other style is the grouped Table view; unsurprisingly, it allows you to lump entries together into various categories.

3

Open the disclosure triangle next to Table View in the Document outline, check out the Table View sections under it, and select the first section.

The Attributes inspector refreshes to show the attributes of the first Table View section.

4

Change the Rows field in the Attributes inspector to 2 (or delete one of the cells) and enter At my Destination in the Header field.

Select the second section and, after the Attributes inspector refreshes, change the Rows field in the Attributes inspector to 2, and enter Getting Around in the Header field.

Select the third section and, after the Attributes inspector refreshes, change the Rows field in the Attributes inspector to 2, and enter Planning my Trip in the Header field.

5

Open the first Table View.

Select the first Table View Cell.

6

Still in the Attributes inspector, choose Basic from the Style menu.

The Style menu provides a number of options for how the cell is formatted. Each one formats the text in the cell a little differently in the label(s) it adds to the cell to display the text. (Or you can leave it as Custom, drag in a label(s), and format the label any way you want.)

When you select Basic, a disclosure triangle gets added next to first Table View Cell in the Document Outline in the Master View Controller – Master Scene. If you open it, you see that a single label has been added for you.

7

Select the Label in the Document outline.

The Attributes inspector displays the Label properties — including the text, which you can change to your heart’s content.

If you want, you can change the font style by selecting the Font icon. However, remember that the content of your app should be the centerpiece, so using standard fonts and styles for things such as labels is usually a good idea. Set the text for the label to Weather.

8

Finally, select White Color from the Label section’s Color drop-down menu.

Yes, it is in fact the case that you won’t be able to see the text very well.

9

Repeat Steps 7–10 to format the next two cells, this time entering Events and Map, respectively, in the Text field in the Attributes inspector.

Events is the second cell in At my Destination, and Map is the first cell in Getting Around. You have to treat the Find cell in Getting Around a little differently. Rather than just adding a title to the Table View Cell, you’re going to add a label and input text field inside the table view cell.

Start by leaving the cell type as Custom in the Style menu. Continue with the steps that follow.

10

Drag a label from the Library pane onto the cell.

As you work, you may notice that Xcode places a Content View object inside the Table View Cell; your new objects such as the label are placed inside the Content View automatically.

11

With the label selected, go to the Attributes inspector and enter Find: in the Text field and set the Label and Table View Cell text to White Color, as you did in Steps 9–11.

It should look like this.

12

Drag a Text Field from the Library pane onto the cell and position it.

At the top of the Text Field section of the Attributes inspector, enter Enter address or place in the Placeholder field to help the user understand what this text field is for.

13

In the Attributes inspector, select the first Border Style (No Border) in the Text Field section.

The text field will seem to disappear, but you can always select it again in the Document outline.

14

Using the appropriate drop-down menus, set the background to Clear Color and the text to White Color.

Resize and reshape the text field as desired.

15

Repeat Steps 7–10 to format the next two cells, this time entering Destination and Test Drive, respectively, in the Text field in the Attributes inspector.

Pay particular attention to the document outline at the left to make certain that you have all of the pieces in place.

16

If you remove the code breakpoint, and then click the Run button for the iPad version, you would see this screen.

Clicking or tapping in a cell doesn’t get you anything yet, but it soon will.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com