How to have a UIButton image change when a button is touched

Question

I'm trying to have the UIButton image change when a button is touched. Currently I it changes but only on the highlighted state change. I would like it to change and stay there. I tried UIControlStateSelected for the state change but no luck.

thanks for the help

here's my code:

 // Create buttons for the sliding category menu.
    NSMutableArray* buttonArray = [NSMutableArray array];
    NSArray * myImages = [NSArray arrayWithObjects:@"category-cafe-unsel.png", @"category-food-unsel.png", @"category-clothing-unsel.png", @"category-health-unsel.png", @"category-tech-unsel_phone.png" , @"category-tech2-unsel.png", @"catefory-theatre-unsel.png", @"category-travel-unsel.png", nil];

    NSArray * myImagesSel = [NSArray arrayWithObjects:@"category-cafe-sel.png", @"category-food-sel.png", @"category-clothing-sel.png", @"category-health-sel.png", @"category-tech-sel_phone.png" , @"category-tech2-sel.png", @"catefory-theatre-sel.png", @"category-travel-sel.png", nil];

    // only create the amount of buttons based on the image array count
    for(int i = 0;i < [myImages count]; i++)
    {
        // Custom UIButton

        btn = [UIButton buttonWithType:UIButtonTypeCustom];

        [btn setFrame:CGRectMake(0.0f, 20.0f, 52.0f, 52.0f)];
        [btn setTitle:[NSString stringWithFormat:@"Button %d", i] forState:UIControlStateNormal];
        [btn setImage:[UIImage imageNamed:[myImages objectAtIndex:i]] forState:UIControlStateNormal];
        [btn setImage:[UIImage imageNamed:[myImagesSel objectAtIndex:i]] forState:UIControlStateHighlighted];

        NSLog(@"The button title is %@ ", btn.titleLabel.text);

        [btn addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
        [buttonArray addObject:btn];

Answer 1

In your IBAction method add the following lines:

 - (IBAction)change:(id)sender
 {
   UIButton *button = (UIButton *)sender;
   int tagOfButton = button.tag - 1;
   [button setImage:[UIImage imageNamed:[myImagesSel objectAtIndex:tagOfButton]] forState:UIControlStateNormal];
 }

Add a single line to your for loop like:

for(int i = 0;i < [myImages count]; i++)
{
    // other stuffs
    btn.tag  = i+1;
}

EDIT:

If you need to undone the previous selection when other button is clicked:

write this loop inside your IBAction method.

for(int i = 0;i < [myImages count]; i++)
{
  UIButton *but = (UIButton *)[buttonArray objectAtIndex:i];
  if(but != button)
  {
       [btn setImage:[UIImage imageNamed:[myImages objectAtIndex:i]] forState:UIControlStateNormal];
  }
}

Or simply store the previous button tag to a variable. And use it to change undone the image change.

Answer 2

[btn setTitle:@"I'm not selected" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:[myImages objectAtIndex:i]] forState:UIControlStateNormal];
[btn setTitle:@"I'm selected" forState:UIControlStateSelected];
[btn setImage:[UIImage imageNamed:[myImagesSel objectAtIndex:i]] forState:UIControlStateSelected];

[btn addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];

-(IBAction)buttonPressed:(id)sender {
  btn.selected = !btn.selected;
}