Customizing UIPickerView (background and spacing)

Question

I would like to change the white background in a UIPickerView to an image of my own.

Is this possible?

Also, I have managed to get my UIPickerView to scroll

Answer 1

I just figured out how to apply background color or image in the picker view. Hope it may help someone.

Just define a category in the file where you want to you picker view as follow:

@implementation UIPickerView(Extension)

-(void)drawRect:(CGRect)rect
{

    NSArray* subviews = [self subviews];
    for(UIView* view in subviews)
    {
        if([view isKindOfClass:[UITableView class]])
        {
            view.backgroundColor = appColor;
        }
    }
    [super drawRect:rect];
}

@end

You can look further at subviews for more customization.

Answer 2

Hi There is no direct way to change the background. What you can do is to have the view you return in viewForRow feature its own background (then add the shadow in each side afterwards if you need it). You can also go looking for viewWithTag: but that is never a good idea as this might change in future iOS releases.

Is there a special reason you implement both viewForRow and TitleForRow? I usually just populate the viewForRow's labels inside this delegate method.

The viewForRow has the ability to reuse the views in the Picker, much like a UITableView you should test if the "reusingView:(UIView *)view" is nil and if not there is no need to draw everything again. Just populate the labels.

I usually never customize the picker, if I need something not completely custom I subclass the UITableView, it is much more flexible and can what the Picker does + more.

For the spacing you can use the "height" of the rows, the picker will center the views you return in viewForRow, then just make sure:

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component

returns a value bigger than your view.

Held og lykke;)

Answer 3

How about adding an empty view on the right of your labels? And for the background you should probably use insertSubview:aboveView: method with the default background view as the second parameter (if you can access to it).

Answer 4

Looks like this is an old thread, but in iOS 7 (Possibly earlier, I'm not sure), UIPickerViews have a background color property, so setting the background color is simple:

[pickerView setBackgroundColor:[UIColor whiteColor]];

Setting a background image is similarly simple thanks to [UIColor colorWithPatternImage:]. (Note that the pattern will tile if the image is smaller than the UIPickerView.)

[pickerView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"someBackgroundImage.png"]]];

To modify the component widths you can implement the delegate method widthForComponent in order to set various widths for each component. In theory, you should be able to add an empty component and use it's blank width to create spacing, but I haven't tried this.

- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component;

I haven't been able to find a way to change the padding between components which seems like a nicer way to modify the spacing and would also allows you to remove the ~5 px spacing between components, but if I'm able to find one I will update my answer.