iOS: How to make a UIButton get a blue shade when pressed?

Question

I'm trying to imitate the behavior of the shuffle button in the iPod app on the iphone. I want my shuffle button to behave exactly like the ipod's button - when the users presses the button it gets the blue shade and remains like that until the user presses the button again, and then it gets back its white shade. To show you what I mean I attach an image

One option is of course to save to images for the two states. The thing is that I suspect that maybe it's possible to do so programmatically. I've a jailbroken phone so I looked inside the ipod app's folders and saw there only the regular shuffle icon (with the white shade, no blue shade). I also found there a png with just blue background.

So what do you think? Can it be achieved without using two images with different shades?

Answer 1

The only way i can imagine is custom drawing for UIButton. So make a .png image for the normal state and one for the pressed, blue state. So create an outlet and an action for your button. Also add a BOOL *state to your header file. Then in viewDidLoad add the following code:

[yourButton setBackgroundImage:@"normalimage.png" forState:UIControlStateNormal];
[yourButton setBackgroundImage:@"normalimage.png" forState:UIControlStateHighlited];
state = NO

in the action for the button add the following code:

if (state == NO) {
    [yourButton setBackgroundImage:@"blueimage.png" forState:UIControlStateNormal];
    [yourButton setBackgroundImage:@"blueimage.png" forState:UIControlStateHighlited];
    state = YES;
}
else {
    [yourButton setBackgroundImage:@"normalimage.png" forState:UIControlStateNormal];
    [yourButton setBackgroundImage:@"normalimage.png" forState:UIControlStateHighlited];
    state = NO;
}

Pretty simple stuff. I wrote it all by memory, you really just have to think a bit to come to any idea about this....

Answer 2

Are you using standard buttons or icons of your own? I've solved the same problem by overriding the drawRect: method of UIView to make your own buttons that draw themselves differently depending on whether they have been pressed.

You need to have: an instance variable in the UIView subclass to hold the state (pressed/unpressed).

custom drawing in the UIView subclasses drawRect: method to draw your button/icon in either state.

UITapGestureRecognizer code in your view controller to handle detecting touches.

It's somewhat reinventing the wheel to get really custom buttons, but you'll a. have really beautiful and distinctive UI, which is what iOS is all about and b. you'll learn a LOT that you take use in other ways. The tools are super well documented by Apple, look for the CoreGraphics/Quartz programming guide and Gesture Recognition guide.

Answer 3

The easiest way you can achieve this is to make 2 versions of the button, one normal and one in a "pressed" state.

On another note, this is naturally achieved on a UITabBar.