Customizing UIPickerView (background and spacing)

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 horizontally instead of vertical. Now, I would like to know if there is any way to adjust the spacing between two rows of the picker view?

I have attached an image to show what I mean.

This is my code:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    arrayDays = [[NSMutableArray alloc] init];
    [arrayDays addObject:@"ONSDAG"];
    [arrayDays addObject:@"TORSDAG"];
    [arrayDays addObject:@"FREDAG"];
    [arrayDays addObject:@"LØRDAG"];

    arrayDates = [[NSMutableArray alloc] init];
    [arrayDates addObject:@"29. JUNI"];
    [arrayDates addObject:@"30. JUNI"];
    [arrayDates addObject:@"1. JULI"];
    [arrayDates addObject:@"2. JULI"];

    pickerViewDay = [[UIPickerView alloc] initWithFrame:CGRectZero];
    [pickerViewDay setDelegate:self];
    [pickerViewDay setShowsSelectionIndicator:NO];
    CGAffineTransform rotate = CGAffineTransformMakeRotation(-M_PI/2);
    rotate = CGAffineTransformScale(rotate, 0.25, 2.0);
    [pickerViewDay setTransform:rotate];
    [pickerViewDay setCenter:CGPointMake(self.view.frame.size.width/2, (pickerViewDay.frame.size.height/2)-3)];
    [self.view addSubview:pickerViewDay];

    // Adding selection indicator to pickerview
    UIImage *selectorImage = [UIImage imageNamed:@"DayPickerView_SelectionIndicator.png"];
    UIView *customSelector = [[UIImageView alloc] initWithImage:selectorImage];
    [customSelector setFrame:CGRectMake(0, 0, 120, 74)];
    [customSelector setCenter:CGPointMake(self.view.frame.size.width/2, customSelector.frame.size.height/2)];
    [self.view addSubview:customSelector];
    [customSelector release];

    // Adding background to pickerview
    UIImage *backgroundImage = [UIImage imageNamed:@"DayPickerView_Background.png"];
    UIView *custombackground = [[UIImageView alloc] initWithImage:backgroundImage];
    [custombackground setFrame:CGRectMake(0, 0, 320, 74)];
    // [self.view addSubview:custombackground];
    [custombackground release];
}

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)vie开发者_StackOverfloww {
    UIView *viewRow = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 150, 80)];

    CGAffineTransform rotate = CGAffineTransformMakeRotation(3.14/2);
    rotate = CGAffineTransformScale(rotate, 0.25, 2.0);

    // Date
    CGRect rectDate = CGRectMake(30, 0, 150, 80);
    UILabel *date = [[UILabel alloc]initWithFrame:rectDate];
    [date setTransform:rotate];
    [date setText:[arrayDates objectAtIndex:row]];
    [date setFont:[UIFont fontWithName:@"Arial-BoldMT" size:37.0]];
    [date setShadowColor:[UIColor whiteColor]];
    [date setShadowOffset:CGSizeMake(0, -1)];
    [date setTextAlignment:UITextAlignmentCenter];
    [date setBackgroundColor:[UIColor clearColor]];
    [date setClipsToBounds:YES];
    [viewRow addSubview:date];

    // Day
    CGRect rectDay = CGRectMake(-30, 0, 150, 80);
    UILabel *day = [[UILabel alloc]initWithFrame:rectDay];
    [day setTransform:rotate];
    [day setText:[arrayDays objectAtIndex:row]];
    [day setFont:[UIFont fontWithName:@"Arial-BoldMT" size:21.0]];
    [day setTextColor:[UIColor colorWithRed:0.35 green:0.35 blue:0.35 alpha:1]];
    [day setTextAlignment:UITextAlignmentCenter];
    [day setBackgroundColor:[UIColor clearColor]];
    [day setClipsToBounds:YES];
    [viewRow addSubview:day];

    return viewRow;
}

- (NSString *)pickerView:(UIPickerView *)thePickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    return [arrayDays objectAtIndex:row];
}

- (NSInteger)pickerView:(UIPickerView *)thePickerView numberOfRowsInComponent:(NSInteger)component {
    return [arrayDays count];
}

EDIT 1

For RickiG (on background):

EDIT 2

For RickiG:

---

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

---

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.

---

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.

---

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