CODEWITHSUNDEEP
iosswiftuitextfield
NinjaDeveloper
NinjaDeveloper

Reputation: 1712

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

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:

how border look like

Image from the MockAUp what I want to achieve:

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

enter image description here

Upvotes: 1

Views: 3195

Answers (3)

Mohammad Yunus
Mohammad Yunus

Reputation: 214

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

Upvotes: 1

DonMag
DonMag

Reputation: 77462

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:

enter image description here

Upvotes: 1

DenFav
DenFav

Reputation: 2811

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

Upvotes: 0

Related Questions