iPhone Tutorial | iPhone iOS4 iPad SDK Development & Programming Blog » Picker Component http://www.edumobile.org/iphone Wed, 25 Jan 2012 09:42:29 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Display Datepicker SingleComponentpicker and Doublecomponentpicker with each of the tabbar in iPhone http://www.edumobile.org/iphone/iphone-programming-tutorials/display-datepicker-singlecomponentpicker-and-doublecomponentpicker-with-each-of-the-tabbar-in-iphone/ http://www.edumobile.org/iphone/iphone-programming-tutorials/display-datepicker-singlecomponentpicker-and-doublecomponentpicker-with-each-of-the-tabbar-in-iphone/#comments Wed, 17 Mar 2010 14:50:55 +0000 Sushant http://edumobile.org/iphone/?p=1338 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:

@interface FirstViewController : UIViewController
<UIPickerViewDataSource , UIPickerViewDelegate>{
  IBOutlet UIDatePicker *datePicker;
}
  @property (nonatomic , retain) UIDatePicker *datePicker;
  -(IBAction)buttonPressed;

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:

-(IBAction)buttonPressed{
  NSDate *selected = [datePicker date];
  NSString *message = [[NSString alloc] initWithFormat:@"The date and time is %@",selected];
  UIAlertView *alert = [[UIAlertView alloc]
  initWithTitle:@"Date and Time selected" message:message delegate:nil   cancelButtonTitle:@"YES" otherButtonTitles:nil];

  [alert show];
  [alert release];
  [message release];

}

  - (void)viewDidLoad {
  [super viewDidLoad];
  NSDate *now = [[NSDate alloc] init];
  [datePicker setDate:now animated:YES];
  [now release];

}

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:

@interface SingleComponentPickerViewController : UIViewController
  <UIPickerViewDataSource , UIPickerViewDelegate>
 {
   IBOutlet UIPickerView *singlePicker;
   NSArray *pickerData;
}
  @property(nonatomic , retain) UIPickerView *singlePicker;
  @property(nonatomic , retain) NSArray *pickerData;

  -(IBAction)buttonPressed1;

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:

-(IBAction)buttonPressed1
  {
    NSInteger row = [singlePicker selectedRowInComponent:0];
    NSString *selected = [pickerData objectAtIndex:row];
    NSString *title = [[NSString alloc] initWithFormat:
    @"you selected %@!", selected];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title
    message : @"Thank you for choosing."
    delegate:nil
    cancelButtonTitle :@"Welcome"
    otherButtonTitles :nil];
    [alert show];
    [alert release];
    [title release];
}

  - (void)viewDidLoad {
    NSArray *array = [[NSArray alloc]     initWithObjects:@"iPhone",@"iPad",@"iPod",@"iMac",@"Mac",
   @"iBook",@"Safari",nil];
    self.pickerData = array;
    [array release];
    [super viewDidLoad];
}

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:

#define kFillingComponent  0
   #define kBreadComponent  1

  @interface DoubleComponentPickerViewController : UIViewController
  {
   IBOutlet UIPickerView *doublePicker;
   NSArray *fillingTypes;
   NSArray *breadTypes;
}

  @property (nonatomic,retain)  UIPickerView *doublePicker;
  @property (nonatomic,retain)  NSArray *fillingTypes;
  @property (nonatomic,retain)  NSArray *breadTypes;

  -(IBAction)buttonPressed2;

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:

-(IBAction)buttonPressed2
  {
   NSInteger breadRow = [doublePicker selectedRowInComponent:
   kBreadComponent];
   NSInteger fillingRow = [doublePicker selectedRowInComponent:
   kFillingComponent];
   NSString *bread = [breadTypes objectAtIndex:breadRow];
   NSString *filling = [fillingTypes objectAtIndex:fillingRow];

   NSString *message = [[NSString alloc] initWithFormat:
   @"Your %@ on %@ bread will be right up.",filling, bread];

   UIAlertView *alert =[[UIAlertView alloc] initWithTitle:@"Thank you for   your order" message:message delegate:nil cancelButtonTitle:@"Great!"   otherButtonTitles:nil];
   [alert show];
   [alert release];
   [message release];
}

 - (void)viewDidLoad {
  NSArray *breadArray = [[NSArray alloc] initWithObjects:
  @"White",@"Whole Wheat",@"Rye",@"Sourdough",@"Seven Grain", nil];
  self.breadTypes = breadArray;
  [breadArray release];

  NSArray *fillingArray = [[NSArray alloc] initWithObjects:
  @"Chicken",@" Butter",@"Mutton",@"Salad",@"Beef",
  @"Vegetable",nil];
  self.fillingTypes = fillingArray;
  [fillingArray release];
  [super viewDidLoad];
}

 -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
 {
   return 2;
}

  -(NSInteger)pickerView:(UIPickerView *)pickerView
  numberOfRowsInComponent:(NSInteger)component
 {
   if (component == kBreadComponent)
   return[self.breadTypes count];
   return[self.fillingTypes count];
}

  -(NSString *)pickerView:(UIPickerView *)pickerView
  titleForRow:(NSInteger)row
  forComponent:(NSInteger)component
 {
   if (component == kBreadComponent)
   return [self. breadTypes objectAtIndex:row];
   return [self.fillingTypes objectAtIndex:row];
 }

Step 16: Now compile and run the application.

You can downloaded SourceCode from here TabBarWithPicker 2

]]> http://www.edumobile.org/iphone/iphone-programming-tutorials/display-datepicker-singlecomponentpicker-and-doublecomponentpicker-with-each-of-the-tabbar-in-iphone/feed/ 0