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

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>

Answer 2

If you just want a workaround, take a screen shot in the simulator, open it in photoshop, crop it to just the UIPickerView area, make the center transparent, apply whatever tint you want, add that image to your project, and add it as a UIImageView on top of the UIPickerView.

Answer 3

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 4

The picker will not have subviews until it is fully loaded. If you try to do this:

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

in the viewDidLoad or viewWillAppear it will not work. However, I moved mine into one of the UIPickerView protocol methods and it removed the background frame.

- (NSString *)pickerView:(UIPickerView *)thePickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    if (self.pickerBackgroundNotHidden)
    {
        self.pickerBackgroundNotHidden = false;
        [(UIView*)[[tempPicker subviews] objectAtIndex:0] setHidden:YES];
        [(UIView*)[[tempPicker subviews] objectAtIndex:7] setHidden:YES];
        [(UIView*)[[tempPicker subviews] objectAtIndex:8] setHidden:YES];
    }
    return [arrayColors objectAtIndex:row];
}

You could probably subclass the picker to do this a little more efficiently, but I prefer to avoid subclassing.

Oh, also, this is probably obvious, but if your picker doesn't have any items in it, the code above will not delete the sub views.

Answer 5

Here is a modern, pixel-perfect version w/ ARC of @Lukas 's answer, because some questions never go out of style:

#import <QuartzCore/QuartzCore.h>

// . . .

CALayer* mask = [[CALayer alloc] init];
         mask.backgroundColor = [UIColor blackColor].CGColor;
         mask.frame = CGRectInset(picker.bounds, 10.0f, 10.0f);
         mask.cornerRadius = 5.0f;
         picker.layer.mask = mask;

This answer works for ANY size of picker b/c the layer dimensions are calculated on-the-fly.

                                                                 

Answer 6

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 7

Actualy to correct you, you actualy can put a .png ontop of the UIPickerview and still use the Picker View, just make sure the middle is transparent or you won't see the rows.

Answer 8

Simply add this line to one of your UIPickerView methods:

[[[MyPicker subviews] objectAtIndex:4] setBackgroundColor: [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"image.png"]]];

Answer 9

You can do the following:

set the picker view background colour by wizard or by code as follow:

Picker1.backgroundColor = [UIColor someColor];// clearColor for transparent

Set alpha value for the picker view subviews numbered 0, 1 and 3. (Don't know why there is subview 2 thought). Do it by code after the first load data for the picker view as follow (it will throw an exception if you do this in the DidViewLoad).

[(UIView*)[[Picker1 subviews] objectAtIndex:0] setAlpha:someValue];// 0.0f for transparent
[(UIView*)[[Picker1 subviews] objectAtIndex:1] setAlpha:someValue];
[(UIView*)[[Picker1 subviews] objectAtIndex:3] setAlpha:someValue];

Don't forget to clear background color for the label you are sending to the picker view in the viewForRow method.

lbl.backgroundColor = [UIColor someColor];// could be clearColor