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!! :-)

Answer 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!

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

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