iPhone iOS如何在UIButton的文本或图片下添加线性渐变？

Question

我正在尝试通过向按钮添加线性渐变来创建漂亮的UI按钮。但是我不确定应该在哪个索引处添加渐变。目前我的代码将渐变放置在图像/文本上面。

如何向UIButton插入一个子层，使其位于文本/图像子层下方？对我来说保持按钮的文本和图片可见非常重要！

+(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];
    }
}

- Alex Stone

---

我已经编写了一些示例代码来完成这种操作：https://github.com/kristopherjohnson/gradientbuttons - Kristopher Johnson

Answer 1

将它添加到您的自定义按钮图层中：

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

其中customButton是您自定义的UIButton。

- scord

---

这个解决方案并不完美。按钮确实有渐变，但是在底部的角落处溢出了。请参见：https://www.dropbox.com/s/mguy6owuayjgxvc/Screen%20Shot%202012-09-03%20at%2017.50.30.png 如何解决这个问题？ - murze

@murze 看起来你的按钮或其容器视图缺少设置 clipsToBounds = YES 属性。这将剪切你正在经历的溢出。 - Luke

[gradientLayer.masksToBounds = YES]; <-- 做这个 - stackOverFlew

抱歉，回复了一个旧的线程 - 我和murze遇到了同样的问题，我不小心把我的代码放在了viewDidLoad()方法中，所以按钮的边界还没有正确设置。我把它移到了viewDidAppear()中，现在它可以正常工作了。 - taykay08

Answer 2

对于你想要实现的目标，总是在索引0处插入。

我最近写了一篇关于这种事情的文章，你可能会觉得有趣。 文章链接

- Mark Granoff

---

谢谢！在我添加渐变层之后，我的文本消失了，但只有在iOS 6上，iOS 7仍然显示文本。更改为插入后，现在两者都可以正常工作。 - KevinS

Answer 3

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)
}

- Gagandeep Gambhir

Answer 4

这里是实现此功能的代码

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

我有一个工具，可以轻松选择颜色，并自动输出渐变的代码。非常方便，我每天都在使用它。 itunes.apple.com/gb/app/gradient-creator/id1031070259?mt=12

- ggf85