Changing image of UIButton on click won't work

Question

I'm trying to change images when clicked on three different UIButtons. Here's my code:

-(void)One:(UIButton*)sender{
    [facebook setImage:[UIImage imageNamed:@"tab_selected.png"] forState:UIControlStateNormal];
    [twitter setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
    [twittertag setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
}

#pragma mark change image of second button
-(void)Two:(UIButton*)sender{
    [facebook setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
    [twitter setImage:[UIImage imageNamed:@"tab_selected.png"] forState:UIControlStateNormal];
    [twittertag setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
}

#pragma mark change image of third button
-(void)Three:(UIButton*)sender{
    [facebook setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
    [twitter setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
    [twittertag setImage:[UIImage imageNamed:@"tab_selected.png"] forState:UIControlStateNormal];
}

Or should I put it in the viewDidLoad method like this?

if (facebook.selected) {
        [facebook setImage:[UIImage imageNamed:@"tab_selected.png"] forState:UIControlStateSelected];
        [twitter setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
        [twittertag setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
    } else if (twitter.selected) {
        [facebook setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
        [twitter setImage:[UIImage imageNamed:@"tab_selected.png"] forState:UIControlStateSelected];
        [twittertag setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
    } else if (twittertag.selected) {
        [facebook setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
        [twitter setImage:[UIImage imageNamed:@"tab_unselected.png"] forState:UIControlStateNormal];
        [twittertag setImage:[UIImage imageNamed:@"tab_selected.png"] forState:UIControlStateSelected];
    }

I've connected the UIButtons facebook, twitter & twittertag to the buttons in IB, but nothing happens when I click on the buttons in the app.

Why? Can someone explain this?

Answer 1

You need to set the image for state UIControlStateSelected rather than UIControlStateNormal .

Also, you should do this in the viewDidLoad or some other method, not right when the button is clicked.

EDIT:

Think about CSS. Sometimes you might want to set what the link color is when someone hovers over it or when someone has already clicked it.

You don't do this "at the time of the hover/click." You do this up-front, in the beginning, by setting what the style will be mouseOver or visited .

In other words, you are telling your program, WHEN someone selects my button, if it ever even happens, make the image be this.

You don't have to wait until someone clicks to know what image will be used when it is clicked. The on-selected image in your example is already known before the click. It would be different if, for instance, the selected image depended on the part of the button you clicked.

Another way to put it: say you are a boss and need to give your team instructions on what to do in case a fire breaks out.

If you don't care about which team member to whom you are providing instructions or where the fire is, etc, you might say: "When a fire breaks out, use Exit B to leave the building."

This is like what [facebook setImage: forState: ] is doing, where image is like use Exit B to leave the building and state is like Fire in the previous example.

Now say you want to provide instructions based on where the fire is.

You would need to add another parameter to specify the location, ie:

[teamResponse setAction:@"EXIT B" forState:"FIRE" forLocation:2];

[teamResponse setAction:nil forState:"FIRE" forLocation:1];

In the first line, you are saying "when there is a fire and the location is 2, do action EXIT B."

In the second, you are saying "when there is a fire and the location is 1, do nothing."