UIButton with GradientLayer obscures image and darkens gradient

Question

I have an UIButton here where I'd like to have a gradient as the background below the image (symbol with transparent background), but I'm facing two different problems.

First of the CAGradientLayer seems to overlay on top of the image no matter how I try to add it, obscuring the image completely.

Secondly the gradient itself seems to be darkened a lot, like the button was disabled, which it isn't.

Here's my code:

self.backButton = [[UIButton alloc] initWithFrame:CGRectMake(15, 35, 28, 28)];
[backButton addTarget:self
               action:@selector(goBack)
     forControlEvents:UIControlEventTouchUpInside];
[backButton setBackgroundColor:[UIColor clearColor]];
CAGradientLayer *buttonGradient = [CAGradientLayer layer];
buttonGradient.frame = backButton.bounds;
buttonGradient.colors = [NSArray arrayWithObjects:
                         (id)[[UIColor colorWithRed:.0
                                              green:.166
                                               blue:.255
                                              alpha:1] CGColor], 
                         (id)[[UIColor colorWithRed:.0
                                              green:.113
                                               blue:.255
                                              alpha:1] CGColor], 
                         nil];
[buttonGradient setCornerRadius:backButton.frame.size.width / 2];
[backButton.layer insertSublayer:buttonGradient
                         atIndex:0];
[backButton setImage:[UIImage imageNamed:@"backarrow.png"]
            forState:UIControlStateNormal];
[backButton setEnabled:NO];
[topbarView addSubview:backButton];

score 81 · Accepted Answer · edited Aug 17 '18 at 09:25

81

So I managed to get around this by doing a [button bringSubviewToFront:button.imageView] after adding the gradient. Seems that no matter what I do the new layer will add on top of the imageView, so I need to push that to the front afterwards.

Objective-C:

[button bringSubviewToFront:button.imageView]

Swift 4.1:

button.bringSubview(toFront:button.imageView!)

edited Aug 17 '18 at 09:25

Keale

3,924
3
29
46

answered Nov 24 '11 at 17:59

Christian A. Strømmen

3,181
2
25
46

score 35 · Answer 2 · answered Oct 08 '14 at 22:02

35

Alternatively, you can insert the gradient layer below the image view's layer

CAGradientLayer* gradient = [CAGradientLayer layer];
// ...
[button.layer insertSublayer:gradient below:button.imageView.layer];

answered Oct 08 '14 at 22:02

Neil

1,165
1
14
24

You literally just saved my life ! ;) The image was not shown after I added layer with gradient because the layer was of course - above the image layer. Thanks – virusss8 May 17 '16 at 10:00
Great ! Save my time – Hsiao-Ting Mar 28 '18 at 07:51

score 5 · Answer 3 · answered Nov 10 '16 at 19:45

SWIFT 3

Here goes an example: (Based on Neil answer)

    let layer = CAGradientLayer()
    layer.frame = CGRect(x: 0, y: 0, width: myButtonOutlet.layer.frame.size.width, height: myButtonOutlet..layer.frame.size.height)
    layer.colors = [UIColor.white.cgColor, pixelColorReceta.cgColor]
    layer.masksToBounds = true
    layer.cornerRadius = myButtonOutlet.layer.cornerRadius
    myButtonOutlet.layer.insertSublayer(layer, below: myButtonOutlet..imageView?.layer)

Happy coding :)

budiDino · Answer 4 · 2018-08-20T21:13:22.417

0

Swift 3

You can move the image above the gradient:

button.imageView?.layer.zPosition = 1

or insert the gradient under the image:

button.layer.insertSublayer(gradientLayer, below: button.imageView?.layer)

edited Aug 20 '18 at 21:13

answered Jul 25 '17 at 16:41

budiDino

13,044
8
95
91

UIButton with GradientLayer obscures image and darkens gradient

4 Answers4

Linked