Custom UIButton Highlighting

Question

In the application that I create, there are many custom UIButtons lying on top of fairly accurately laid out images. Buttonish, manage images and shortcuts and what you have, but with an explicit UIButton custom style sitting on top of it to handle the tap.

My client said yesterday: "I want this to be emphasized when you click it." Never mind that he immediately pushes a new look at the uinavigationcontroller ... he did not blink, and so he was embarrassed. Oy.

Here is what I did to solve it. I don't like this, but this is what I did:

I have subclassed UIButton (naming it FlashingUIButton).

For some reason, I couldn’t just set it up with the highlighted image background in control mode. It seemed that it never fell into a state of "stressed". I don’t know why this is so.

So I wrote:

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [self setBackgroundImage:[UIImage imageNamed:@"grey_screen"] forState:UIControlStateNormal]; [self performSelector:@selector(resetImage) withObject:nil afterDelay:0.2]; [super touchesBegan:touches withEvent:event]; } -(void)resetImage { [self setBackgroundImage:nil forState:UIControlStateNormal]; } 

This happily lays my grey_screen.png (30% opaque black box) above the button when it taps and replaces it with a happy void .2 seconds later.

This is good, but it means that I need to go through all my numerous tips and change all my buttons from UIButtons to FlashingUIButtons. That is not the end of the world, but I would really hope to name it as the UIButton category and hit all the birds with one stone.

Any suggestions for a better approach than this?

Answer 1

You can capture touch events with a gesture recognizer, and then programmatically add a recognizer to all your uibuttons. For instance:

 // // HighlighterGestureRecognizer.h // Copyright 2011 PathwaySP. All rights reserved. // #import <Foundation/Foundation.h> @interface HighlightGestureRecognizer : UIGestureRecognizer { id *beganButton; } @property(nonatomic, assign) id *beganButton; @end 

and implementation:

 // // HighlightGestureRecognizer.m // Copyright 2011 PathwaySP. All rights reserved. // #import "HighlightGestureRecognizer.h" @implementation HighlightGestureRecognizer @synthesize beganButton; -(id) init{ if (self = [super init]) { self.cancelsTouchesInView = NO; } return self; } - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { self.beganButton = [[[event allTouches] anyObject] view]; if ([beganButton isKindOfClass: [UIButton class]]) { [beganButton setBackgroundImage:[UIImage imageNamed:@"grey_screen"] forState:UIControlStateNormal]; [self performSelector:@selector(resetImage) withObject:nil afterDelay:0.2]; } } - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event { } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { } - (void)reset { } - (void)ignoreTouch:(UITouch *)touch forEvent:(UIEvent *)event { } - (BOOL)canBePreventedByGestureRecognizer:(UIGestureRecognizer *)preventingGestureRecognizer { return NO; } - (BOOL)canPreventGestureRecognizer:(UIGestureRecognizer *)preventedGestureRecognizer { return NO; } - (void)resetImage { [beganButton setBackgroundImage: nil forState:UIControlStateNormal]; } @end 

Hm. I have not tested this code, so if it does not work, do not judge me, just comment, and we will consider it. I just wrote this very quickly for reference. Even if this does not work, the logic should be sound.

edit:

Forgetting to add, the way to add a gesture recognizer to your button would be:

 HighlighterGestureRecognizer * tapHighlighter = [[HighlighterGestureRecognizer alloc] init]; [myButton addGestureRecognizer:tapHighlighter]; [tapHighlighter release]; 

So basically you declare it, initialize it and add it. After that, you'll want to release it, since addGestureRecognizer saves it.

Answer 2

Do you have adjustsImageWhenHighlighted = YES on your buttons? The default value is YES , but maybe you changed it in xib. Check the box next to “Highlight image adjustment” in the attribute inspector:

Answer 3

I had the same problem after subclassing UIButton (Swift 2). The subclassed drawRect function is NOT called when the user touches the UIButton (even if the underlined image setting checkbox is checked). This may be due to the fact that this is a custom UIButton.

In any case, it is easy to handle by overriding the "touchhesBegan" and "touchesEnded" events. More could be done to handle all button states (for example, disabled). But here is the code.

Swift 2:

 import Foundation import UIKit @IBDesignable class ppButton: UIButton { override func drawRect(rect: CGRect) { if self.state != UIControlState.Highlighted { //SKit is another class containing a function to draw the custom button SKit.drawPpButton(0, width: rect.width-2, height: rect.height-2) } else { //SKit is another class containing a function to draw the custom button SKit.drawPpButton(0, width: rect.width-20, height: rect.height-20) } } override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) { super.touchesBegan(touches, withEvent: event) self.setNeedsDisplay() } override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) { super.touchesEnded(touches, withEvent: event) self.setNeedsDisplay() } }