带有圆角和阴影但没有边框的 UITextField

Question

我想创建一个带有自定义圆角和阴影的 UITextField 的子类，这是我尝试过的：

class TextField: UITextField {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
    }
    private func setupUI() {
        font = .systemFont(ofSize: 14)
        textColor = .black         
        layer.cornerRadius = 14.0
        layer.borderWidth = 0.0
        layer.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor
        layer.shadowOpacity = 1.0
        layer.shadowRadius = 24.0
        layer.shadowOffset = CGSize(width: 0, height: 8)
        placeholder = "test"
    }
}

但是，我的文本字段周围没有出现任何阴影：

我尝试使用 clipsToBounds 和 layer.masksToBounds 属性，但没有成功。我该怎么办？

感谢您的帮助

Answer 1

你需要给它一个背景颜色。

而且，如果您真的想要 14 的角半径，您可能需要更改默认插图：

class TextField: UITextField {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
    }
    private func setupUI() {

        // add background color
        backgroundColor = .white
        
        font = .systemFont(ofSize: 14)
        textColor = .black
        layer.cornerRadius = 14.0
        layer.borderWidth = 0.0
        layer.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor
        layer.shadowOpacity = 1.0
        layer.shadowRadius = 24.0
        layer.shadowOffset = CGSize(width: 0, height: 8)
        placeholder = "test"

    }
    
    // adjust as desired
    var textPadding = UIEdgeInsets(
        top: 10,
        left: 20,
        bottom: 10,
        right: 20
    )
    override func textRect(forBounds bounds: CGRect) -> CGRect {
        let rect = super.textRect(forBounds: bounds)
        return rect.inset(by: textPadding)
    }
    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        let rect = super.editingRect(forBounds: bounds)
        return rect.inset(by: textPadding)
    }
}

结果：

Answer 2

我做了一个扩展，用于为 UIView、UIButton、UITextField 等任何视图制作带阴影的圆角

extension UIView
{
    func addCornerEffects(cornerRadius : CGFloat = 0, fillColor : UIColor = .white, shadowColor : UIColor = .clear, shadowOffset : CGSize, shadowOpacity : Float, shadowRadius : CGFloat, borderColor : UIColor, borderWidth : CGFloat)
    {
       self.layer.cornerRadius = cornerRadius
       self.layer.shadowColor = shadowColor.cgColor
       self.layer.shadowOffset = shadowOffset
       self.layer.shadowRadius = shadowRadius
       self.layer.shadowOpacity = shadowOpacity
       self.layer.borderColor = borderColor.cgColor
       self.layer.borderWidth = borderWidth
       self.layer.backgroundColor = nil
       self.layer.backgroundColor = fillColor.cgColor
    }
}

您可以在 ViewController 的 viewDidLoad 中使用它，如下所示

DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) 
{
    self.txtFirstName.addCornerEffects(cornerRadius: 14, fillColor: .white, shadowColor: UIColor.black.withAlphaComponent(0.2), shadowOffset: CGSize(width: 0, height: 8), shadowOpacity: 1.0, shadowRadius: 25.0, borderColor: .clear, borderWidth: 0)
}

这是输出

带有圆角和阴影但没有边框的 UITextField

UITextField with round corners and shadow but without border

border

shadow

uitextfield

uikit

ios