Question

我正在尝试创建一个具有渐变背景的UITextField，在两种颜色之间移动。

我想基本上创造这种效果 - uitextfield example

我正在以编程方式构建我的视图，而不是使用故事板。

我试图在UIView周围添加基于其他答案的扩展，但是这对我的文本字段没有影响。

背景仍为白色。

extension UIView {      
    func setGradient(startColor:UIColor,endColor:UIColor) {
        let gradient:CAGradientLayer = CAGradientLayer()
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.locations = [0.0 , 1.0]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
        gradient.frame = self.bounds
        self.layer.insertSublayer(gradient, at: 0)
    }
}

然后我可以这样申请..

private let emailTextField: UITextField = {
    let  tf = UITextField()
    CommonTextField.commonProps(tf: tf, placeholder: "Email")
    tf.setGradient(startColor: .blue, endColor: .purple)
    return tf
}()

然而它什么也没做。我已尝试在UITextField上进行扩展，但无法取得任何结果。

修改

我更新了我的扩展方法，如下所示

extension UITextField {
    func setGradient(startColor: UIColor, endColor: UIColor) {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.locations = [0.0 , 1.0]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
        gradient.frame = self.bounds
        self.layer.addSublayer(gradient)
    }
}

我的文字字段正在创建如下

private let emailTextField: UITextField = {
    let  tf = UITextField()
    CommonTextField.commonProps(tf: tf, placeholder: "Email")
    tf.setGradient(startColor: .blue, endColor: .purple)
    return tf
}()

Answer 1

扩展应该是textfield而不是UIView，请注意使用 self.layer.addSublayer 而不是 self.layer.insertSublayer 或者

 self.layer.insertSublayer(gradient, at: 1)

/////

extension UITextField {      
  func setGradient(startColor:UIColor,endColor:UIColor) {
    let gradient:CAGradientLayer = CAGradientLayer()
    gradient.colors = [startColor.cgColor, endColor.cgColor]
    gradient.locations = [0.0 , 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
    gradient.frame = self.bounds
    self.layer.addSublayer(gradient) 
  }

}

使用

self.textField.setGradient(startColor:UIColor.red, endColor: UIColor.blue)

UITextField渐变背景颜色

1 个答案: