IPhone SDK: TabBars

Step 1: Read the Hello World tutorial

If you are are unfamiliar with developing in Objective C and IPhone SDK please take a moment to go through the earlier tutorial IPhone SDK Hello World. It also contains instructio ns on how to install XCode and the IPhone SDK.

Step 2: Create a project

Select File > New Project or Apple Key + Shft + N to bring up the new project menu. Select the Applications item of the IPhone OS section from the menu on the left, and select Window Based Application from the icons on the right. When prompted enter a project name, I have used TabBar in the sample code. You should have two files TabBarAppDelegate.h and TabBarAppDelegate.m.

Step 3: Create the View Controllers

We are going to create two tabs and we need a view controller for each one. Hence Create two files of type UIViewController SubClass. I named the files View1Controller.m and View2Controller.m Make sure you check the box to also create the header file.

Now You should have Six files in your project:
TabBarAppDelegate.m
TabBarAppDelegate.h
View1Controller.m
View1Controller.h
View2Controller.m
View3Controller.h

Step 4: Setup the View Controllers

View1Controller

First we will setup the view containing the Button and Text Field. Browse to the View1Controller.h header file and add the following interface elements, UITextField, UIButton, UIView and also add a reference to the Application delegate which will be used to communincate between views. We also create properties for each of the variables we have defined. The final code should look something like this:

1    #import <UIKit/UIKit.h>
2    #import "TabBarAppDelegate.h"

@class TabBarAppDelegate;
2    @interface View1Controller : UIViewController
3    {
4        UITextField                *textField;
5        UIButton                    *cmdButton;
6        UIView                       *myView;
7        TabBarAppDelegate  *delegateRef;
8    }
9    
10   @property (nonatomic, assign)    UITextField                  *textField;
11   @property (nonatomic, assign)    UIButton                      *cmdButton;
12   @property (nonatomic, assign)    UIView                        *myView;
13   @property (nonatomic, assign)  TabBarAppDelegate   *delegateRef;
14
15   @end

In the View1Controller.m file synthesize the properties and write and init method to create the user interface elements. Technically this should be in the load view method but since I am allowing one view to directly access another I need them to be initlized even if they are not loaded. The proper way to do this is to store data seperately and pull it when the view is loaded but i want to keep this tutorial simple.

1    - (id)init
2    {
3        if (self = [super init])
4        {
5            // Initialization code
6            self.title = @"Text and Button"; //Set View title which will be displayed in Tab Bar
7            // create and configure the view
8            CGRect cgRct = CGRectMake(0.0, 0.0, 480, 320); //define size and position of view
9            myView = [[UIView alloc] initWithFrame:cgRct]; //initilize the view    
10          myView.autoresizesSubviews = YES;              //allow it to tweak size of elements in view
11          self.view = myView;                            //set view property ov controller to the newly created view
12       
13          // create a UIButton (UIButtonTypeRoundedRect)
14          cmdButton = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];    
15          cmdButton.frame = CGRectMake(100, 100, 100, 50);
16          [cmdButton setTitle:@"Click Me" forState:UIControlStateNormal];
17          cmdButton.backgroundColor = [UIColor clearColor];
18          [cmdButton addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside];
19          cmdButton.adjustsImageWhenHighlighted = YES;
20      
21          //create a text field
22          cgRct = CGRectMake(60, 170, 200, 50); //define size and position of textbox
23          textField = [[UITextField alloc] initWithFrame:cgRct];
24          textField.text = @"Enter Text Here";
25          textField.borderStyle = UITextBorderStyleBezel;
26       
27          //Add text field and button to main view
28          [self.view addSubview:cmdButton];
29          [self.view addSubview:textField];
30      }
31      return self;
32   }

Also we need to add an action handler to take care of the button click. Add the following method to View1Controller.m. Note that view are accessing the label using the view controller that we reference using the AppDelegate instance pointed to by the delegateRef property. 

1    - (void)action:(id)sender
2    {
3        [self.textField resignFirstResponder]; //Hide Keyboard
4        self.delegateRef.view2Controller.label.text = self.textField.text;//Ubdate label
5    }

View2Controller

On tot he second view controller, we do not keep an app delegate instance here because this view does not need to initiate any interaction with the first view. If this were not the case then we would also keep a reference here

1    #import <UIKit/UIKit.h>

2    @interface View2Controller : UIViewController
3    {
4        UILabel    *label;
5        UIView    *myView;
6    }
7
8    @property (nonatomic, assign)     UILabel    *label;
9    @property (nonatomic, assign)    UIView      *myView;
10
11   @end


In the View2Controller.m file synthesize the properties and write and init method to create the user interface elements.

Step 5: Setting Up the App Delegate

In the TabBarAppDelegate.h header file we define instances of the UITabBarController as well as the two views we have just setup. We create properties for these variables an also declare he relevent classes and import the relevent header files. The final code should look something like this: