ios - UITextField with round corners and shadow but without border

Question

I want to create a subclass of UITextField with custom rounded corners and a shadow around, here is what I tried:

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"
    }
}

However, there isn't any shadow that appears around my text field:

I tried playing with clipsToBounds and layer.masksToBounds properties, but with no success. What should I do?

Thank you for your help

question from:https://stackoverflow.com/questions/65945117/uitextfield-with-round-corners-and-shadow-but-without-border

Answer 1

You need to give it a background color.

And, if you really want a corner radius of 14, you'll probably want to change the default insets:

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)
    }
}

Result: