UITextField with round corners and shadow but without border - ios

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

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:

Answer 2

I made one extension for make rounded corners with shadow to any View like UIView,UIButton,UITextField etc.
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
}
}
You can use this in viewDidLoad in your ViewController like as below
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)
}
Here is output