Change UIPickerView background

Question

I want to change the border color of a UIPickerView. I do not see a tint property for the UIPickerView. Is there any way this could be done? Or a workaround?

Thanks.

Answer 1

My UIPickerView has 3 components. And no Selection Indicator.

This gives it 11 subviews. [[picker subviews] count]

Hiding the first and the last subview totally removes the background.

[(UIView*)[[picker subviews] objectAtIndex:0] setHidden:YES];
[(UIView*)[[picker subviews] objectAtIndex:10] setHidden:YES];

Hiding every third other subview (indexes 1, 4 and 7) hides the opaque background on the components. Giving quite a nice effect that I can skin as I desire.

Hope that helps someone :)

Answer 2

You can change background color by completely replacing the background image with one of your choice using IXPickerOverlayView available on GitHub (the repo contains an illustrated example of using this class).

Note that you'll have to draw out the (rectangular) background yourself from scratch but unlike any of the workarounds mentioned here this approach is fully dynamic: the control will look correctly even if you change the number of picker wheels and their sizes in runtime (like UIDatePicker does when you change your system locale setting).

Once you have your background image, using IXPickerOverlayView is as simple as adding a IXPickerOverlayView instance on top of your Picker view and assigning hostPickerView property.

Answer 3

You could also mask the component. With a bit fiddeling you can get the size of the component and cut it out with following code:

CALayer* mask = [[CALayer alloc] init];
        [mask setBackgroundColor: [UIColor blackColor].CGColor];
        [mask setFrame:  CGRectMake(10.0f, 10.0f, 260.0f, 196.0f)];
        [mask setCornerRadius: 5.0f];
        [picker.layer setMask: mask];
        [mask release];

Don't forget

#import <QuartzCore/QuartzCore.h>