清除带有渐变标题和cornerBorder的UIButton答案

【问题标题】：Clear UIButton with gradient title and cornerBorder清除带有渐变标题和cornerBorder的UIButton
【发布时间】：2016-11-16 17:24:41
【问题描述】：

如何给 UIButton 标题添加渐变，按钮背景清晰，但边框也是渐变的。

我找到了如何添加渐变边框here，但不知道如何制作渐变标签。如果标签渐变可以匹配边框渐变颜色，那就太好了。

也许我可以用形状像标签的面具以某种方式创造这种效果？

【问题讨论】：

标签： ios uibutton cagradientlayer

【解决方案1】：

您好，最简单的方法是从patternImage 创建一个UIColor，如下所示：

let image = UIImage(named: "gradient.jpeg");
let color = UIColor(patternImage: image!);

然后在你需要的地方使用颜色：

buttonAction.layer.borderWidth = 1;
buttonAction.layer.cornerRadius = 5;
buttonAction.layer.borderColor = color.cgColor;

buttonAction.setTitleColor(color, for: .normal);

结果：

用于创建渐变 UIColor 使用此方法：（您可以将其添加到 UIColor 扩展）

func gradientColorFrom(color color1:UIColor, toColor color2:UIColor ,withSize size:CGSize) ->UIColor
{
  UIGraphicsBeginImageContextWithOptions(size, false, 0);
  let context = UIGraphicsGetCurrentContext();
  let colorspace = CGColorSpaceCreateDeviceRGB();

  let colors = [color1.cgColor, color2.cgColor] as CFArray;

  let gradient = CGGradient(colorsSpace: colorspace, colors: colors, locations: nil);
  context!.drawLinearGradient(gradient!, start: CGPoint(x:0, y:0), end: CGPoint(x:size.width, y:0), options: CGGradientDrawingOptions(rawValue: UInt32(0)));

  let image = UIGraphicsGetImageFromCurrentImageContext();

  UIGraphicsEndImageContext();

  let finalCColor = UIColor(patternImage: image!);
  return finalCColor;

}

水平渐变使用CGPoint(x:size.width, y:0)
垂直渐变使用CGPoint(x:0, y:size.height)

【讨论】：

这正是我想要的。在这种情况下，如果按钮宽度保持不变且标题为“Some”，我猜“S”将是红色，“e”将是浅蓝色？是否有可能实现“S”为紫色而“e”为深蓝色？
我刚刚更新了我的答案尝试gradientColorFrom(color ,toColor, withSize)方法
虽然您的示例确实有效，但按钮标题颜色与边框颜色不对应

【解决方案2】：

虽然康斯坦丁的回答确实有效，但标题标签渐变不一定与边框颜色匹配：

所以这是我的解决方案：

class GradientButton: UIButton {
    override func awakeFromNib() {

        layoutIfNeeded()

        let gradientBorder = CAGradientLayer()
        gradientBorder.frame =      bounds
        //Set gradient to be horizontal
        gradientBorder.startPoint = CGPoint(x: 0, y: 0.5)
        gradientBorder.endPoint =   CGPoint(x: 1, y: 0.5)
        gradientBorder.colors =    [UIColor.red.cgColor, UIColor.yellow.cgColor]

        let shape = CAShapeLayer()
        shape.lineWidth =     2
        shape.path =          UIBezierPath(rect: bounds).cgPath
        shape.strokeColor =   UIColor.black.cgColor
        shape.fillColor =     UIColor.clear.cgColor
        gradientBorder.mask = shape

        layer.addSublayer(gradientBorder)

        let gradient =        CAGradientLayer()
        gradient.frame =      bounds
        //Set gradient to be horizontal
        gradient.startPoint = CGPoint(x: 0, y: 0.5)
        gradient.endPoint =   CGPoint(x: 1, y: 0.5)
        gradient.colors =     [UIColor.red.cgColor, UIColor.yellow.cgColor]

        layer.insertSublayer(gradient, at: 0)

        let overlayView = UIView(frame: bounds)
        overlayView.isUserInteractionEnabled = false
        overlayView.layer.insertSublayer(gradient, at: 0)
        overlayView.mask = titleLabel

        addSubview(overlayView)
    }
}

结果：

【讨论】：

【解决方案3】：

您可以创建渐变层并将其添加到 UIButton

CAGradientLayer *gradient = [CAGradientLayer layer];
     gradient.frame = btn.bounds;
     gradient.colors = [NSArray arrayWithObjects:
                      (id)[[UIColor colorWithRed:255.0f/255.0f green:255.0f/255.0f blue:255.0f/255.0f alpha:.6f] CGColor],
                      (id)[[UIColor colorWithRed:200.0f/255.0f green:200.0f/255.0f blue:200.0f/255.0f alpha:.4f] CGColor],
                      (id)[[UIColor colorWithRed:150.0f/255.0f green:150.0f/255.0f blue:150.0f/255.0f alpha:.4f] CGColor],
                      (id)[[UIColor colorWithRed:100.0f/255.0f green:100.0f/255.0f blue:100.0f/255.0f alpha:.4f] CGColor],
                      (id)[[UIColor colorWithRed:50.0f/255.0f green:50.0f/255.0f blue:50.0f/255.0f alpha:.4f] CGColor],
                      (id)[[UIColor colorWithRed:5.0f/255.0f green:5.0f/255.0f blue:5.0f/255.0f alpha:.4f] CGColor],
                      nil];
    [btn.layer insertSublayer:gradient atIndex:0];

    CAGradientLayer *glossLayer = [CAGradientLayer layer];
    glossLayer.frame = btn.bounds;
    glossLayer.colors = [NSArray arrayWithObjects:
                     (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
                     (id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor,
                     (id)[UIColor colorWithWhite:0.75f alpha:0.0f].CGColor,
                     (id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor,
                     nil];
    glossLayer.locations = [NSArray arrayWithObjects:
                        [NSNumber numberWithFloat:0.0f],
                        [NSNumber numberWithFloat:0.5f],
                        [NSNumber numberWithFloat:0.5f],
                        [NSNumber numberWithFloat:1.0f],
                        nil];
     [btn.layer insertSublayer:glossLayer atIndex:0];

希望对你有帮助。

【讨论】：

是的，我知道该怎么做，但这不是我想要的，因为在您的情况下，按钮背景颜色不是 .clear，标签颜色不是渐变，并且按钮没有边界。而且我不知道你为什么要重复几乎相同的渐变层两次？

【解决方案4】：

swift 4 为按钮设置渐变层并为按钮设置标题

let gradient = CAGradientLayer()
        gradient.frame = CGRect(x: 0, y: 0, width: buttonSchedule.frame.width, height: 34)
        gradient.colors = [
            UIColor(red:0.89, green:0.02, blue:0.07, alpha:1).cgColor,
            UIColor(red:0.93, green:0.43, blue:0.1, alpha:1).cgColor ]
        gradient.locations = [0, 1]
        gradient.startPoint = CGPoint.zero
        gradient.endPoint = CGPoint(x: 1.02, y: 1)
        gradient.cornerRadius = 17
        buttonSchedule.layer.insertSublayer(gradient, below: buttonSchedule.titleLabel?.layer)
buttonSchedule.setTitle("Schedule", for: .normal)
        buttonSchedule.contentEdgeInsets = UIEdgeInsets.init(top: 0, left: 20, bottom: 0, right: 0)
        buttonSchedule.contentHorizontalAlignment = .left
        buttonSchedule.setTitleColor(UIColor.white, for: .normal)

【讨论】：