Display Datepicker SingleComponentpicker And Doublecomponentpicker With Each Of The Tabbar In iPhone

We will see how to display Datepicker, SingleComponent picker and Doublecomponent picker using the Tab Bar controller.

Step 1: Create aTab bar Application using template . Name the project  “TabBarWithPicker”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: Expand classes and notice Interface Builder created the FirstViewController class for you. Expand Resources and notice the template generated a separate nib, SecondView.xib, for the TabBarWithPicker.

Step 4: Now we’ll add UIViewController class to the project. Choose New file -> Select cocoa touch classes group and then select UIViewController . Give the name of the class SingleComponentPickerViewController. Create one more UIViewController class file and corresponding .xib file ,give the name DoubleComponentPickerViewController.

Step 5: In the FirstViewController.h file we added UIDatePicker class that implements an object for multiple rotating wheels to allow users to select date and a method an IBAction. make the following changes:

 

 

 

Step 6: Now double click your MainWindow.xib file and open it to the Interface Builder. Open the TabBar Controller and drag the Tab Bar Item from the library and place it below of the Tab Bar(See the figure below). Now dragDate Picker from the library and place it to the view window, and also drag Round Rect from the library and place it to the below of the Date Picker. Select DatePicker from the tab bar and bring up Connection Inspector and now drag from the datePicker to the picker. Select Round Rect button and bring up Connection Inspector then drag from TouchUpInside to the File’s Owner icon, select buttonPressed: action. Now save the MainWindow.xib file and go back to the Xcode.

Step 7: In the FirstViewController.m make the following changes:

 

 

 

Step 8: Single click the SingleComponentPickerViewController.h file in the classes folder and open it to the Xcode.This controller class will act as a both DataSource and Delegate for its Picker. So we need to implement datasource and delegate protocol. Also need to declare an IBOutlet and an Action .Add the following code in the file:

 

 

 

Step 9: Open the SecondView.xib file in the Interface Builder. Double click your view icon open the view window, first drag the Picker view from the library and place it to the view window (See the figure below). Select the picker and bring up connection inspector, you will see the first two items are Datasource and Delegate. Drag from the circle next to DataSource to File’s Owner.Then drag again from the circle next to Delegate to the File’s Owner. Next drag Round Rect button from the library and place it to the view window and give the title Select. Now select the Select button and bring up connection inspector and drag from the Touch Up Inside to the File’s Owner and select buttonPressed1: action. Save the nib file,close it and go back to the Xcode.

Step 10: Now open the MainWindow.xib file in the Interface Builder. Load the secondView.xib file in the MainWindow.xib . Select the SingleCompoPicker from the tab bar and bring up Attribute inspector change the NIB name into SecondView and bring up Identity Inspector change the class name into SingleComponentPickerViewController. Save the nib file , close it and go back to the Xcode.

Step 11: Open the SingleComponentPickerViewController.m file and make the following changes:

 

 

 

Step 12: Open the DoubleComponentPickerViewController.h, we’ll define here a picker with two components or wheels,each wheel will be independent of the other wheel. Define two constants that will represent the two components. Components are assigned numbers and declare DataSource and Delegate for its Picker. Also need to declare an IBOutlet and an Action .Now make the following changes in the file:

 

 

 

Step 13: Open the DoubleComponentPickerViewController.xib file in the Interface Builder. Double click your view icon open the view window, first drag the Picker view from the library and place it to the view window. Select the picker and bring up connection inspector, you will see the first two items are Datasource and Delegate. Drag from the circle next to DataSource to File’s Owner.Then drag again from the circle next to Delegate to the File’s Owner. Next drag Round Rect button from the library and place it to the view window and give the title Select. Now select the Select button and bring up connection inspector and drag from the Touch Up Inside to the File’s Owner and select buttonPressed2: action. Save the nib file,close it and go back to the Xcode.

Step 14: Now open the MainWindow.xib file in the Interface Builder. Load the DoubleComponentPickerViewController file in the MainWindow.xib . Select the DoubleCompoPicker from the tab bar and bring up Attribute inspector change the NIB name into DoubleComponentPickerViewController and bring up Identity Inspector change the class name into DoubleComponentPickerViewController. Save the nib file , close it and go back to the Xcode.

Step 15: Now make the following changes in the DoubleComponentPickerViewController.m file:

 

 

 

Step 16: Now compile and run the application.

You can downloaded SourceCode from here TabBarWithPicker 2

Leave a Comment: