How would I set up a UIPickerView?

Question

I am setting up a UIPickerView to have choices like choice a, choice b, choice c and so on. I have tried to interpret the sample code from Apple but that seems very difficult to understand for a beginner like me. I also would like the choices from the picker view to take me to another page if that is possible.

Solution 1

It's obvious for every beginner that it is some what tedious to understand these things the first time.

Anyways, do you know how to use UITableViews? Do you know how to use UITableViewDelegate and UITableViewDataSource? If your answer is yes, then just imagine UIPickerViews are like UITableViews (but remember they are not UITableViewControllers).

Let's say, I've a UIPickerView:

UIPickerView *objPickerView = [UIPickerView new];  // You need to set frame or other properties and add to your view...you can either use XIB code...

1) First you need to assign the delegate and dataSource to the UIPickerView either via IB or code. It depends on your implementation (So this step looks very similar to a UITableView, doesn't it?)

Like this:

objPickerView.delegate = self; // Also, can be done from IB, if you're using
objPickerView.dataSource = self;// Also, can be done from IB, if you're using

2) Next, you need to define number of sections, like this:

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)thePickerView {
     return 1;  // Or return whatever as you intend
}

2) Then you need to define the number of rows you need:

- (NSInteger)pickerView:(UIPickerView *)thePickerView 
numberOfRowsInComponent:(NSInteger)component {
     return 3;//Or, return as suitable for you...normally we use array for dynamic
}

3) Then, define title for row (And if you have multiple section, then title for each section):

- (NSString *)pickerView:(UIPickerView *)thePickerView 
             titleForRow:(NSInteger)row forComponent:(NSInteger)component {
     return [NSString stringWithFormat:@"Choice-%d",row];//Or, your suitable title; like Choice-a, etc.
}

4) Next, you need to get the event when someone clicks on an element (As you want to navigate to other controller/screen):

- (void)pickerView:(UIPickerView *)thePickerView 
      didSelectRow:(NSInteger)row 
       inComponent:(NSInteger)component {

//Here, like the table view you can get the each section of each row if you've multiple sections
     NSLog(@"Selected Color: %@. Index of selected color: %i", 
     [arrayColors objectAtIndex:row], row);

     //Now, if you want to navigate then;
     // Say, OtherViewController is the controller, where you want to navigate:
     OtherViewController *objOtherViewController = [OtherViewController new];
     [self.navigationController pushViewController:objOtherViewController animated:YES];

}

That's all the implementation you need.

Solution 2

I'll briefly explain how to achieve that programmatically

- (void)viewDidLoad {
    [super viewDidLoad];

    UIPickerView * picker = [UIPickerView new];
    picker.delegate = self;
    picker.dataSource = self;
    picker.showsSelectionIndicator = YES;
    [self.view addSubview:picker];
}

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

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

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    NSString * title = nil;
    switch(row) {
            case 0:
                title = @"a";
                break;
            case 1:
                title = @"b";
                break;
            case 2:
                title = @"c";
                break;
    }
    return title;
}

Basically in the viewDidLoad we are creating and adding a UIPickerView to the view, telling it that our controller serves both as delegate and dataSource (You can do this in Interface Builder too)

Then we are implementing two data source methods in order to tell how many components and how many rows per components the pickerView has, respectively numberOfComponentsinPickerView: and pickerView:numberOfRowsInComponent:

Finally we are implementing the delegate method pickerView:titleForRow:forComponent: that returns the content of every line.

If you want to customize the behavior when a row has been selected you can implement the delegate method pickerView:didSelectRow:inComponent: which - as the name suggests - is called every time a row is selected.

Solution 3

A UIPickerView use a parten similar to the one use for a UITableView. DataSource and Delegate protocol.

The DataSource methods are used to tell the picker how many 'columns' and how many 'rows' there are in your picker.
While the Delegate methods are for the rest, height of rows, width of columns, views or title to display and a call back when the picker got moved.
UIPickerView

Comments

[Patrick Bassut]

Don't forget to set the frame.

[Joshua Schlichting]

As someone who is new to Objective C, I have no idea what IB is when referred to: // Also, can be done from IB, if you're using