Add image icon to a UIPickerView row

Question

I have looked and looked on the net and not found much on this!

I would like to know how you put images in a UIPicker so that each of the rows have a different image.

    #import "ViewController.h"

    @interface ViewController ()

    @end

    @implementation ViewController
    @synthesize pickerContent;

    @synthesize p1;


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

    - (void)didReceiveMemoryWarning
    {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }


    //////////

    - (NSMutableArray *)pickerContent
    {
        if(!pickerContent) {
            pickerContent = [[NSMutableArray alloc] initWithObjects:
                              [UIImage imageNamed:@"one.jpg"],
                              [UIImage imageNamed:@"two.jpg"],
                              [UIImage imageNamed:@"three.jpg"],
                              [UIImage imageNamed:@"four.jpg"],
                              [UIImage imageNamed:@"five.jpg"], nil];
        }
        return pickerContent;
    }


    - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
    {
        if ([pickerView isEqual:p1])
        {
            return 4;
        }

            return 0;

    }
    - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
    {


        if ([pickerView isEqual:p1])
        {
            if (component == R1)return [self.pickerContent count];
            if (component == R2)return [self.pickerContent count];
            if (component == R3)return [self.pickerContent count];
            if (component == R4)return [self.pickerContent count];
        }

        return 0;
    }

    - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
    {
        if ([pickerView isEqual:p1])
        {
            if (component== R1)return [pickerContent objectAtIndex:row];
            if (component== R2)return [pickerContent objectAtIndex:row];
            if (component== R3)return [pickerContent objectAtIndex:row];
            if (component== R4)return [pickerContent objectAtIndex:row];
        }

     return 0;

    }
    @end

Lend

It seems that [this][1] answer can be useful for you.. [1]: https://mcmap.net/q/1469714/-how-insert-an-images-and-text-in-specific-rows-of-an-uipickerview – Polack

Answer 1

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
    UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"your image number %@.png", (long)row]];
    UIImageView *temp = [[UIImageView alloc] initWithImage:img];
    temp.frame = CGRectMake(-70, 10, 60, 40);

    UILabel *channelLabel = [[UILabel alloc] initWithFrame:CGRectMake(50, -5, 80, 60)];
    channelLabel.text = [NSString stringWithFormat:@"%@", [your array objectAtIndex:row]];
    channelLabel.textAlignment = UITextAlignmentLeft;
    channelLabel.backgroundColor = [UIColor clearColor];

    UIView *tmpView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 110, 60)];
    [tmpView insertSubview:temp atIndex:0];
    [tmpView insertSubview:channelLabel atIndex:1];

    return tmpView;
}

Withy

Answer 2

Here i am sharing whole example the way i have implemented.

Please check CustomPickerViewController.h

#import <UIKit/UIKit.h>
@interface CustomPickerViewController : UIViewController
<UIPickerViewDataSource , UIPickerViewDelegate>{
        IBOutlet  UIPickerView *picker;
        IBOutlet  UILabel *winLabel;

        NSArray *column1;
        NSArray *column2;
        NSArray *column3;
        NSArray *column4;
        NSArray *column5;
}
@property (nonatomic,retain) UIPickerView *picker;@property (nonatomic,retain) UILabel *winLabel;@property (nonatomic,retain) NSArray *column1;@property (nonatomic,retain) NSArray *column2;@property (nonatomic,retain) NSArray *column3;@property (nonatomic,retain) NSArray *column4;@property (nonatomic,retain) NSArray *column5;
-(IBAction)spin;

CustomPickerViewController.m


-(void)spin
  {
          BOOL win = NO;
          int numInRow = 1;
          int lastVal = -1;
          for(int i = 0; i<5 ;i++)
          {
                  int newValue = random() % [self.column1 count];
                  if(newValue == lastVal)
                          numInRow++ ;
                  else
                          numInRow = 1;
                  lastVal = newValue;
                  [picker selectRow:newValue inComponent:i animated:YES];
                  [picker reloadComponent:i];
                  if(numInRow >= 3)
                          win = YES;
          }

          if(win)
                  winLabel.text = @"WIN!";
          else
                  winLabel.text = @"";
  }
- (void)viewDidLoad {

        UIImage *seven = [UIImage imageNamed:@"seven.png" ];
        UIImage *bar = [UIImage imageNamed:@"bar.png" ];
        UIImage *crown = [UIImage imageNamed:@"crown.png" ];
        UIImage *cherry = [UIImage imageNamed:@"cherry.png" ];
        UIImage *lemon = [UIImage imageNamed:@"lemon.png" ];
        UIImage *apple = [UIImage imageNamed:@"apple.png"];


for(int i =1; i<=5; i++)
{
  UIImageView *sevenView = [[UIImageView alloc] initWithImage:seven];
  UIImageView *barView = [[UIImageView alloc] initWithImage:bar];
  UIImageView *crownView = [[UIImageView alloc] initWithImage:crown];
  UIImageView *cherryView = [[UIImageView alloc] initWithImage:cherry];
  UIImageView *lemonView = [[UIImageView alloc] initWithImage:lemon];
  UIImageView *appleView = [[UIImageView alloc] initWithImage:apple];


        NSArray *imageViewArray = [[NSArray alloc] initWithObjects:
        sevenView,barView, crownView,cherryView,lemonView,appleView,nil];

        NSString *fieldName = [[NSString alloc] initWithFormat:@"column%d",i];
        [self setValue:imageViewArray forKey:fieldName];
        [fieldName release];
        [imageViewArray release];

        [sevenView release];
        [barView release];
        [crownView release];
        [cherryView release];
        [lemonView release];
        [appleView release];
   }
        srandom(time(NULL));}

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
        return 5;}

-(NSInteger)pickerView:(UIPickerView *)pickerView
numberOfRowsInComponent:(NSInteger)component{
        return [self.column1 count];}

-(UIView *)pickerView:(UIPickerView *)pickerView
    viewForRow:(NSInteger)row
        forComponent:(NSInteger)component reusingView:(UIView *)view{
        NSString *arrayName = [[NSString alloc]initWithFormat:@"column%d",component+1];
        NSArray *array = [self valueForKey:arrayName];
        return [array objectAtIndex:row];}

Implement this way. this code is working fine for me. Please check and let me know it is okay.

Westminster

I have seen this before i can download he's source code and get it working but wen i start my owe Single View Application and do the same thing i cant get it to work(iphone-rahulvarma.blogspot.com.au/2012/03/…) I have also looked at this and like it the look of it (#2427151 you for you help love you work ...been making an app for 3 months and this is the last step .... and i have dyslexia so i need clear instructions thanks so much :) – Lend

Answer 3

instead of

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component

you can use following datasource method to add custom object in row step 1: create UIImageView object step 2: assign appropriate icon image to it step 3: return your UIImageView object

- (UIView *)viewForRow:(NSInteger)row forComponent:(NSInteger)component
{
    UIImageView *myIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myIconName"]];
    [myIcon setFrame:CGRectMake(0, 0, 50, 50)];
    return myIcon;
}

Bawdry

I would really like a complete example if possible – Lend