Swift - 使用渐变

Question

我遇到了一个涉及为标签和按钮设置渐变的问题。我知道这个问题被问了很多，但似乎没有答案能解决我的问题。这是我想要的屏幕：

这是我的代码：

    @IBOutlet weak var loginButton: UIButton!
    @IBOutlet weak var signUpButton: UIButton!
    @IBOutlet weak var logoLabel: UILabel!


    override func viewDidLoad() {
        super.viewDidLoad()

        loginButton.backgroundColor = UIColor.clear
        let loginButtonGradient = createBlueGreenGradient(from: loginButton.bounds)
        self.view.layer.insertSublayer(loginButtonGradient, at: 0)

        signUpButton.backgroundColor = UIColor.clear
        let signUpButtonGradient = createBlueGreenGradient(from: signUpButton.bounds)
        self.view.layer.insertSublayer(signUpButtonGradient, at: 0)

        logoLabel.backgroundColor = UIColor.clear
        let logoLabelGradient = createBlueGreenGradient(from: logoLabel.bounds)
        self.view.layer.insertSublayer(logoLabelGradient, at: 0)

        loginButton.layer.cornerRadius = 100
        signUpButton.layer.cornerRadius = 100
    }

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

    func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{
        let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1)
        let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1)
        let gradientColors: [UIColor] = [topColor, bottomColor]

        let gradientLocations: [NSNumber] = [0.0, 1.0]

        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations
        gradientLayer.frame = bounds

        return gradientLayer
    }

这是错误的结果：

有人请帮助我。我不确定我做错了什么。

Answer 1

你的代码有很多问题。

• 用Float 数字而不是Int 划分颜色意味着它应该是255.0 而不是255。
• 现在对于CAGradientLayer 的colors 属性，您需要设置CGColor 的数组而不是UIColor 的数组。
• 同时设置CAGradientLayer的startPoint和endPoint属性来制作水平渐变颜色。
• 目前，您将在 self.view 中添加此 GradientLayer，而不是其特定按钮。
• 在设置cornerRadius 之后，您还需要将层的masksToBounds 属性设置为true。
• 现在对于您的徽标标签，您不能直接将textColor 设置为Gradient 颜色您需要做的是在UIImage 上绘制所需的渐变，然后使用该UIImage 为您的Label 对此进行检查 SO reference。

---

进行所有这些更改后，您的代码应该是这样的。

func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{
    let topColor = UIColor(red: 84/255.0, green: 183/255.0, blue: 211/255.0, alpha: 1).cgColor
    let bottomColor = UIColor(red: 119/255.0, green: 202/255.0, blue: 151/255.0, alpha: 1).cgColor
    let gradientColors = [topColor, bottomColor]

    let gradientLocations: [NSNumber] = [0.0, 1.0]
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientColors
    gradientLayer.locations = gradientLocations
    //Set startPoint and endPoint property also
    gradientLayer.startPoint = CGPoint(x: 0, y: 0)
    gradientLayer.endPoint = CGPoint(x: 1, y: 0)
    gradientLayer.frame = bounds
    return gradientLayer
}

现在以这种方式将gradientLayer 设置为viewDidLoad。

override func viewDidLoad() {
    super.viewDidLoad()

    let loginButtonGradient = createBlueGreenGradient(from: loginButton.bounds)
    self.loginButton.layer.insertSublayer(loginButtonGradient, at: 0)

    let signUpButtonGradient = createBlueGreenGradient(from: signUpButton.bounds)
    self.signUpButton.layer.insertSublayer(signUpButtonGradient, at: 0)

    loginButton.layer.cornerRadius = loginButton.frame.size.height / 2
    loginButton.layer.masksToBounds = true
    signUpButton.layer.cornerRadius = signUpButton.frame.size.height / 2
    signUpButton.layer.masksToBounds = true
}

Answer 2

哦，天哪，我也遇到了同样的问题，但只是在玩弄它。这是因为您没有添加.cgcolor。例如：

 let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1).cgColor
 let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1).cgColor
 let gradientColors = [topColor, bottomColor]

让我知道它是否有效。

Answer 3

你的方法是这样的：

func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{
    let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1).cgColor
    let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1).cgColor
    let gradientColors = [topColor, bottomColor]

    let gradientLocations: [NSNumber] = [0.0, 1.0]

    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientColors
    gradientLayer.locations = gradientLocations
    gradientLayer.frame = bounds

    return gradientLayer
  }