How do you make an UIPickerView component wrap around?

Question

I would like to show a set of consecutive numbers in a UIPickerView component but have it wrap around like the seconds component of the Clock->Timer application. The only behavior I can enable looks like the hours component of the Timer application, where you can scroll in only one direction.

Answer 1

It's just as easy to set the number of rows to a large number, and make it start at a high value, there's little chance that the user will ever scroll the wheel for a very long time -- And even then, the worse that will happen is that they'll hit the bottom.

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    // Near-infinite number of rows.
    return NSIntegerMax;
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    // Row n is same as row (n modulo numberItems).
    return [NSString stringWithFormat:@"%d", row % numberItems];
}

- (void)viewDidLoad {
    [super viewDidLoad];

    self.pickerView = [[[UIPickerView alloc] initWithFrame:CGRectZero] autorelease];
    // ...set pickerView properties... Look at Apple's UICatalog sample code for a good example.
    // Set current row to a large value (adjusted to current value if needed).
    [pickerView selectRow:currentValue+100000 inComponent:0 animated:NO];
    [self.view addSubview:pickerView];
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    NSInteger actualRow = row % numberItems;
    // ...
}

Answer 2

I found my answer here:

http://forums.macrumors.com/showthread.php?p=6120638&highlight=UIPickerView#post6120638

When it asks for the title of a row, give it: Code:

return [rows objectAtIndex:(row % [rows count])];

When it says the user didSelectRow:inComponent:, use something like this:

Code:

//we want the selection to always be in the SECOND set (so that it looks like it has stuff before and after)
if (row < [rows count] || row >= (2 * [rows count]) ) {
    row = row % [rows count];
    row += [rows count];
    [pickerView selectRow:row inComponent:component animated:NO];
}

It appears that the UIPickerView does not support wrapping around natively, but you can fool it by inserting more sets of data to be displayed and when the picker stops, centering the component to the middle of the data set.

Answer 3

Just create an array multiple times, so that you have your numbers multiple times. Lets say when want to have the numbers from 0 to 23 and put that in an array. that we will do 10 times like this...

NSString *stdStepper;

    for (int j = 0; j<10; j++) {
        for(int i=0; i<24; i++)
        {
            stdStepper = [NSString stringWithFormat:@"%d", i];

            [_hoursArray addObject:stdStepper];

        }
    }

later we set the row 0 selected like this

[_hoursPickerView selectRow:120 inComponent:0 animated:NO];

Answer 4

All the answers are not really making picker view scroll cyclically.

I have made a cyclic tableView based on UIScrollView. And based on this tableView, I re-implement UIPickerView. You might be interested in this DLPickerView. And this picker view has all the features that UIPickerView has, but also gives many new features, and custom this picker view is much easier.

https://github.com/danleechina/DLPickerView

And be aware of that this DLPickerView cyclically scroll is really scrolling cyclically. All the magic happened because of another class DLTableView.