Objective-C在选中/未选中时突出显示UIButton

Question

I have a UIButton inside a UIView, when the UIButton is selected I would like have a background colour of dark gray...is this possible?

UIView *toolbar = [[UIView alloc]initWithFrame:CGRectMake(10, 50, 40, 160)];
    [toolbar setBackgroundColor:[UIColor colorWithWhite: 0.70 alpha:0.5]];

    toolbar.layer.cornerRadius = 5;

    UIButton *penTool = [UIButton buttonWithType:UIButtonTypeCustom];
    penTool.frame = CGRectMake(5, 0, 30, 30);
    [penTool setImage:[UIImage imageNamed:@"pen-but" inBundle:currentBundle compatibleWithTraitCollection:nil] forState:UIControlStateNormal];
    [penTool addTarget:self action:@selector(drawButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
    penTool.autoresizingMask = UIViewAutoresizingNone;
    penTool.exclusiveTouch = YES;
    penTool.tag = 1;

    [toolbar addSubview:penTool];

Answer 1

What if you can do this?

[button setBackgroundColor:[UIColor greenColor] 
                  forState:UIControlStateSelected];

Let's give a great API for every state, not just selected, just like UIButton default API's ability to change image and title for every state.

BGButton.h

#import <UIKit/UIKit.h>

@interface BGButton : UIButton

- (void)setBackgroundColor:(UIColor *)backgroundColor 
                  forState:(UIControlState)state;

@end

BGButton.m

#import "BGButton.h"

@implementation BGButton {
    NSMutableDictionary *_stateBackgroundColor;
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _stateBackgroundColor = [[NSMutableDictionary alloc] init];
    }
    return self;
}


- (void)setBackgroundColor:(UIColor *)backgroundColor {
    [super setBackgroundColor:backgroundColor];

   /*
    * If user set button.backgroundColor we will set it to 
    * normal state's backgroundColor.
    * Check if state is on normal state to prevent background being 
    * changed for incorrect state when updateBackgroundColor method is called.
    */
    if (self.state == UIControlStateNormal) {
        [self setBackgroundColor:backgroundColor forState:UIControlStateNormal];
    }
}

- (void)setBackgroundColor:(UIColor *)backgroundColor 
                  forState:(UIControlState)state {
    NSNumber *key = [NSNumber numberWithInt:state];
    [_stateBackgroundColor setObject:backgroundColor forKey:key];
}

/*
 * state is synthesized from other flags. So we can't use KVO 
 * to listen for state changes.
 */
- (void)setSelected:(BOOL)selected {
    [super setSelected:selected];
    [self stateDidChange];
}

- (void)setEnabled:(BOOL)enabled {
    [super setEnabled:enabled];
    [self stateDidChange];
}

- (void)setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];
    [self stateDidChange];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesBegan:touches withEvent:event];
    [self stateDidChange];
}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesMoved:touches withEvent:event];
    [self stateDidChange];
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesEnded:touches withEvent:event];
    [self stateDidChange];
}

- (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesCancelled:touches withEvent:event];
    [self stateDidChange];
}

- (void)stateDidChange {
    [self updateBackgroundColor];
}

- (void)updateBackgroundColor {
    NSNumber *key = [NSNumber numberWithInt:self.state];
    self.backgroundColor = [_stateBackgroundColor objectForKey:key];
}

@end

You can use it like the default UIButton API

BGButton *button = [[BGButton alloc] init];

[button setBackgroundColor:[UIColor greenColor] 
                  forState:UIControlStateSelected];

[button setBackgroundColor:[UIColor blueColor] 
                  forState:UIControlStateHighlighted];

[button setBackgroundColor:[UIColor orangeColor] 
                  forState:UIControlStateDisabled];

Even if you use

button.backgroundColor = [UIColor redColor];

You will stay safe, it will be translated into

[button setBackgroundColor:[UIColor redColor] 
                  forState:UIControlStateNormal];

Answer 2

if you have this code

[self.view addSubview:toolbar];

then just implement your button selector

-(void)drawButtonTapped:(UIButton*)button{

if (button.selected) {
    button.backgroundColor = [UIColor clearColor];
    button.selected = NO;
}else{
    button.backgroundColor = [UIColor darkGrayColor];
    button.selected = YES;
}
}

