pickerview for iphone that looks like country select feature

Question

I want to create a picker that looks and works like the country select field of itune store account. Here is what I am talking about.

http://i38.tinypic.com/5p0w91.jpg

This picker doesn't have a row highlighted. It has "correct" sign marked in front of selected row. user can scroll this picker and then select the row so "correct" sign will appear in front of newly selected row. Can someone please help?

Answer 1

I'm not familiar with coding apps, but for a browser-based UI (Safari), you would just use a simple drop-down menu:

<select>
<option>Country 1</option>
<option>Country 2</option>
...
<option>Country N</option>
</select>

Guessing whatever is the equivalent in the iPhone SDK should work the same.

Answer 2

This can be accomplished relatively easily using a picker with custom component views. Use an instance variable to keep track of your selected row, and change the color of your label accordingly. If you wanted to include the check mark, you'd need to go a step further and use a custom subclass of UIView rather than a simple UILabel.

@interface ViewContainingPicker
{
    NSUInteger mySelectedRow;
}
@end

@implementation ViewContainingPicker

// Init, Picker setup, etc
- (UIPickerView *)myPickerView
{
    // Create picker, set mySelectedRow to NSNotFound
    mySelectedRow = NSNotFound;
    return myPickerView;
}

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    UILabel *label = (UILabel *)view;

    if (nil == label) {
        UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(0, 0, PICKER_WIDTH, PICKER_ROW_HEIGHT)] autorelease];
    }

    label.text = @"Label for this row";

    // Selected Row will be blue
    if (row == mySelectedRow) {
        label.textColor = [UIColor blueColor];
    } else {
        label.textColor = [UIColor blackColor];
    }

    return label;
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    // Just set selected component and reload, color will change in dataSource pickerView:viewForRow:forComponent:reusingView:
    mySelectedRow = row;
    [pickerView reloadComponent:component];
}