Question

如何将渐变添加到UIButton标题，同时按钮背景清晰，但角落边框也是渐变。

我找到了如何添加渐变边框here，但不知道如何制作渐变标签。如果标签渐变与边框渐变颜色匹配会很棒。

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

Answer 1

虽然Constantin答案确实有效，但标题标签渐变不一定与边框颜色匹配：

所以这是我的解决方案：

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

结果：

Answer 2

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

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;

}

for Horizontal gradient use CGPoint(x:size.width, y:0)
用于垂直渐变使用CGPoint(x:0, y:size.height)

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

希望它有所帮助。

Answer 4

迅速4为Button设置渐变层并为button设置标题

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)

使用渐变标题和cornerBorder清除UIButton

4 个答案: