How to add with to border UITextField Swift when when create Rounded corners - ios

Question

I want to create a rounded corner "Oval shape" UITextField. I have a problem with the inner border is not rounded and give strange log to the UITextField when the background of the UITextField same as the view
How border looks:
Image from the MockAUp what I want to achieve:
Swift code:
txtfEmail.layer.cornerRadius = 26
txtfEmail.clipsToBounds = true
txtfEmail.attributedPlaceholder = NSAttributedString(string: "Email",
attributes: [NSAttributedString.Key.foregroundColor: UIColor.white.withAlphaComponent(0.5)])
email UITextfield inspectere

Answer 1

One approach would be to create a custom UIView class with an embedded text field.
Here's an example, using #IBInspectable and #IBDesignable to let you see it during Storyboard design:
import UIKit
#IBDesignable
class RoundedTextField: UIView {
#IBInspectable var placeholder: String = "" {
didSet {
textField.attributedPlaceholder = NSAttributedString(string: placeholder,
attributes: [NSAttributedString.Key.foregroundColor: UIColor.white.withAlphaComponent(0.5)])
}
}
let textField: UITextField = {
let v = UITextField()
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
override func prepareForInterfaceBuilder() {
commonInit()
}
func commonInit() -> Void {
layer.borderColor = UIColor.white.cgColor
layer.borderWidth = 2
layer.masksToBounds = true
addSubview(textField)
NSLayoutConstraint.activate([
textField.topAnchor.constraint(equalTo: topAnchor, constant: 12.0),
textField.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -12.0),
textField.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20.0),
textField.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20.0),
])
}
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = bounds.size.height * 0.5
}
}
Result in Storyboard / Interface Builder:

Answer 2

You should create the rounded border like this:
txtfEmail.layer.cornerRadius = txtfEmail.height / 2
txtfEmail.layer.borderWidth = 1
txtfEmail.layer.borderColor = UIColor.black.cgColor
Looks like the border is set to the view under the text field

Answer 3

try this it works for me
open storyboard
drag and drop textfield
ctrl click and create an outlet in view controller and name it lets say emailfield
then write this code
#iboultet weak var emailfield: uitextfield!{
didset{
emailfield.layer.masktobounds = true
emailfield.layer.cornerradius = 26
emailfield.layer.borderwidth = 1
emailfield.backgroundcolor = whatever color you want