Customize UIPickerView's Skin with images

Question

I am developing an iPhone application. Where in, I want to have UIPickerView as in the image. Is it possible to change the appearance of UIPickerView like this?! Please guide me to do this!! I am creating it without XIB.

Or is there a way to make UIPickerView skin transparent?

Thanks in advance!! :-)

Solution 1

I dont know this is a correct way or not but you can set your UIPickerView background image ... I have done it once.

See this :-

//Make a view to set as background of UIPickerView
UIView * viewForPickerView = [[UIView alloc]initWithFrame:CGRectMake(0.0, 0.0, 320.0, 216.0)];
[viewForPickerView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"pickerViewBackground.png"]]];

[[[pickerView subviews]objectAtIndex:2] addSubview: viewForPickerView];

//UIPickerView has 8 subviews like, background, rows, container etc.
// hide unnecessary subview

[(UIView*)[[pickerView subviews] objectAtIndex:3] setHidden:YES];
[(UIView*)[[pickerView subviews] objectAtIndex:5] setHidden:YES];
[(UIView*)[[pickerView subviews] objectAtIndex:6] setHidden:YES];
[(UIView*)[[pickerView subviews] objectAtIndex:7] setHidden:YES];
[(UIView*)[[pickerView subviews] objectAtIndex:8] setHidden:YES];

And now add a UILabel just on your UIPickerView's selectionIndicator, and use label as a selectionIndicator. you can manage it in your own way.

Thank you!

Solution 2

The UIPickerView is nothing more than a UIView with one or more UITableViews and background and selector views.

Hiding and adding views to the UIPicker view might break your code in the future when Apple decides to implement it in another way.

It might be a better idea to implement your control with UITableView(s) and your own custom background and selector views.

Some tips to implement the UIPickerView behaviour on the UITableView(s):

• Use the ContentInset to make sure the first/last row is shown in the middle when scrolled to top/bottom.

• On the UITableViewSource implement tableView:didSelectRowAtIndexPath: and call scrollToRowAtIndexPath on the UITableView to show the selected row in the middle.

• On the UITableViewSource implement scrollViewDidEndDecelerating and scrollViewDidEndDragging (where willDecelerate is false). Detect the row closest to the middle, set that row to selected and scroll that row to the middle with selectRowAtIndexPath on the UITableView (or scrollToRowAtIndexPath when the row was already selected).

• In selectRowAtIndexPath and scrollToRowAtIndexPath set atScrollPosition to TOP. This is a little confusing, because the row is shown in the middle, but the ContentInset pushed the top to the middle of the view.

• You can detect the row closest to the middle on the UITableView with the frames of the visibleCells and the contentOffset. The NSIndexPath of the row can be found by applying the same index to indexPathsForVisibleRows.

Solution 3

Unfortunately UIPickerView is not highly customizable, so you might ending up using private headers to modify the appearance (which is not recommended) or using some third-party library that simulates the behavior of UIPickerView but allows customization.

Comments

[Nina]

Thank you for the quick response Vaibhav!! But I don't wanna use anything else other than UIPickerView :-) I know we could do this using ALPickerView :-) I am looking a way to customize UIPickerView!!

[Vaibhav Tekam]

stackoverflow.com/questions/5744996/…

[Nina]

Hmm... Seems like my pickerView has 5 sub components only. Terminating app due to uncaught exception 'NSRangeException', reason: '*** -[__NSArrayM objectAtIndex:]: index 5 beyond bounds [0 .. 4]'

[Nina]

Any clue why it is happening like this?

[TheTiger]

How have you added your pickerView ? above code you have to write just after where you have added pickerView as subVie of self.view...? can you see me the code ?

[Nina]

Before I did it in - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view Method. That showed me the Range Exception Error. I tried those lines below addSubview line. It states now, it has an empty array!! Weird!! :-|

[TheTiger]

let us continue this discussion in chat

[Axeva]

The reason some pickers show 5 subviews and others show 9 is the Selection Indicator. If that has been disabled, the picker will only have 5 subviews. If it's enabled (default), it will have 9.

[huong]

It's just weird that in my case I get index 2 beyond bounds for empty array. P.s: I create my picker view from a nib file.

[TheTiger]

@strawberryjam - It seems your picker has no subviews. Its subviews array is empty. Check your pickerview is properly initialized or not. and then print NSLog(@"%@", [pickerView subviews]);.