UITextField rounded corner - swift - ios

Question

Is there anyway to fix this problem and how to put icon inside UITextField?
This is my code.
func roundCorners(corners:UIRectCorner, radius:CGFloat) {
let bounds = self.bounds
let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let maskLayer = CAShapeLayer()
maskLayer.frame = bounds
maskLayer.path = maskPath.cgPath
self.layer.mask = maskLayer
let frameLayer = CAShapeLayer()
frameLayer.frame = bounds
frameLayer.path = maskPath.cgPath
frameLayer.strokeColor = UIColor.darkGray.cgColor
frameLayer.fillColor = UIColor.init(red: 247, green: 247, blue: 247, alpha: 0).cgColor
self.layer.addSublayer(frameLayer)
}
func roundTopCornersRadius(radius:CGFloat) {
self.roundCorners(corners: [UIRectCorner.topLeft, UIRectCorner.topRight], radius:radius)
}
func roundBottomCornersRadius(radius:CGFloat) {
self.roundCorners(corners: [UIRectCorner.bottomLeft, UIRectCorner.bottomRight], radius:radius)
}
in viewDidLoad()
username.roundTopCornersRadius(radius: 8)
password.roundBottomCornersRadius(radius: 8)
This is what i've got
i want my textField look like this

Answer 1

To add an image, use the leftView property of the UITextField.
Your code for the borders seems fine, but remember to ensure that the layout of the textfield has completed before adding the cornerRadius. You can call view.layoutIfNeeded() to ensure that it has been called. Alternatively (the better solution), you can override layoutSubviews() in your custom textfield and ensure the bounds of the layer is changed when the layout of the textfield changes.
Set the textField's borderStyle to .none.
Swift 3 Code Example
#IBDesignable
class CustomTextField: UITextField {
#IBInspectable
var image: UIImage? {
didSet {
imageView.image = image
}
}
var imageView: UIImageView = UIImageView()
override func awakeFromNib() {
super.awakeFromNib()
self.borderStyle = .none
setupImageView()
}
func roundCorners(corners:UIRectCorner, radius:CGFloat) {
let bounds = self.bounds
let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let maskLayer = CAShapeLayer()
maskLayer.frame = bounds
maskLayer.path = maskPath.cgPath
self.layer.mask = maskLayer
let frameLayer = CAShapeLayer()
frameLayer.frame = bounds
frameLayer.path = maskPath.cgPath
frameLayer.strokeColor = UIColor.darkGray.cgColor
frameLayer.fillColor = UIColor.init(red: 247, green: 247, blue: 247, alpha: 0).cgColor
self.layer.addSublayer(frameLayer)
}
func setupImageView() {
imageView = UIImageView(frame: CGRect(x:5,y:0,width:35,height:25))
imageView.image = image
imageView.contentMode = .scaleAspectFit
self.leftView = imageView
self.leftViewMode = .always
}
func roundTopCornersRadius(radius:CGFloat) {
roundCorners(corners: [UIRectCorner.topLeft, UIRectCorner.topRight], radius:radius)
}
func roundBottomCornersRadius(radius:CGFloat) {
roundCorners(corners: [UIRectCorner.bottomLeft, UIRectCorner.bottomRight], radius:radius)
}
}

Answer 2

You will need to implement IBDesignable View

Answer 3

Hmm this is really custom, not sure if you can do that with native textfield without some work.
Why not doing this instead:
An UIView that will contain your two icons and two textfields next to them :
Just make sure to set no border style to your textfield :
Then set the corner radius of the UIView that contain everything to whatever you want ;) easy mate!