如何为代码创建的UITextField添加渐变背景色？

我太懂你这种挫败感了——折腾了两种扩展方案，UITextField的背景还是顽固的白色，完全看不到渐变效果。其实这是两个iOS开发里的常见小坑在搞鬼，咱们一步步把它解决掉：

问题根源 #

1. 默认背景遮挡：UITextField自带了一个默认的背景视图（UITextFieldBackgroundView），它会直接盖在你添加的渐变层上面，导致你看不到渐变效果。
2. Frame时机错误：在初始化textField的阶段，它的bounds还是CGRect.zero，这时候给渐变层设置gradient.frame = self.bounds，相当于给渐变层设置了一个空的尺寸，自然显示不出来。

正确的实现方案 #

这里给你两种可靠的解决思路，按需选择：

方案1：自定义UITextField子类（推荐）

这种方式最稳定，能自动适配布局变化：

class GradientTextField: UITextField {
    private let gradientLayer = CAGradientLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGradient()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGradient()
    }
    
    private func setupGradient() {
        // 先清除默认背景，避免遮挡
        self.backgroundColor = .clear
        // 配置渐变参数
        gradientLayer.colors = [UIColor.blue.cgColor, UIColor.purple.cgColor]
        gradientLayer.locations = [0.0, 1.0]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
        // 把渐变层插入到最底层
        self.layer.insertSublayer(gradientLayer, at: 0)
    }
    
    // 布局更新时同步渐变层的尺寸
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = self.bounds
    }
}

使用时直接创建子类实例即可：

private let emailTextField: GradientTextField = {
    let tf = GradientTextField()
    CommonTextField.commonProps(tf: tf, placeholder: "Email")
    return tf
}()

方案2：优化UITextField扩展（快速修改）

如果不想自定义子类，也可以修改你的扩展，解决遮挡和frame问题：

extension UITextField {
    func setGradient(startColor: UIColor, endColor: UIColor) {
        // 移除默认背景
        self.backgroundColor = .clear
        // 先清除已有的渐变层，避免重复添加
        self.layer.sublayers?.filter { $0 is CAGradientLayer }.forEach { $0.removeFromSuperlayer() }
        
        let gradient = 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)
    }
}

注意！调用这个方法要等textField布局完成后，比如在viewDidLayoutSubviews里：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    emailTextField.setGradient(startColor: .blue, endColor: .purple)
}

额外小提示 #

• 如果你的textField需要圆角，记得给渐变层也设置cornerRadius，同时开启textField的clipsToBounds = true，这样渐变会跟着圆角显示。
• 不要在初始化textField时直接调用渐变方法，此时textField的尺寸还没确定，会导致渐变层显示异常。

内容的提问来源于stack exchange，提问作者H.Jass