UIButton w/ gradient, rounded corners, border, and drop shadow

Question

There are a few similar questions on the site, but I'm looking for something specific and slightly different.

I followed the direction given here: http://www.cimgf.com/2010/01/28/fun-with-uibuttons-and-core-animation-layers/ to subclass UIButton in order to create a generic class that I can specify the gradient colors on, rather than trying to use a static image.

I ran into a problem where the setMasksToBounds on the button's layer would either allow A) the drop shadow to show, but also allow the gradient layer to show beyond the rounded corners OR B) the gradient layer to clip to the rounded corners, but not allow the drop shadow to show

My solution to the problem seemed clunky and (although it works) I wanted to see if anyone knew of a better and/or cleaner way to accomplish the same thing. Here's my code:

CSGradientButton.h

#import <UIKit/UIKit.h>
@interface CSGradientButton : UIButton {
    UIColor *_highColor;
    UIColor *_lowColor;
    CAGradientLayer *gradientLayer;
    CALayer *wrapperLayer;
    CGColorRef _borderColor;
}

@property (nonatomic, retain) UIColor *_highColor;
@property (nonatomic, retain) UIColor *_lowColor;
@property (nonatomic) CGColorRef _borderColor;
@property (nonatomic, retain) CALayer *wrapperLayer;
@property (nonatomic, retain) CAGradientLayer *gradientLayer;

- (void)setHighColor:(UIColor*)color;
- (void)setLowColor:(UIColor*)color;
- (void)setBorderColor:(CGColorRef)color;
- (void)setCornerRadius:(float)radius;

@end

CSGradient.m (the interesting parts, anyway)

#import "CSGradientButton.h" 

@implementation CSGradientButton

...

- (void)awakeFromNib
{
    // Initialize the gradient wrapper layer
    wrapperLayer = [[CALayer alloc] init];
    // Set its bounds to be the same of its parent
    [wrapperLayer setBounds:[self bounds]];
    // Center the layer inside the parent layer
    [wrapperLayer setPosition:
     CGPointMake([self bounds].size.width/2,
                 [self bounds].size.height/2)];

    // Initialize the gradient layer
    gradientLayer = [[CAGradientLayer alloc] init];
    // Set its bounds to be the same of its parent
    [gradientLayer setBounds:[self bounds]];
    // Center the layer inside the parent layer
    [gradientLayer setPosition: CGPointMake([self bounds].size.width/2,
             [self bounds].size.height/2)];

    // Insert the layer at position zero to make sure the 
    // text of the button is not obscured
    [wrapperLayer insertSublayer:gradientLayer atIndex:0];
    [[self layer] insertSublayer:wrapperLayer atIndex:0];

    // Set the layer's corner radius
    [[self layer] setCornerRadius:0.0f];
    [wrapperLayer setCornerRadius:0.0f];
    // Turn on masking
    [wrapperLayer setMasksToBounds:YES];
    // Display a border around the button 
    // with a 1.0 pixel width
    [[self layer] setBorderWidth:1.0f];

}

- (void)drawRect:(CGRect)rect
{
    if (_highColor && _lowColor)
    {
        // Set the colors for the gradient to the 
        // two colors specified for high and low
        [gradientLayer setColors:
         [NSArray arrayWithObjects:
          (id)[_highColor CGColor], 
          (id)[_lowColor CGColor], nil]];
    }

    [super drawRect:rect];
}

- (void)setCornerRadius:(float)radius
{
    [[self layer] setCornerRadius:radius];
    // and get the wrapper for the gradient layer too
    [wrapperLayer setCornerRadius:radius];
}

- (void)setHighColor:(UIColor*)color
{
    // Set the high color and repaint
    [self set_highColor:color];
    [[self layer] setNeedsDisplay];
}

- (void)setLowColor:(UIColor*)color
{
    // Set the low color and repaint
    [self set_lowColor:color];
    [[self layer] setNeedsDisplay];
}

- (void)setBorderColor:(CGColorRef)color
{
    [[self layer] setBorderColor:color];
    [[self layer] setNeedsDisplay];
}


@end

As you can see, I add a 'wrapper' layer that the gradient layer can safely mask to, while the top level CALayer of the button view can safely set masksToBounds = NO when the dropshadow is added. I add a setCornerRadius: method to allow both the top layer and the 'wrapper' to adjust.

So rather than doing something like [[myCustomButton layer] setCornerRadius:3.0f]; I just say [myCustomButton setCornerRadius:3.0f]; As you can see, it's not maybe as clean as I'm hoping.

Is there a better way?

ironically this question may end up less relevant with iOS 7 :) — jinglesthula, Nov 22 '13 at 00:25

