iPhone SDK - UIButton Highlighted State Question

Question

I am having trouble with the behavior of one of my UIButtons . I am trying to essentially make it a toggle button , but I am running into the problem below.

I have the code:

UIButton *likeButton = [[UIButton alloc] initWithFrame:CGRectMake(horizontalOffset+buttonWidth, verticalOffset, buttonWidth, buttonHeight)];
    [likeButton setImage:[UIImage imageNamed:@"like-off.png"] forState:UIControlStateNormal];
    [likeButton setImage:[UIImage imageNamed:@"like-on.png"] forState:UIControlStateHighlighted];
    [likeButton setImage:[UIImage imageNamed:@"like-on.png"] forState:UIControlStateSelected];
    [likeButton addTarget:self action:@selector(likeButtonPressed:) forControlEvents:UIControlEventTouchUpInside];

which fires the method:

-(void)likeButtonPressed:(id)sender {
    UIButton *button = (UIButton *)sender; 
    [button setSelected:!button.selected];
}

The behavior I am seeing is that when I tap the button down (and highlight it), it works as expected, and the 'like-on.png' image is used for the highlighted state, and it remains on in the 'selected' state.

However, when I tap the button again, to toggle it off, I see a gray highlighted state when I press my finger. When I release my finger, I see the 'like-off' image is shown as expected.

I would like to avoid seeing the gray highlighted state when I press my finger down on the button when I go to toggle it off. Instead I would like to make sure that the highlighted state on toggle-off uses the 'like-on.png' image as specified in the code.

What's going on here? Any ideas where my code could be incorrect?

Many thanks, Brett

Answer 1

You're missing the image for the selected and highlighted state:

[likeButton setImage:[UIImage imageNamed:@"like-on.png"] forState:UIControlStateSelected | UIControlStateHighlighted];

If you don't set it, the image of the normal state is used. From the -[UIButton setImage:forState:] documentation:

In general, if a property is not specified for a state, the default is to use the UIControlStateNormal value.

If you don't want your images to be modified when they are highlighted, set:

likeButton.adjustsImageWhenHighlighted = NO;

Answer 2

I think the selected property of UIButton is meant for something different (think of the desktop UI).

It would be more consistent to change the for all states according to a BOOL that tracks if it is "on" or "off".

Thus,

-(void)likeButtonPressed:(id)sender {
    UIButton *button = (UIButton *) sender;
    liking = !liking;
    if (liking) {
        // configure the four states with "like-on" and other images
    }
    else {
        // configure the four states with "like-off"
    }
}

Otherwise you would use the state of a UI element to represent your program logic, which is basically flawed. The only instance where this is sort of acceptable (but not really) is a UISwitch .