Fixed labels in the selection bar of a UIPickerView

Question

In the clocks application, the timer screen shows a picker (probably a UIPicker in UIDatePickerModeCountDownTimer mode) with some text in the selec

Answer 1

Rather than adding a label within the UIPickerView, just stick it on top of it, as a sibling that overlaps it. The only thing that's problematic is how to get the same font. I don't know how to get that embossed look, but maybe somebody else does, in which case, it's not really a problem at all.

Answer 2

Let's say we want to implement a picker view for selecting distance, there are 2 columns, one for distance, one for unit, which is km. Then we want the second column to be fixed. We can make it through some delegate methods.

- (NSString*)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    if (component == 0) {
        return self.distanceItems[row];
    }
    else {
        return @"km";
    }
}

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

-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    if (component == 0) {
        return [self.distanceItems count];
    }
    else {
    // when it comes to the second column, only one row.
        return 1;
    }
}

Now we have this:

I guess this is the simplest way.

Answer 3

I received an answer that works well in iOS 7 to my question, which is a pretty cool trick.

The idea is to create multiple components, and for those label components, specify that it's a single row. For the embossed look that some people have, you can return NSAttributedStrings with the delegate method:

- (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component

Answer 4

Note that xib editor allows to add child views as well so you can avoid using too much coding and guessing on dimensions.

Answer 5

Horizontally align multiple pickers with no space between them and turn off user interactions for the static columns.

Set a tag on each picker to determine which one is the pickerView in the datasource calls. Static columns will have row counts of one obviously.

This also gives greater control of widths and placement.

Answer 6

There are 2 things you can do:

If each row and component in row is a simple text, than you can simply use the default UIPickerView implementation as is, and in your controller implement the following UIPickerViewDelegate methods :

• - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component to keep track of which row is selected

• and return a different text for the selected row in your implementation of - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component

If you need to have something other than text as the differentiator for the selected row, than you basically need to create your own CustomPickerView that derives from the UIPickerView and then

• First implement the - (void)selectRow:(NSInteger)row inComponent:(NSInteger)component animated:(BOOL)animated and keep track of which row is selected.

• Then implement the - (UIView *)viewForRow:(NSInteger)row forComponent:(NSInteger)component to generate a different view for the selected row.

A sample for using the UIPickerView or implementing custom UIPickerView is available in the SDK, called UICatalog.