score 22 · Accepted Answer · answered Apr 21 '12 at 00:56

This is the way I found to have a button with rounded corner, gradient, and drop shadow. This example has one particular gradient, but can obviously be replaced with other gradients.

@implementation CustomButton

- (id)initWithFrame:(CGRect)frame
{
    if((self = [super initWithFrame:frame])){
        [self setupView];
    }

    return self;
}

- (void)awakeFromNib {
    [self setupView];
}

# pragma mark - main

- (void)setupView
{
    self.layer.cornerRadius = 10;
    self.layer.borderWidth = 1.0;
    self.layer.borderColor = [UIColor colorWithRed:167.0/255.0 green:140.0/255.0 blue:98.0/255.0 alpha:0.25].CGColor;
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowRadius = 1;
    [self clearHighlightView];

    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = self.layer.bounds;
    gradient.cornerRadius = 10;
    gradient.colors = [NSArray arrayWithObjects:
                         (id)[UIColor colorWithWhite:1.0f alpha:1.0f].CGColor,
                         (id)[UIColor colorWithWhite:1.0f alpha:0.0f].CGColor,
                         (id)[UIColor colorWithWhite:0.0f alpha:0.0f].CGColor,
                         (id)[UIColor colorWithWhite:0.0f alpha:0.4f].CGColor,
                         nil];
    float height = gradient.frame.size.height;
    gradient.locations = [NSArray arrayWithObjects:
                            [NSNumber numberWithFloat:0.0f],
                            [NSNumber numberWithFloat:0.2*30/height],
                            [NSNumber numberWithFloat:1.0-0.1*30/height],
                            [NSNumber numberWithFloat:1.0f],
                            nil];
    [self.layer addSublayer:gradient];}

- (void)highlightView 
{
    self.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
    self.layer.shadowOpacity = 0.25;
}

- (void)clearHighlightView {
    self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);
    self.layer.shadowOpacity = 0.5;
}

- (void)setHighlighted:(BOOL)highlighted
{
    if (highlighted) {
        [self highlightView];
    } else {
        [self clearHighlightView];
    }
    [super setHighlighted:highlighted];
}


@end

Hi Ischult2 - can you include the header file, or specify what the superclass of this implementation is? — Rayfleck, Nov 08 '12 at 18:14
thats a UIButton subclass (judging from the code and the main question). I made use of this code and it works perfect. Made a number of modifications to make the buttons look better though. This should be marked as the answer — pnizzle, Jan 09 '13 at 07:50
Your gradient locations helped. Is there a reason you're doing the maths like that? could you not just do something like... 1*0.9 or 1*0.95 or even just 0.9 or 0.95 explicitly? Maybe i'm missing something, if you could explain why your maths is like that for the gradient locations. cheers — Pavan, Mar 02 '13 at 14:37
This worked great, but the gradient appears over the button text. Change to insert the layer at index:0 instead does the trick: `[self.layer insertSublayer:gradient atIndex:0];` — KevinS, Oct 21 '13 at 15:40
@Pavan At first glance, I'd say it's probably to have an affect where on resizes the gradient looks like it's not moving in the background — Samie Bencherif, Sep 05 '15 at 16:24
All I was unaware of was this: --- `gradient.cornerRadius = 10;` — Amber K, Nov 12 '18 at 11:00

score 9 · Answer 2 · answered Jun 30 '11 at 10:08

Instead of inserting a gradient layer, you can also override the method +layerClass to return the CAGradientLayer class. The layer of the button is than of that class, and you can easily set its colors etc.

+ (Class)layerClass {
    return [CAGradientLayer class];
}

Matthew Huck · Answer 3 · 2013-05-29T22:45:51.767

I had a similar problem, however instead of a gradient, I had a image for a background. I solved it in the end using:

+ (void) styleButton:(UIButton*)button
{
CALayer *shadowLayer = [CALayer new];
shadowLayer.frame = button.frame;

shadowLayer.cornerRadius = 5;

shadowLayer.backgroundColor = [UIColor whiteColor].CGColor;
shadowLayer.opacity = 0.5;
shadowLayer.shadowColor = [UIColor blackColor].CGColor;
shadowLayer.shadowOpacity = 0.6;
shadowLayer.shadowOffset = CGSizeMake(1,1);
shadowLayer.shadowRadius = 3;

button.layer.cornerRadius = 5;
button.layer.masksToBounds = YES;

UIView* parent = button.superview;
[parent.layer insertSublayer:shadowLayer below:button.layer];
}

The really interesting thing is that if you have a clearColor as the shadowLayer.backgroundColor is just didn't draw.

UIButton w/ gradient, rounded corners, border, and drop shadow

3 Answers3

Linked