7

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?

Sample UIPickerView Image

Thanks in advance!! :-)

RajeshKumar R
  • 15,445
  • 2
  • 38
  • 70
Nina
  • 1,579
  • 2
  • 21
  • 51

4 Answers4

9

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!

TheTiger
  • 13,264
  • 3
  • 57
  • 82
  • 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 Jul 12 '12 at 12:55
  • Any clue why it is happening like this? – Nina Jul 12 '12 at 13:15
  • 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 ? – TheTiger Jul 12 '12 at 13:17
  • 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!! :-| – Nina Jul 12 '12 at 13:37
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13790/discussion-between-vakul-saini-and-nina) – TheTiger Jul 12 '12 at 14:01
  • 1
    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. – Axeva Jan 28 '13 at 21:01
  • 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. – huong Jan 07 '14 at 04:52
  • @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]);`. – TheTiger Jan 09 '14 at 04:35
7

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.

Marcel Wolterbeek
  • 3,367
  • 36
  • 48
1

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.

0

Have a look at these. Might not be what exactly what you want, but might help too :)

Vaibhav Tekam
  • 2,344
  • 3
  • 18
  • 27
  • 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!! – Nina Jul 12 '12 at 11:41
  • http://stackoverflow.com/questions/5744996/customizing-uipickerview-background-and-spacing – Vaibhav Tekam Jul 12 '12 at 12:14