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

Answer 2

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 3

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 4

Simply add this line to one of your UIPickerView methods:

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

Answer 5

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 6

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.