Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

Picker Views

The UIPickerView class allows users to “spin” a wheel-type control to select one or more values. Each picker view consists of one or more components consisting of one or more rows. Each component can be spun independently of the others. For example, the picker view can be used to select a date value with three components in the control, representing the month, day, and year circle-a.jpg.

The number of components and rows in a picker view is determined by its datasource, an object that adopts the UIPickerViewDataSource protocol. The display and selection of the picker view content is handled by the delegate, which adopts the UIPickerViewDelegate protocol (the datasource and the delegate can be the same object).

To create a simple picker view:

  1. Add the protocol declarations to your interface definition:
    @interface UITestViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>
  2. Create a picker view, and add it to the main view (Code Listing 4.19):
    CGRect pickerFrame = CGRectMake(0,120,0,0);
    UIPickerView *myPicker = [[UIPickerView alloc] initWithFrame:pickerFrame];
    myPicker.dataSource = self;
    myPicker.delegate = self;
    [self.view addSubview:myPicker];

    Picker views are always 320 pixels by 216 pixels in size and cannot be resized.

  3. The showsSelectionIndicator property creates a translucent bar across the control to indicate the selected row.
  4. At a minimum, you need to implement two data source methods.

    numberOfComponentsInPickerView: returns the number of segments or components in the picker view. In this example, you want a single component, so return the value 1.

    pickerView:numberOfRowsInComponent: returns the number of rows for each component. Again, ignore the component parameter (since you have only a single component), and return the number of rows.


    Code Listing 4.19 A bare-bones picker view implementation.

  5. Implement the delegate pickerView: titleForRow:forComponent: method, returning an NSString representation of the current row circle-b.jpg:
    return [NSString stringWithFormat: @"Row %i",row];

The picker view can display much more interesting data than this simple example. Components can be of different widths and, rather than just simple text, can actually have entire views embedded within them circle-c.jpg.

To enhance the picker view:

  1. After calling the initComp1 and initComp2 methods to create some sample data, update the numberOfComponentsInPickerView: method to return two components (one for each of the sample arrays). Also, update the pickerView:numberof RowsInComponent: method to return the size of each array:
    if (component == 0)
      return [comp1 count];
      return [comp2 count];

    The arrays here contain different numbers of elements; in other words, components do not need the same number of rows.

  2. Define a new delegate method, picker View:widthFormComponent:, and set the widths of the components to different values:
    if (component == 0)
      return 100.0;
      return 200.0;
  3. Implement the pickerView:viewForRow: forComponent:reusingView: delegate, returning either an image view or a label. This method allows you to embed almost any view subclass in a picker view component.
  4. Finally, in the pickerView:didSelectRow: inComponent: delegate, log the selected row and component to the console.

    When you spin the picker view, this method isn’t fired until the scrolling animation ends. Code Listing 4.20 shows the updated code.


Code Listing 4.20 The updated picker view.

  • + Share This
  • 🔖 Save To Your Account