Answer 3

I don't know why guys would go through such trouble when we have this functionality built-in inside UIButton . All you need to do is use UIButtonTypeSystem That's all.

[UIButton buttonWithType:UIButtonTypeSystem]

Seriously, there's nothing more to it. Have a look at it's behavior in the screenshots.

INTERFACE BUILDER

RUN TIME

Want to change color, set tintColor to color of your choice.

ADVANTAGES

• Covers titles with dynamic lengths. Not applied on all button width.
• When selected, title color is transparent, your background can be seen through, try to use an image as a background.

Let's hope you have at least iOS7 as deployment target. UIButtonTypeSystem was introduce with revised UI design guidelines of iOS7 and has been there for almost 3 years.

Good Luck!

Answer 4

I used a UIButton subclass here:

#import "CustomButton.h"

@interface CustomButton()
@property (nonatomic,strong) UIColor *originalColor;
@end

@implementation CustomButton

- (void)didMoveToSuperview
{
    self.originalColor = self.superview.backgroundColor;
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    self.superview.backgroundColor = [UIColor grayColor];
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInView:self];
    if ([self hitTest:location withEvent:nil]) {
        self.superview.backgroundColor = [UIColor grayColor];
        self.originalColor = self.superview.backgroundColor;
    }
    else
    {
        self.superview.backgroundColor = self.originalColor;
    }
}

- (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    self.superview.backgroundColor = self.originalColor;    
}

@end

If you subclass your button from this class, It should give you the desired effect. This also gives you the highlight effect. If you wish you can disable it by removing the line on touchesBegan.

Answer 5

Just try to Override the UIButton with the following Method...

   - (void)setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];

    if (highlighted) {
        self.backgroundColor = [UIColor darkGray];
    }

}

Answer 6

I think you'll be want to change the selectedImage for flexibility not the background.

Add another image (eg pen-but-selected ) in the project. Add this 2nd line for setImage:

[penTool setImage:[UIImage imageNamed:@"pen-but-selected" inBundle:currentBundle compatibleWithTraitCollection:nil] forState:UIControlStateSelected];

---

- (void)drawButtonTapped:(UIButton *)button {
    button.selected = !button.selected;
}

If you still want to change background color. @jamil's answer would work. Make sure the buttonImage has transparent part so you can see the buttonBackground through the buttonImage .

Answer 7

Try using a boolean, or some other reference to the selection state of the button. You could also make use of a 'highlightColour' as well as the 'selectedColour' if you wanted closer control (should probably do this for better UX).

bool buttonIsSelected = false;

UIColor * selectedColour = [UIColor redColor];
UIColor * defaultColour = [UIColor blueColor];

UIButton * button = [UIButton new];
button.frame = CGRectMake(0,0,100,100);
button.backgroundColor = [UIColor redColor];
[self.view addSubview:button];

[button addTarget:self action:@selector(buttonTouchUp:) forControlEvents:UIControlEventTouchUpInside];
[button addTarget:self action:@selector(buttonTouchCancel:) forControlEvents:UIControlEventTouchCancel];
[button addTarget:self action:@selector(buttonTouchDown:) forControlEvents:UIControlEventTouchDown];

-(void)buttonTouchUp:(UIButton *)button {

    if (buttonIsSelected){
        buttonIsSelected = false;
        button.backgroundColor = defaultColour;
    } else {
        buttonIsSelected = true;
        button.backgroundColor = selectedColour;
    }
}
-(void)buttonTouchCancel:(UIButton *)button {
    button.backgroundColor = defaultColour;        
    if (buttonIsSelected){
        button.backgroundColor = selectedColour;
    }
}
-(void)buttonTouchDown:(UIButton *)button {
    button.backgroundColor = selectedColour;
}

Answer 8

-(void)OnSelect:(UIButton*)button{

if (button.selected) {
    button.backgroundColor = [UIColor blue];
    button.selected = NO;
}else{
    button.backgroundColor = [UIColor darkGrayColor];
    button.selected = YES;
}
}

use the above this will work..

Answer 9

-(void)buttonTapped:(UIButton*)button{

button.selected =! button.selected;

if (button.selected)
    button.backgroundColor = [UIColor grayColor];

else
    button.backgroundColor = [UIColor clearColor];

}