清除帶有漸變標題和cornerBorder的UIButton

Question

如何將漸變添加到UIButton標題中，而按鈕背景清晰但角落邊框也是漸變。

我發現如何添加漸變邊框here，但不知道如何使漸變標籤。如果標籤漸變匹配邊框漸變顏色，那將會很棒。

也許我可以用標籤形狀的面具以某種方式創建這種效果？

Answer 1

雖然康斯坦丁答案沒有工作，標題標籤梯度不一定匹配邊框顏色：

所以這是我的解決方案：

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

您可以創建漸變層並添加到相同的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 3

喜的easies方法是從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)