Set Selected State of CAGradient UIButton in iOS

Question

Hi I have made a custom button in code using corner radius CAGradientLayer and border colour in one of my view controllers like the below:

phoneButton = [CustomButton buttonWithType:UIButtonTypeCustom];
phoneButton.frame = CGRectMake(6, 363, 99, 48);
phoneButton.titleLabel.font = [UIFont fontWithName:@"Futura-Medium" size:14];
phoneButton.titleLabel.shadowColor = [UIColor colorWithWhite:0.0 alpha:1.0];
phoneButton.titleLabel.shadowOffset = CGSizeMake(0, 1);
[phoneButton setTitle:@"Phone" forState:UIControlStateNormal];
[phoneButton addTarget:self action:@selector(phone) forControlEvents:UIControlEventTouchUpInside];

gradient = [CAGradientLayer layer];
gradient.frame = phoneButton.bounds;
gradient.cornerRadius = 8;
gradient.borderColor = [[UIColor whiteColor]CGColor];
gradient.borderWidth = 2.0;
gradient.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];
[phoneButton.layer insertSublayer:gradient atIndex:0];
[self.view addSubview:phoneButton];

Now I would like to set the selected/highlighted color of the button on selection. How do I do this. I read make a UIbutton subclass and override setSelected but I dont have a clue how to do it. Here is customButton subclass.m

#import "CustomButton.h"

@implementation CustomButton
@synthesize sharedManager;

- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
    // Initialization code
    sharedManager = [[MySingleton alloc]init];

    }
return self;
}


-(void) setHighlighted:(BOOL)highlighted {

if(highlighted) {
    NSLog(@"Highlighted");


} else {
    NSLog(@"Not Highlighted");

}

[super setHighlighted:highlighted];
}

-(void) setSelected:(BOOL)selected {

if(selected) {
    NSLog(@"Selected");

} else {
    NSLog(@"Not Selected");
}
[super setSelected:selected];
}



@end

Or just dim the button on selection would be good? I should add that the button is not in a Xib.

you mean changing the gradient colour, don't you? – sergio Jan 29 '13 at 17:34 — sergio, Jan 29 '13 at 17:34
@sergio yes or just dimming the button on selection. Thanks – Alex McPherson Jan 29 '13 at 17:36 — Alex McPherson, Jan 29 '13 at 17:36

Alex McPherson · Answer 1 · 2013-01-30T11:32:24.167

I figured it out just by creating a selected Gradient and unselected Gradient state of the button in subclass.m now it is all working great!

- (CustomButton *)buttonWithType:(UIButtonType)type
{
  return [self buttonWithType:UIButtonTypeCustom];
}


- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
    // Initialization code

}
return self;
}

- (id)initWithCoder:(NSCoder *)coder
{
//Call the parent implementation of initWithCoder
self = [super initWithCoder:coder];

//Custom drawing methods
if (self)
{

    [self drawBackgroundLayer];
    [self drawHighlightBackgroundLayer];

    highlightBackgroundLayer.hidden = YES;


}

return self;
 }

-(void)loadSingleton{

sharedManager = [[MySingleton alloc]init];

}

- (void)layoutSubviews
{

// Set gradient frame (fill the whole button))
backgroundLayer.frame = self.bounds;

// Set inverted gradient frame
highlightBackgroundLayer.frame = self.bounds;

[super layoutSubviews];
}



- (void)drawBackgroundLayer
{
[self loadSingleton];
// Check if the property has been set already
if (!backgroundLayer)
{
    backgroundLayer = [CAGradientLayer layer];
    backgroundLayer.cornerRadius = 8;
    backgroundLayer.borderWidth = 1.5;
    backgroundLayer.borderColor = [UIColor whiteColor].CGColor;
    backgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager  cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];

    // Add the gradient to the layer hierarchy
    [self.layer insertSublayer:backgroundLayer atIndex:0];
   }
}

- (void)drawHighlightBackgroundLayer
{
[self loadSingleton];
if (!highlightBackgroundLayer)
{
    highlightBackgroundLayer = [CAGradientLayer layer];
    highlightBackgroundLayer.cornerRadius = 8;
    highlightBackgroundLayer.borderWidth = 1.5;
    highlightBackgroundLayer.borderColor = [UIColor whiteColor].CGColor;
    highlightBackgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellSelectedGradientEnd] CGColor], (id)[[sharedManager cellSelectedGradientStart] CGColor], nil];

    [self.layer insertSublayer:highlightBackgroundLayer atIndex:1];
  }
}

and setting the selected state on or off

- (void)setHighlighted:(BOOL)highlighted
{
NSLog(@"Selected");

// Disable implicit animation
[CATransaction begin];
[CATransaction setDisableActions:YES];

// Hide/show inverted gradient
highlightBackgroundLayer.hidden = !highlighted;
[CATransaction commit];

[super setHighlighted:highlighted];
}

score 0 · Answer 2 · answered Jan 29 '13 at 18:08

0

Have you tried invoking super and then invoking setNeedsDisplay on self?

It should cause your display functionality to be invoked at the appropriate time, and in that code you should be checking for selected/highlighted.

answered Jan 29 '13 at 18:08

bshirley

8,217
1
37
43

not sure I understand I just need to know how I go about setting the selected state of my button in the other class to dim or change colour from the custom button class.. – Alex McPherson Jan 29 '13 at 18:18
Anyone have an idea as mentioned I dont use a Nib and the button is added a subview? – Alex McPherson Jan 29 '13 at 18:38
`UIControl`, superclass of `UIButton` has values for `selected` and `highlighted`. `UIControl` will set `highlighted` to `YES` when there is a touch down inside of it, and to NO when the touch is lifted or moved outside it. The `selected` property means nothing inherently to the `UIButton` or `UIControl` and will not be modified by either. If you want it to mean something, your subclass is welcome to do that. If so, an action that it triggers should set it to `selected` and then your drawing can react. – bshirley Jan 29 '13 at 18:43

score 0 · Answer 3 · answered Jan 29 '13 at 18:39

If I understand correctly what you are trying to do, I would suggest the following approach:

move the CAGradientLayer inside of your CustomButton implementation (so it would become a CustomGradientButton);
when you want to set the selected state for the custom button, change the CAGradientLayer gradientColors by changing their saturation and brightness.

By doing this, your button will change its appearance in the selected state.

A way to modify saturation and brightness could be through this UIColor category of mine:

@interface UIColor (LighterDarkerColor)

- (UIColor*)colorWithSaturation:(float)saturationFactor
                 brightness:(float)brightnessFactor;

@end

@implementation UIColor (LighterDarkerColor)

- (UIColor*)colorWithSaturation:(float)saturationFactor
                 brightness:(float)brightnessFactor {

  float hue = 0.0;
  float saturation = 0.0;
  float brightness = 0.0;
  float alpha = 0.0;

  if ([self getHue:&hue saturation:&saturation brightness:&brightness alpha:&alpha])
    return [UIColor colorWithHue:hue saturation:saturation*saturationFactor
                      brightness:brightness*brightnessFactor alpha:alpha];

  return self;
}

@end

You could do, e.g.:

UIColor* selectedColorStart = [[sharedManager cellGradientStart] colorWithSaturation:0.65 brightness:1.2];

to get a less saturated, brighter version of your cellGradientStart color. Then in your setSelected method you would modify your CAGradientLayer:

gradient.colors = [NSArray arrayWithObjects:(id)[selectedColorEnd CGColor], (id)[selectedColorStart CGColor], nil];

This approach works for me, although you need to fine-tune your selection of saturation and brightness working for your case.

Set Selected State of CAGradient UIButton in iOS

3 Answers3