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 .
• 现在为 colors CAGradientLayer的属性(property)你需要设置 CGColor 的数组不是 UIColor 的数组.
• 同时设置startPoint和 endPoint CAGradientLayer的属性(property)制作水平渐变色。
• 当前您正在添加此 GradientLayer在你的self.view而不是它的特定按钮。
• 设置cornerRadius你的按钮基于它的高度而不是一些常量 100同样在设置 cornerRadius 之后你还需要设置 masksToBounds图层属性为 true .
• 现在对于您的 Logo 标签，您不能设置 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
}