change button image from UIPickerView - ios

Question

I have a question about something I've been working on for a while. I have a UIPickerView that lists different types of food. My array looks like such:
food = [[NSMutableArray alloc] init];
[activities addObject:#"Pasta"];
[activities addObject:#"Pizza"];
[activities addObject:#"Spaghetti"];
[activities addObject:#"Salad"];
And my image array is:
foodImages = [[NSMutableArray alloc] init];
[activities addObject:#"Pasta.png"];
[activities addObject:#"Pizza.png"];
[activities addObject:#"Spaghetti.png"];
[activities addObject:#"Salad.png"];
What I am trying to find out is if when the user selects an item from the picker view if I can change the image of a button. So if pasta is selected from the UIPickerView it would change the image of the button to "Pasta.png". How could I go about achieving this in Xcode?

Answer 1

You can certainly do that. First of all though, it would be much better to store the image links and the food name in one array. This will make your app more scalable and changes to the code are less likely to cause errors.
You could do this like so:
food = [[NSMutableArray alloc] init];
[food insertObject:[NSMutableArray arrayWithObjects:#"Pasta",#"Pasta.png",nil] atIndex:[food count]];
[food insertObject:[NSMutableArray arrayWithObjects:#"Pizza",#"Pizza.png",nil] atIndex:[food count]];
Though if your images are the same as your names but with .png extension then do you really need two objects?
As for setting the images for a UIPicker you would do something like this (You need to add UIPickerViewDelegate to the .h and call [self setPickerValue]; where ever you want to show your UIPicker - perhaps a button or text field?):
-(void)setPickerValue {
pickerActionSheet = [[UIActionSheet alloc] initWithTitle:nil delegate:nil cancelButtonTitle:nil destructiveButtonTitle:nil otherButtonTitles:nil, nil];
[pickerActionSheet setActionSheetStyle:UIActionSheetStyleBlackTranslucent];
CGRect pickerFrame = CGRectMake(0, 44, 0, 0);
UIPickerView *valuesPicker = [[UIPickerView alloc] initWithFrame:pickerFrame];
[valuesPicker setDataSource: self];
[valuesPicker setDelegate: self];
valuesPicker.showsSelectionIndicator = YES;
[pickerActionSheet addSubview:valuesPicker];
UIToolbar *controlToolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
[controlToolBar setBarStyle:UIBarStyleBlack];
[controlToolBar sizeToFit];
UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
UIBarButtonItem *setButton = [[UIBarButtonItem alloc] initWithTitle:#"Set" style:UIBarButtonItemStyleDone target:self action:#selector(dismissPicker)];
UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithTitle:#"Cancel" style:UIBarButtonItemStyleBordered target:self action:#selector(cancelPicker)];
[controlToolBar setItems:[NSArray arrayWithObjects:cancelButton, spacer, setButton, nil] animated:NO];
[pickerActionSheet addSubview:controlToolBar];
[pickerActionSheet showInView:self.view];
[pickerActionSheet setBounds:CGRectMake(0, 0, 320, 485)];
}
-(void)cancelPicker {
[pickerActionSheet dismissWithClickedButtonIndex:0 animated:YES];
}
// Number of components.
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 1;
}
// Total rows in our component.
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
return [food count];
}
// Display each row's data.
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
return [[food objectAtIndex: row] objectAtIndex:0];
}
The above code makes a nice picker view with a cancel and ok button as a toolbar. The final function you need is (presuming you have a UIButton named "button1"):
-(void)dismissPicker {
[button1 setImage:[UIImage imageNamed: [[food objectAtIndex:row] objectAtIndex:1]] forState:UIControlStateNormal];
[pickerActionSheet dismissWithClickedButtonIndex:0 animated:YES];
}

Answer 2

[yourButton setImage:[UIImage imageNamed:[foodImages objectAtIndex:0]] forState:UIControlStateNormal]; // objectAtIndex 0 will return "Pasta.PNG", 1 will return Pizza, etc.

Answer 3

Implement the UIPickerViewDelegate method (docs):
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
NSString *imageName = foodImages[row];
[button setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
}
Set your picker's delegate:
pickerView.delegate = self;
Then add your images to your Xcode project (if you haven't done so already).
You may also want to set the image for different states, or use setBackgroundImage:forState if you also want text on the button (see UIButton docs for more info).

Answer 4

I'd use a NSDictionary with the food's name being the Key and the food's picture file being the value. Then when it is selected, just load the Key's value as the picture.
If you want to stick with two arrays, then get the index of the selected food and as long as your foodImages array mirrors the food array, you can use that value for the objectAtIndex to load the image.