Установить градиент фона на кнопку в Swift

Я понятия не имею, как установить градиент фона на кнопке (не делая градиент фона изображением). Это так отличается от Android.

вот класс, который я должен определить возвращаемую градиентную схему:

import UIKit

extension CAGradientLayer {

    func backgroundGradientColor() -> CAGradientLayer {
        let topColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(51/255.0), alpha: 1)
        let bottomColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(255/255.0), alpha: 1)

        let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor]
        let gradientLocations: [Float] = [0.0, 1.0]

        let gradientLayer: CAGradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations

        return gradientLayer

    }
}

Я могу использовать это, чтобы установить фон на весь мой взгляд следующие:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let background = CAGradientLayer().backgroundGradientColor()
        background.frame = self.view.bounds
        self.view.layer.insertSublayer(background, atIndex: 0)
    }
    //...
}

но как я могу получить доступ к представлению кнопки и вставить подслой или что-то в этом роде? Я гуглил пару часов и не могу найти ничего полезного. Я совсем запутался.

10
button ios linear-gradients swift

5 ответов

ваш код работает нормально. Вы просто должны помнить, чтобы установить кадр градиента каждый раз. Лучше просто сделать категорию градиента также установить рамку представления для вас.

таким образом, вы не забываете, и это применяется нормально.

extension UIView {
    func applyGradient(colours: [UIColor]) -> Void {
        self.applyGradient(colours, locations: nil)
    }

    func applyGradient(colours: [UIColor], locations: [NSNumber]?) -> Void {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = colours.map { .CGColor }
        gradient.locations = locations
        self.layer.insertSublayer(gradient, atIndex: 0)
    }
}

class ViewController: UIViewController {

    @IBOutlet weak var btn: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.btn.titleLabel?.textColor = UIColor.whiteColor()

        self.btn.applyGradient([UIColor.yellowColor(), UIColor.blueColor()])
        self.view.applyGradient([UIColor.yellowColor(), UIColor.blueColor(), UIColor.redColor()], locations: [0.0, 0.5, 1.0])
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

кнопки вид. Вы применяете градиенты к нему так же, как и к любому другому представлению.

34

здесь ниже вы можете найти решение для Swift3 и немного расширенный (помощник ориентация):

typealias GradientPoints = (startPoint: CGPoint, endPoint: CGPoint)

enum GradientOrientation {
  case topRightBottomLeft
  case topLeftBottomRight
  case horizontal
  case vertical

  var startPoint : CGPoint {
    return points.startPoint
  }

  var endPoint : CGPoint {
    return points.endPoint
  }

  var points : GradientPoints {
    get {
      switch(self) {
      case .topRightBottomLeft:
        return (CGPoint(x: 0.0,y: 1.0), CGPoint(x: 1.0,y: 0.0))
      case .topLeftBottomRight:
        return (CGPoint(x: 0.0,y: 0.0), CGPoint(x: 1,y: 1))
      case .horizontal:
        return (CGPoint(x: 0.0,y: 0.5), CGPoint(x: 1.0,y: 0.5))
      case .vertical:
        return (CGPoint(x: 0.0,y: 0.0), CGPoint(x: 0.0,y: 1.0))
      }
    }
  }
}

extension UIView {

  func applyGradient(withColours colours: [UIColor], locations: [NSNumber]? = nil) -> Void {
    let gradient = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = colours.map { .cgColor }
    gradient.locations = locations
    self.layer.insertSublayer(gradient, at: 0)
  }

  func applyGradient(withColours colours: [UIColor], gradientOrientation orientation: GradientOrientation) -> Void {
    let gradient = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = colours.map { .cgColor }
    gradient.startPoint = orientation.startPoint
    gradient.endPoint = orientation.endPoint
    self.layer.insertSublayer(gradient, at: 0)
  }
}
10

@Zeb ответ отличный, но просто очистить его и сделать его немного более быстрым. Вычисляемые свойства только для чтения должны избегать использования get, а возврат Void является избыточным:

typealias GradientPoints = (startPoint: CGPoint, endPoint: CGPoint)

enum GradientOrientation {
  case topRightBottomLeft
  case topLeftBottomRight
  case horizontal
  case vertical

var startPoint: CGPoint {
    return points.startPoint
}

var endPoint: CGPoint {
    return points.endPoint
}

var points: GradientPoints {
    switch self {
    case .topRightBottomLeft:
        return (CGPoint.init(x: 0.0, y: 1.0), CGPoint.init(x: 1.0, y: 0.0))
    case .topLeftBottomRight:
        return (CGPoint.init(x: 0.0, y: 0.0), CGPoint.init(x: 1, y: 1))
    case .horizontal:
        return (CGPoint.init(x: 0.0, y: 0.5), CGPoint.init(x: 1.0, y: 0.5))
    case .vertical:
        return (CGPoint.init(x: 0.0, y: 0.0), CGPoint.init(x: 0.0, y: 1.0))
    }
  }
}

extension UIView {

func applyGradient(withColours colours: [UIColor], locations: [NSNumber]? = nil) {
    let gradient: CAGradientLayer = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = colours.map { .cgColor }
    gradient.locations = locations
    self.layer.insertSublayer(gradient, at: 0)
}

func applyGradient(withColours colours: [UIColor], gradientOrientation orientation: GradientOrientation) {
    let gradient: CAGradientLayer = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = colours.map { .cgColor }
    gradient.startPoint = orientation.startPoint
    gradient.endPoint = orientation.endPoint
    self.layer.insertSublayer(gradient, at: 0)
  }
}
4

Я пробовал все из них, это моя кнопка init внутри viewdidload

let button = UIButton()
    button.setTitle("Alper", for: .normal)
    button.layer.borderColor = UIColor.white.cgColor
    button.layer.borderWidth = 1
    view.addSubview(button)
    button.anchor(top: nil, left: nil, bottom: logo.topAnchor, right: nil, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, height: 50, width: 100)
    let gradientx = CAGradientLayer()
    gradientx.colors = [UIColor.blue,UIColor.red]
    gradientx.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientx.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradientx.frame = button.bounds
    button.layer.insertSublayer(gradientx, at: 0)

якорь является расширением, поэтому это не имеет значения градиент.

1

для Swift 2.0, чтобы дать цвет градиентов UIButton

let gradient: CAGradientLayer = CAGradientLayer()

gradient.colors = [(UIColor(red: 59.0/255.0, green: 187.0/255.0, blue: 182.0/255.0, alpha: 1.00).CGColor), (UIColor(red: 57.0/255.0, green: 174.0/255.0, blue: 236.0/255.0, alpha: 1.00).CGColor)]
gradient.locations = [0.0 , 1.0]

gradient.startPoint = CGPoint(x: 0.0, y: 1.0)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
gradient.frame = CGRect(x: 0.0, y: 0.0, width: btn.frame.size.width, height: btn.frame.size.height)
btn.layer.insertSublayer(gradient, atIndex: 0)
1