带有GradientLayer的UIButton遮挡了图像并使渐变变暗。

Question

我有一个UIButton，我想在图像（带透明背景的符号）下方设置渐变作为背景，但我遇到了两个不同的问题。

首先，无论我如何尝试添加它，CAGradientLayer似乎都会覆盖在图像之上，完全遮挡了图像。

其次，渐变本身似乎被强烈加深，就像按钮被禁用一样，但实际上并没有被禁用。

这是我的代码：

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];

- Christian A. Strømmen

Answer 1

我通过在添加渐变后执行 [button bringSubviewToFront:button.imageView] 来解决了这个问题。似乎无论我做什么，新的层都会添加到imageView的顶部，所以我需要在此之后将其推到最前面。

Objective-C:

[button bringSubviewToFront:button.imageView] 

Swift 4.1：

button.bringSubview(toFront:button.imageView!)

- Christian A. Strømmen

Answer 2

或者，您可以将渐变层插入到图像视图的层下面

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

- Neil

---

你真的救了我的命！;) 当我添加渐变图层时，图像没有显示出来，因为该图层当然是在图像图层上方。谢谢。 - virusss8

太好了！节省了我的时间。 - Hsiao-Ting

Answer 3

SWIFT 3

下面是一个例子：（基于Neil的答案）

    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)

愉快的编码 :)

- MLBDG

Answer 4

Swift 3

您可以将图像移动到渐变上方：

button.imageView?.layer.zPosition = 1

或者在图像下方插入渐变：

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

- budiDino