YouTip

Using Pickers

A picker is a scrollable view used to select values from a list of items.

Important Properties

• delegate
• dataSource

Important Methods

• (void)reloadAllComponents

• (void)reloadComponent:(NSInteger)component

• (NSInteger)selectedRowInComponent:(NSInteger)component

• (void)selectRow:(NSInteger)row inComponent:(NSInteger)component animated:(BOOL)animated

Modify ViewController.h

We will add a text field, a picker view and an array.

We will adopt the protocols UITextFieldDelegate, UIPickerViewDataSource, UIPickerViewDelegate. The ViewController.h file code is as follows:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UITextFieldDelegate,UIPickerViewDataSource,UIPickerViewDelegate>
{
    UITextField *myTextField;
    UIPickerView *myPickerView;
    NSArray *pickerArray;
}
@end

Add Custom Method addPickerView

-(void)addPickerView
{
    pickerArray = [initWithObjects:@"Chess", @"Cricket",
                   @"Football",@"Tennis",@"Volleyball", nil];
    
    myTextField = [initWithFrame:
                   CGRectMake(10, 100, 300, 30)];
    myTextField.borderStyle = UITextBorderStyleRoundedRect;
    myTextField.textAlignment = UITextAlignmentCenter;
    myTextField.delegate = self;
    [self.view addSubview:myTextField];
    [myTextField setPlaceholder:@"Pick a Sport"];
    
    myPickerView = [init];
    myPickerView.dataSource = self;
    myPickerView.delegate = self;
    myPickerView.showsSelectionIndicator = YES;
    
    UIBarButtonItem *doneButton = [
                                   initWithTitle:@"Done"
                                   style:UIBarButtonItemStyleDone
                                   target:self
                                   action:@selector(done:)];
    
    UIToolbar *toolBar = [initWithFrame:
                          CGRectMake(0, self.view.frame.size.height-
                                    myPickerView.frame.size.height-50, 320, 50)];
    [toolBar setBarStyle:UIBarStyleBlackOpaque];
    NSArray *toolbarItems = [NSArray arrayWithObjects:
                             doneButton, nil];
    [toolBar setItems:toolbarItems];
    
    myTextField.inputView = myPickerView;
    myTextField.inputAccessoryView = toolBar;
}

Implement the delegates as follows:

#pragma mark - Text field delegates
-(void)textFieldDidBeginEditing:(UITextField *)textField
{
    if ([textField.text isEqualToString:@""]) {
        [self dateChanged:nil];
    }
}

#pragma mark - Picker View Data source
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

-(NSInteger)pickerView:(UIPickerView *)pickerView
             numberOfRowsInComponent:(NSInteger)component
{
    return ;
}

#pragma mark- Picker View Delegate
-(void)pickerView:(UIPickerView *)pickerView
         didSelectRow: (NSInteger)row
          inComponent:(NSInteger)component
{
    [myTextField setText:[pickerArray objectAtIndex:row]];
}

- (NSString *)pickerView:(UIPickerView *)pickerView
                 titleForRow: (NSInteger)row
                forComponent:(NSInteger)component
{
    return [pickerArray objectAtIndex:row];
}

Modify viewDidLoad in ViewController.m as follows:

- (void)viewDidLoad {
    ;
    ;
}

Output

Now when we run this application we will see the following output:

The text picker view is shown below, where we can select the value we need: