How can I put an image in this UIPickerView?

Question

I don't have any idea how can I create a custom UIPickerView with an image on the side of the text.

I've been searching for a method and I just found this:

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

But I don't know how I can use that.

These are my arrays:
All works perfectly, I just want to put a diferent image in each row, with 10 different colors. The colors will be the same for the 3 components but different in each row. like this image. LINK!!!

- (void)viewDidLoad
{
    [super viewDidLoad];

    Colores1 = [[NSMutableArray alloc] init];
    [Colores1 addObject:@"Negro"];
    [Colores1 addObject:@"Marrón"];
    [Colores1 addObject:@"Rojo"];
    [Colores1 addObject:@"Naranja"];
    [Colores1 addObject:@"Amarillo"];
    [Colores1 addObject:@"Verde"];
    [Colores1 addObject:@"Azul"];
    [Colores1 addObject:@"Violeta"];
    [Colores1 addObject:@"Gris"];
    [Colores1 addObject:@"Blanco"];

    Colores2 = [[NSMutableArray alloc] init];
    [Colores2 addObject:@"Negro"];
    [Colores2 addObject:@"Marrón"];
    [Colores2 addObject:@"Rojo"];
    [Colores2 addObject:@"Naranja"];
    [Colores2 addObject:@"Amarillo"];
    [Colores2 addObject:@"Verde"];
    [Colores2 addObject:@"Azul"];
    [Colores2 addObject:@"Violeta"];
    [Colores2 addObject:@"Gris"];
    [Colores2 addObject:@"Blanco"];

    Colores3 = [[NSMutableArray alloc] init];
    [Colores3 addObject:@"Negro"];
    [Colores3 addObject:@"Marrón"];
    [Colores3 addObject:@"Rojo"];
    [Colores3 addObject:@"Naranja"];
    [Colores3 addObject:@"Amarillo"];
    [Colores3 addObject:@"Verde"];
    [Colores3 addObject:@"Azul"];
    [Colores3 addObject:@"Violeta"];
    [Colores3 addObject:@"Gris"];
    [Colores3 addObject:@"Blanco"];
}

this is my uipickerview:

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 3;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{

    if(component == Primbanda)
        return [Colores1 count];
    if(component == Segubanda)
        return [Colores2 count];
    if (component == tercbanda)
        return [Colores3 count];
    return 0;
}
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    if(component == Primbanda)
        return [Colores1 objectAtIndex:row];
    if(component == Segubanda)
        return [Colores2 objectAtIndex:row];
    if (component == tercbanda) 
        return [Colores3 objectAtIndex:row];
    return 0;

}
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    NSLog(@"Row is:%d Component is:%d",row,component);

    int a;//entero de componente 1
    int b;//entero de componente 2
    double c;//entero de componente 3
    double resultado;
    int d; //valor de componente 1 y 2
    NSString *a1; //cadena de a y b!

    a = [pickerView selectedRowInComponent:0]; //asigno a las variables segun el numero!! 
    b = [pickerView selectedRowInComponent:1];

    switch ([pickerView selectedRowInComponent:2]) { //asi se le asignan valores propios!
        case 0:
            c=1;
            break;
        case 1:
            c=10;
            break;
        case 2:
            c=100;
            break;
        case 3:
            c=1000;
            break;
        case 4:
            c=10000;
            break;
        case 5:
            c=100000;
            break;
        case 6:
            c=1000000;
            break;
        case 7:
            c=10000000;
            break;
        case 8:
            c=100000000;
            break;
        case 9:
            c=1000000000;
            break;
        default:
            break;
    }
    NSLog(@"El valor de la tercera es ;%f",c);
    a1 = [[NSString alloc]initWithFormat:@"%d%d",a,b]; //junto las variables a y b
    d= [a1 intValue];    //guardo en la variable
    NSLog(@"el valor de C multiplicado es %f",c);

    resultado = d*c; //multiplica ab por el valor de c

    NSLog(@"valor de resistencia es %.0f Ohms",resultado); //awebo! me salio! :D

    labelresultado.text = [[NSString alloc]initWithFormat:@"%.0f",resultado];

}

Solution 1

From the UIPickerViewDelegate docs

pickerView:viewForRow:forComponent:reusingView:

Called by the picker view when it needs the view to use for a given row in a given component.
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
Parameters

pickerView

    An object representing the picker view requesting the data.
row

    A zero-indexed number identifying a row of component. Rows are numbered top-to-bottom.
component

    A zero-indexed number identifying a component of pickerView. Components are numbered left-to-right.
view

    A view object that was previously used for this row, but is now hidden and cached by the picker view.

The important thing here is the view that is returned, which is the view that is used to display the contents for that row on the picker view, and is where you want to add any images you want.

First you have to implement the delegate method, and declare it in your .h like this:

MyClass <UIPickerViewDelegate>

in your .m

myUIPickerObject.delegate = self;

then implement the method like this:

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    UIView *myColorView = [UIView new]; //Set desired frame
    myColorView.backgroundColor = [UIColor redColor]; //Set desired color or add a UIImageView if you want...
    UIImageView *myImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:"myImage.png"]];
    [view addSubview:myImageView];
    [view addSubview:myColorView];

    //Add subview retains view, so OK to release now
    [myImageView release];
    [myColorView release];

    return view;
}

Hope that helps.

Solution 2

This code works for me:

-(void) viewDidLoad{
    [super viewDidLoad];
    // Initialize Data
    _pickerData = @[@"Item 1", @"Informatio", @"AUx2 ", @"Services 061", @"Problems"];

    // Connect data
    self.tipoConsulta.dataSource = self;
    self.tipoConsulta.delegate = self;
}

- (int)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

// The number of rows of data
- (int)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return _pickerData.count;
}

// The data to return for the row and component (column) that's being passed in
- (UIView*)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    UIView *pickerCustomView = [UIView new];

    UILabel *mytext = [[UILabel alloc] init];
    mytext.text = _pickerData[row];
    [mytext setFrame:CGRectMake(60,0,50,50)];
    [pickerCustomView addSubview:mytext];
    UIImageView *myIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ic_tipo_servicio061_rounded.png"]];
    [myIcon setFrame:CGRectMake(0, 0, 50, 50)];

    [pickerCustomView addSubview:myIcon];
    [pickerCustomView addSubview:mytext];
    return pickerCustomView;
}

Comments

[houbysoft]

Your link to the image asks for a login. Please upload images using the image icon in the editor.

[Jose Garfias Lopez Parkinson]

But this method isn´t replace the text that i showed before in each row with the tittle for row method?

[Oscar Gomez]

It will not, unless you make your subview too large, simply set the frame where you will put your image to a portion of your view. Then you will be able to see the text and the images.

[Jose Garfias Lopez Parkinson]

yep! oks thank you, but the xcode show in the "view" part: [view addSubView:myImageView]; [view addSubView:myColorView]; "no visible @ interface for uiview declares the selector addSubView" ... >.< im noob in this.. help me.! please.

[Trent]

It's addSubview not addSubView.