Customise the appearance of UIPickerView

This content has 11 years. Please, read this page keeping its age in your mind.

Sometimes we left the UIPickerView in plain vanilla design without attempting to customise it.

It’s easy and it gives a whole different feeling if you had already change the appearance of view controllers.

For the beginning – lets say that we want to change the font,
We have to use a UIPickerViewDelegate method like:

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view

and more precisely:

 - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
 {

 UILabel *pickerViewLabel = (id)view;

 if (!pickerViewLabel) {
 pickerViewLabel= [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 0.0f, [pickerView rowSizeForComponent:component].width - 10.0f, [pickerView rowSizeForComponent:component].height)];
 }

 pickerViewLabel.backgroundColor = [UIColor clearColor];
 pickerViewLabel.text = therapyTypes[row]; // where therapyTypes[row] is a specific example from my code
 pickerViewLabel.font = [UIFont fontWithName:@"ChalkboardSE-Regular" size:20];

 return pickerViewLabel;
 }

And after that we get the usual picker view with different font.

What if we want to add an image in front of every label like the following screenshot:

customise UIPickerView
customise UIPickerView

then we have to modify the above code like:

 - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
 {
     UIView *pickerCustomView = (id)view;
     UILabel *pickerViewLabel;
     UIImageView *pickerImageView;

     if (!pickerCustomView) {
         pickerCustomView= [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f,
                                                                    [pickerView rowSizeForComponent:component].width - 10.0f, [pickerView rowSizeForComponent:component].height)];
         pickerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 35.0f, 35.0f)];
         pickerViewLabel= [[UILabel alloc] initWithFrame:CGRectMake(37.0f, -5.0f,
                                                                    [pickerView rowSizeForComponent:component].width - 10.0f, [pickerView rowSizeForComponent:component].height)];
         // the values for x and y are specific for my example
         [pickerCustomView addSubview:pickerImageView];
         [pickerCustomView addSubview:pickerViewLabel];
     }

     pickerImageView.image = [self selectTherapyImageFor:therapyTypes[row]];
     pickerViewLabel.backgroundColor = [UIColor clearColor];
     pickerViewLabel.text = therapyTypes[row]; // where therapyTypes[row] is a specific example from my code
     pickerViewLabel.font = [UIFont fontWithName:@"ChalkboardSE-Regular" size:20];

     return pickerCustomView;
 }

Easy and beautiful…

2 thoughts on “Customise the appearance of UIPickerView

  1. hy thank you for your code.
    i need to change in this way for working with an array of data (i used 2 labels)

    UIView *pickerCustomView;
    UILabel *pickerViewLabel;
    UILabel *pickerViewLabel2;

    if (!pickerCustomView) {
    pickerCustomView= [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f,[pickerView rowSizeForComponent:component].width-20, [pickerView rowSizeForComponent:component].height)];
    pickerViewLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 13.0f, 100.0f, 20.0f)];
    pickerViewLabel2= [[UILabel alloc] initWithFrame:CGRectMake(100.0f, 13.0f,100.0f, 20.0f)];
    // the values for x and y are specific for my example
    [pickerCustomView addSubview:pickerViewLabel];
    [pickerCustomView addSubview:pickerViewLabel2];
    } else {
    pickerCustomView = view;
    }

Comments are closed.