iPhone iOS how to add linear gradient to a UIButton under the button's text or image?

Question

I'm working on creating fancy looking UIbuttons by adding linear gradient to the button. However I'm not sure at which index I need to add the gradient. The code that I have currently places the gradient over the image/text.

How can I insert a sublayer to a UIButton under the text/image sublayer? It is important for me to keep the text and the image of a button visible!

+(void)addLinearGradientToView:(UIView*)view TopColor:(UIColor*)topColor BottomColor:(UIColor*)bottomColor
{
    for(CALayer* layer in view.layer.sublayers)
    {
        if ([layer isKindOfClass:[CAGradientLayer class]])
        {
            [layer removeFromSuperlayer];
        }
    }
    CAGradientLayer* gradientLayer = [CAGradientLayer layer];

    gradientLayer.startPoint = CGPointMake(0.5, 0);
    gradientLayer.endPoint = CGPointMake(0.5,1);
    gradientLayer.frame = view.bounds;
    gradientLayer.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil];
    //    [view.layer addSublayer:gradientLayer];
    if(view.layer.sublayers.count>0)
    {
        [view.layer insertSublayer:gradientLayer atIndex:view.layer.sublayers.count-2];
    }else {
        [view.layer addSublayer:gradientLayer];
    }
}

I have written some sample code to do this sort of thing: https://github.com/kristopherjohnson/gradientbuttons — Kristopher Johnson, Apr 13 '13 at 13:20

score 50 · Accepted Answer · edited May 14 '12 at 19:22

50

Add it to the layer of your custom button:

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = customButton.layer.bounds;

gradientLayer.colors = [NSArray arrayWithObjects:
                        (id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor,
                        (id)[UIColor colorWithWhite:0.4f alpha:0.5f].CGColor,
                        nil];

gradientLayer.locations = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0.0f],
                           [NSNumber numberWithFloat:1.0f],
                           nil];

gradientLayer.cornerRadius = customButton.layer.cornerRadius;
[customButton.layer addSublayer:gradientLayer];

where customButton is your custom UIButton.

edited May 14 '12 at 19:22

Liam George Betsworth

18,373
5
39
42

answered May 14 '12 at 16:59

scord

1,375
1
17
34

1

this solution isn't working 100%. The buttons do get a gradient, but it overflows on the bottom corners. See: https://www.dropbox.com/s/mguy6owuayjgxvc/Screen%20Shot%202012-09-03%20at%2017.50.30.png How can this be fixed? – murze Sep 03 '12 at 15:51
2

@murze Looks like your button or its container view is missing the clipsToBounds = YES property to be set. This will clip the overflow you are experiencing. – Luke Sep 19 '12 at 15:29
1

[gradientLayer.masksToBounds = YES]; <-- do that – stackOverFlew Feb 09 '14 at 01:28
Sorry, responding to an old thread - I had the same issue as murze and I had accidentally put my code in the viewDidLoad() method, so the button's bounds had not been correctly set yet. I moved it to viewDidAppear() and it works correctly. – taykay08 Oct 11 '16 at 16:10

score 9 · Answer 2 · answered May 14 '12 at 16:46

9

For what you are trying to achieve, always insert at index 0.

I wrote an article about this sort of thing recently that you may find interesting.

answered May 14 '12 at 16:46

Mark Granoff

16,878
2
59
61

Thanks! My text was missing after I added the gradient layer, but only in iOS 6, iOS 7 still showed the text. After changing to Insert it now works for both. – KevinS Oct 21 '13 at 15:27

score 1 · Answer 3 · answered Jan 17 '19 at 05:05

Swift 4

@IBOutlet weak var gButton: UIButton!

override func viewDidLoad() {

    super.viewDidLoad()

    let topGradientColor = UIColor.red
    let bottomGradientColor = UIColor.yellow

    let gradientLayer = CAGradientLayer()

    gradientLayer.frame = gButton.bounds

    gradientLayer.colors = [topGradientColor.cgColor, bottomGradientColor.cgColor]

    //Vertical
    //gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
    //gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)

    //Horizontal
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)

    gButton.layer.insertSublayer(gradientLayer, at: 0)
}

score 0 · Answer 4 · answered Sep 08 '15 at 08:47

Here is the code to achieve this

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = <#View Variable Name#>.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)([UIColor colorWithRed:0.337 green:0.596 blue:1.000 alpha:1.000].CGColor),(id)([UIColor colorWithRed:0.757 green:0.459 blue:1.000 alpha:1.000].CGColor),(id)([UIColor colorWithRed:0.310 green:0.835 blue:1.000 alpha:1.000].CGColor),nil];
gradient.startPoint = CGPointMake(0.5,0.0);
gradient.endPoint = CGPointMake(0.5,1.0);
[<#View Variable name#>.layer insertSublayer:gradient atIndex:0];

I got this tool that makes it easy to select your colors and automatically output the code for the gradient. Very handy I use it everyday itunes.apple.com/gb/app/gradient-creator/id1031070259?mt=12

iPhone iOS how to add linear gradient to a UIButton under the button's text or image?

4 Answers4

Linked

Related