UIPickerView – spinning multiple components

by Josh Highland on September 17, 2009

grey 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.

grey 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… read them below or add one }

1 Mike October 16, 2009 at 11:41 am

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 Josh Highland October 16, 2009 at 11:45 am

Obviously your comment has nothing to do with the content of this post and more to do with the life style I live. If you want more information on straight edge, I have a post about that on this site also. please read this http://joshhighland.com/blog/randomness/sxe-manifesto/

3 dtjm October 27, 2009 at 12:51 am

Thanks for posting this. I ran into the same problem.

4 Wyeth November 23, 2009 at 2:23 pm

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?

5 Josh Highland November 23, 2009 at 6:27 pm

@Wyeth, thats what the “The right way to do it” code fixes. It gets the value of the components after the last wheel has stopped spinning.

6 Wyeth November 24, 2009 at 12:16 pm

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?

7 Edward January 15, 2010 at 4:49 pm

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!

8 GKauten Consulting March 26, 2010 at 2:52 pm

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.

9 Tuyen Nguyen September 9, 2010 at 4:36 pm

Great tutorial!

10 Tom Longbotham October 31, 2010 at 8:40 pm

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

11 Joe Cruso January 30, 2011 at 10:12 am

Where did you get your variables from?

12 Josh Highland February 3, 2011 at 12:23 am

The values of the variable were passed in to the class by a another class before the view was added to the navigation stack

13 Kassem July 29, 2011 at 5:29 am

Great man, thanks :)

14 Alan August 1, 2011 at 11:18 pm

Josh,

Thanks for the tutorial and easy to understand. Great work for the wrong way and right way.

15 Chris L September 3, 2011 at 12:07 am

Thanks man. Especially for the wrong vs. right. Very clear.

16 Bill February 8, 2012 at 6:09 pm

This has saved me a tremendous amount of time. Thank You!

17 Chris H April 20, 2012 at 10:04 am

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.

18 clement June 1, 2012 at 2:18 am

Wow this post is great … Thank you very much.

19 DORI October 30, 2012 at 10:48 pm

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

20 DORI October 31, 2012 at 12:09 pm

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.

21 Steve April 24, 2013 at 8:32 am

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.

22 Abdu Yasin May 24, 2013 at 7:02 am

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

Previous post:

Next post: