Pan Pipatpunlop Pan Pipatpunlop - 1 month ago 31
Swift Question

UITextFild rounded corner - swift

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

image

i want my textField look like this

image

Answer

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

}

enter image description here