自定义UIPickerView(背景和间距)

时间:2011-04-21 13:49:20

标签: iphone sdk background uipickerview

我想将UIPickerView中的白色背景更改为我自己的图像。

这可能吗?

另外,我设法让我的UIPickerView水平滚动而不是垂直滚动。现在,我想知道是否有任何方法可以调整选择器视图的两行之间的间距?

我附上了一张图片来表明我的意思。

这是我的代码:

- (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 *)view {
    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];
}

Example

编辑1

对于RickiG(背景):

@RickiG: Backgrounds are messed up and there are gaps

编辑2

对于RickiG:

@RickiG: Gaps in each side of the pickerview

4 个答案:

答案 0 :(得分:5)

您好 没有直接的方法来改变背景。您可以做的是让您在viewForRow中返回的视图具有自己的背景(如果需要,然后在每一侧添加阴影)。你也可以去寻找viewWithTag:但这绝不是一个好主意,因为这可能会在未来的iOS版本中发生变化。

您是否有特殊原因要同时实现viewForRow和TitleForRow?我通常只在这个委托方法中填充viewForRow的标签。

viewForRow能够重用Picker中的视图,就像UITableView一样,你应该测试“reusingView:(UIView *)视图”是否为零,如果不是,则不需要再次绘制所有内容。只需填充标签。

我通常从不自定义选择器,如果我需要一些不完全自定义的东西我将UITableView子类化,它更灵活,可以选择Picker做的更多。

对于间距,您可以使用行的“高度”,选择器将使您在viewForRow中返回的视图居中,然后确保:

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

返回的值大于您的视图。

Held og lykke;)

答案 1 :(得分:4)

我刚刚想出如何在选择器视图中应用背景颜色或图像。希望它可以帮助别人。

只需在文件中定义您想要选择器视图的类别,如下所示:

@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

您可以进一步了解subviews以获得更多自定义。

答案 2 :(得分:1)

看起来这是一个旧线程,但在iOS 7中(可能更早,我不确定),UIPickerViews有一个背景颜色属性,因此设置背景颜色很简单:

[pickerView setBackgroundColor:[UIColor whiteColor]];

由于[UIColor colorWithPatternImage:],设置背景图像同样简单。 (请注意,如果图像小于UIPickerView,则图案将平铺。)

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

要修改组件宽度,可以实现委托方法widthForComponent,以便为每个组件设置各种宽度。理论上,您应该能够添加一个空组件并使用它的空白宽度来创建间距,但我没有尝试过这个。

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

我一直无法找到改变组件之间填充的方法,这似乎是修改间距的更好方法,并且还允许您删除组件之间的~5 px间距,但如果我能够找到一个我会更新我的答案。

答案 3 :(得分:0)

如何在标签右侧添加空白视图?对于后台,您应该使用insertSubview:aboveView:方法,将默认背景视图作为第二个参数(如果可以访问它)。