UIPickerView – spinning multiple components

xcode UIPickerView   spinning multiple components

I found an interesting issues with the iPhone SDK and the UIPickerView

The didSelectRow method gets called after a users selects a new value on a picker wheel. The method knows what wheel (component) was spun and the index of the newly selected value. This works great for a picker with a single wheel. My picker had 5 wheels in it.

If I spun two components of the picker at the same time. I would only get one call to the didSelectRow method. More specifically, if I spin one component and move another component no call was received until the first component stops spinning, and so the second component move is never registered.

Long story short, I didn’t catch this problem when I submitted my app, “Ka-Ching”, to the iTunes store. As a result of not catching this, Apple rejected my app. I could argue that the iPhone SDK should have so programmatic hooks that would only allow one component to be spun at a time, or even a method to return the state of all of components in the picker.

uipickerview UIPickerView   spinning multiple components

Trying to figure out a solution to the problem I expanded on my idea of recording the state of all the components in the picker when the didSelectRow method was called. Realistically, by the time that didSelectRow gets processed it is possible that all 5 of the components had changed.

Looking through the SDK documentation for the UIPickerView I came across this:

- (NSInteger)selectedRowInComponent:(NSInteger)component

With this method you can determine the selected row index for any of the components in your picker. you don’t have to rely on the values passed into the didSelectRow method.

The wrong way to do it

- (void)pickerView:(UIPickerView *)thePickerView
 didSelectRow:(NSInteger)row
 inComponent:(NSInteger)component
{
	//get the value of the component that was changed
	if(component == 0)
	{
        	currency_value = [currency objectAtIndex:row];
	}
	else if(component == 1)
	{
        	hundereds_value = [hundereds objectAtIndex:row];
 
	}
	else if(component == 2)
	{
        	tens_value = [tens objectAtIndex:row];
	}
 
	else if(component == 3)
	{
        	ones_value = [ones objectAtIndex:row];
	}
 
	else if(component == 4)
	{
        	change_value = [cents objectAtIndex:row];
	}
 
	//some code here to save the values
 
}

The right way to do it

- (void)pickerView:(UIPickerView *)thePickerView
 didSelectRow:(NSInteger)row
 inComponent:(NSInteger)component
{
 
	//get the values
	NSInteger currency_NewRow = [thePickerView selectedRowInComponent:0];
	NSInteger hundereds_NewRow = [thePickerView selectedRowInComponent:1];
	NSInteger tens_NewRow = [thePickerView selectedRowInComponent:2];
	NSInteger ones_NewRow = [thePickerView selectedRowInComponent:3];
	NSInteger cents_NewRow = [thePickerView selectedRowInComponent:4];
 
	//some code to save the values 
 
}

22 Comments

  1. Straight Edgers are violent people. All I ever hear about them, is how they pick fights, and hurt people. Why would anyone want to be associated with such a group.

  2. This seems to work to get the initial values of all the components when you spin one component. But what if you spin another component before the first one stopps moving? Now you have a different value stored in a variable than what is displayed in the picker. Any thought on how to resolve this?

  3. Ahh I should have clarified I meant for dependent components. If component 1 is dependent on component 0 and I spin both. Component 1 stops spinning first and didselectrow gets called for it. If I grab the value for component 0 its value is going to change when it stops spinning and since didselectrow only gets called once the values don’t get refreshed. So now I am holding a value that is different than what my picker displays. any thoughts?

  4. Hi Josh,

    That’s a great tutorial. I ran into the same problem, making a circular (looping) picker with five components, and it also took me a while to notice it. Your tutorial was easy to follow and has helped me remove the problem. Thanks very much!

  5. Having just broken into the realm of iPhone apps and dealing with picker views instead of the usual drop down menu I found myself quite baffled by retrieving the correct values when multiple components are present. Your little tutorial here is just what I needed. I especially love the “WRONG WAY” versus “RIGHT WAY” bit.

  6. Hi Josh,

    Thanks for the heads up. I have not yet submitted my app to the app store and had not considered spinning both components.

    -Tom

  7. Nice post mate. I just discovered the same issue while using MonoTouch, good to have confirmation that it’s a ‘quirk’ of the SDK and nothing in-between.

  8. Thank you very much for the tutorial. I had the same problem and your tutorial solved the problem plus saved me hours!

  9. Hi Josh, Your solution works perfectly with devices running iOS 6 but I just noticed that my iPad with iOS 5.0.1 would not respond correctly when multiple wheels are spinning. It acts just like no changes has been made to the code. Any explanation?
    Thanks.

  10. Hi Josh,

    Here is my code to grab the picker values:

    – (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
    {
    formselected = [NSString stringWithFormat: @”%@ %@”, [formFamily objectAtIndex:[pickerView selectedRowInComponent:0]],[formsList objectAtIndex:[pickerView selectedRowInComponent:1]]];
    mylabel.text= formselected;
    }

    I’m getting Semantic Warnings…local declartion of ‘pickerView’ hides instance variable. Any advice?

    Thank you.

  11. Thanks Josh.

    Finally something head up. I am now able to fetch the relevant datas with ease.

    well, how can i add image to UIPickerView in different components.

Leave a Comment.