MikeTeo.net

A Software Technologist's Blog (Wanna Email Me?)

Simple iPhone Tutorial (Part 2)

August 31, 2008 By miketeo

In Part 1, we have created a tutorial project, initialized the main screen with 2 tabs, and have attached a custom table view for the first tab. In Part 2, we are going to add a custom form view for the second tab.

5. Adding Child View For Second Tab

The second tab view will be a form-based view. If you are familiar with Visual Basic, you may have “played” around with the VIsual Basic controls by dragging-dropping the controls on the forms and position them according to your needs.

In XCode, create new file called SecondTabViewController using the UIViewController template. We will add 3 UILabel variables.

SecondTabViewController.h

SecondTabViewController.m

Now, create a xib file called SecondTabView using the View template.

Open the SecondTabView.xib file through Interface Builder. Drag and drop a Navigation Bar Drag and drop 3 Label (it’s under Library > Cocoa Touch Plugin > Input & Values) to the View object. You can create some names for these labels–I’m using Section 0 Label 0, Section 0 Label 1 and Section 1 Label 0 so that they match closely to the variable names that we are going to connect to in SecondTabViewController class later on. These names are only for reference within the Interface Builder and do not affect your XCode.

I have added another 2 more labels to indicate the section “headers”. Your second tab view will look something like the screenshot below (click to enlarge).

Now, to link up all the objects in the Interface Builder.

  1. Open up the Identity Inspector. Click on File’s Owner and set Class Identity to SecondTabViewController.
  2. Connect the New Referencing Outlet in View object to the view outlet in File’s Owner.
  3. For each of the named labels (Section 0 Label 0, etc), connect the New Referencing Outlet in each label to their corresponding outlet in File’s Owner. For example, Section 0 Label 0 connects to section0label0.

After your have done the above connections, the black window for File’s Owner should look something like the following:

Now, we will add in SecondTabViewController class to MikeTeoTutorialAppDelegate.

MikeTeoTutorialAppDelegate.h

MikeTeoTutorialAppDelegate.m

app3

Build and run. You will see that both tabs are working and the second tab’s view contains the labels that you have created (click to enlarge).

6. Generating Custom Table Cells

The table view in the first tab is uninterested as it only displays static information. Most iPhone applications are interactive. We shall customize our own table cells to create on/off switch controls and a slider control.

In your XCode, create a new file called OnOffTableCell from the UITableViewCell template. Add in a UILabel variable and a UISwitch variable. Within the OnOffTableCell implementation, we initialize these two variables and hard-coded their position relative to the cell boundary.

OnOffTableCell.h

OnOffTableCell.m

onofftablecell2

Now, we can create another new file called SliderTableCell from the UITableViewCell template. This class will only have an UISlider control in the cell.

SliderTableCell.h

SliderTableCell.m

slidetablecell2

Once the table cell classes have been defined, we shall proceed to use these two classes for our table in the first tab view. Import both the OnOffTableCell.h and SliderTableCell.h into the FirstTabViewController.m like this:

Modify the (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath method in FirstTabViewController.m to return OnOffTableCell instance for section 0 (first section) and SliderTableCell instance for section 1 (second section).

Build and run. Your first tab view will now look this:

As an additional “candy”, open the FirstTabView.xib in your Interface Builder. Open the Attribute Inspector (Tools >Attribute Inspector). Click on the Table View object. You should see Table View style being set to Indexed. Change this to Grouped and save.

Rebuild your application. You will see that the table view in the first tab now looks like this:

So far, we have successfully attached two views to a tab control view and use custom table cells to encapsulate a slider and an on/off switch control in the first tab’s table view. In the next part, we will programmatically add action handlers to the UISlider and UISwitch controls that have been used in the custom table cells to capture user interactions, and to send their values to the UILabels that have been connected in the second tab view.

  1. Tutorial for iPhone programming « JongAm’s blog Said,

    […] http://miketeo.net/wp/index.php/2008/08/31/simple-iphone-tutorial-part-2.html […]

  2. Elia Said,

    Good tutorial. A lot clearer here than in Apple’s example code. Just noting that you did not include releases for onOffSwitch, title, and slider in your OnOffTableCell and SliderTableCell dealloc methods. I am assuming this was an oversight…

  3. miketeo Said,

    @elia: I’ve overlooked the missing releases. The sources have been updated. Thanks for pointing these out.

  4. Pat Said,

    Your source code image for OnOffTableCell.m is wrong. You are displaying the app delegate code. I went ahead and downloaded your source to see what it is. But the page probably needs to be updated to reflect the correct code.

  5. Ellen Said,

    Thank you for the tutorial; it was very helpful, as I was having a lot of trouble getting my first screen to work with anything other than a static interface builder page when following the UITabControllerView tutorials, but you solved my problem. I have another one though (sort of a follow-on related problem) …

    As with your example, I initially had navigation bars that I put in the screens with Interface Builder with static headings, as you described, but was unable to interact with them so removed them and added them programmatically. As described in several sources including Apple’s, the Navigation controller is constructed using initWithRootViewController:, passing in the view controller for the initial screen. I then modified my app delegate to add the views of the navigation controller as subviews of the tab controller viewController views (instead of the original UIView screens.) The problem I am having with that, however, is that there is a white row between the status bar and the navigation bar on all the pages, which looks equivalent to the height of the status bar. Do you know how I can correct this, or alternately (and preferably, probably), how do you interact with the Navigation Bars added to the screens as you did, with Interface Builder?

    Thanks again for your great articles!

  6. miketeo Said,

    @Ellen: It’s hard for me to pinpoint your issue. My hunch is that it could be that your navigation controller views may have been “created” with a navigation bar item in the Interface Builder.

  7. Ellen Said,

    I created the navigation controllers programmatically from root view controllers of views created in the Interface Builder.

    I found the answer to removing the gap with the nav bars created the way I did it though:
    http://justingallagher.com/post/75183205/quick-tip-remove-gap-between-iphone-status-bar-and. He suggests to do this:
    [viewController.view setFrame: [viewController.view bounds]];

    I did this to the tab bar controller and it removed the gap.

  8. Ellen Strnod Said,

    A change to my post above: I noticed later that doing this to the tab bar controller just moved the gap to below the tab bar buttons! Doing it on the navigation bar controllers removed the gap entirely.

  9. Yiting Said,

    Hi, I will like to ask is it possible to create a table with columns for the iphone native application?

  10. miketeo Said,

    @Yiting:
    If you are thinking about html-style of tables, AFAIK there is no API that can directly give you this feature. You may want to look at subclassing UITableViewCell to “draw” your own columns.

  11. James Burton Said,

    FYI, you have a bad image reference here … looking at the paths I can see that http://miketeo.net/wp/wp-content/uploads/2008/08/slidetablecell2.jpg is supposed to be http://miketeo.net/wp/wp-content/uploads/2008/08/slidertablecell2.jpg (e.g. slide -> slider).

Add A Comment