Customise the appearance of UIPickerView

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…

5 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;
    }

  2. hi, i have a mutable array like this: NSMutableArray arrbanderas = [[NSMutableArray alloc] initWithObjects:@”af.png”, @”al.png”, nil];

    and i want to do the same. I don´t understand this: pickerImageView.image = [self selectTherapyImageFor:therapyTypes[row]];

    because i don´t know what is selectTherapyImageFor. Please help me.

    1. Don’t get confused. This method, in my case, returns a UIImage according the NSString parameter that I pass. Something like:

      – (UIImage *)selectTherapyImageFor:(NSString *)therapyType
      {
      if ([therapyType isEqualToString:@”Treatments”]) {
      return [UIImage imageNamed:@”therapyViewTreatments”];
      } else if ([therapyType isEqualToString:@”Primary Vaccination”] ) {
      return [UIImage imageNamed:@”therapyViewPrimaryVac”];
      } else if ([therapyType isEqualToString:@”Revaccination”] ) {
      return [UIImage imageNamed:@”therapyViewReVac”];
      } else {
      return [UIImage imageNamed:@”therapyViewVermifugation”];
      }
      }

Leave a Reply

Your email address will not be published. Required fields are marked *