How do you create textfield padding in Swift 4?

Question

I have a textfield called

nameTextField

I rounded the corners with the

nameTexfield.layer.cornerRadius = 5

Now, the text within the textfield is touching the left side. I want to create padding between the text and border. Every post I find uses cgRect, but Swift no longer supports that. Please provide the correct code if you can figure it out and please explain the answer if you can. I appreciate the help! I also need to know where to put the code if there is any.

Solution 1

As @the4kman says, Swift does support CGRect but the syntax may have changed.

You can try this for instance:

@IBOutlet weak var nameTextField: UITextField! {
    didSet {
        nameTextField.layer.cornerRadius =  5
        nameTextField.layer.borderColor = UIColor.black.cgColor
        nameTextField.layer.borderWidth = 1
        let leftView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 2.0))
        nameTextField.leftView = leftView
        nameTextField.leftViewMode = .always
    }
}

If I do that, I get this fine result

Hope that helps.

Update

You ask for a function instead of setting it in didSet and sure, thats possible, something like:

func addPaddingAndBorder(to textfield: UITextField) {
    textfield.layer.cornerRadius =  5
    textfield.layer.borderColor = UIColor.black.cgColor
    textfield.layer.borderWidth = 1
    let leftView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 2.0))
    textfield.leftView = leftView
    textfield.leftViewMode = .always
}

and then you' call that in viewDidLoad for instance like so:

override func viewDidLoad() {
    super.viewDidLoad()
    addPaddingAndBorder(to: nameTextField)
}

Solution 2

Customized way to add padding in "left", "right" or "both" side od UITextField.

Step 1:- Add this UITextfield extension

extension UITextField {

    enum PaddingSide {
        case left(CGFloat)
        case right(CGFloat)
        case both(CGFloat)
    }

    func addPadding(_ padding: PaddingSide) {

        self.leftViewMode = .always
        self.layer.masksToBounds = true


        switch padding {

        case .left(let spacing):
            let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: spacing, height: self.frame.height))
            self.leftView = paddingView
            self.rightViewMode = .always

        case .right(let spacing):
            let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: spacing, height: self.frame.height))
            self.rightView = paddingView
            self.rightViewMode = .always

        case .both(let spacing):
            let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: spacing, height: self.frame.height))
            // left
            self.leftView = paddingView
            self.leftViewMode = .always
            // right
            self.rightView = paddingView
            self.rightViewMode = .always
        }
    }        
}

Step 2: How to use

// 1.  To add left padding
yourTextFieldName.addPadding(.left(20)) 

// 2.  To add right padding
yourTextFieldName.addPadding(.right(20))

// 3. To add left & right padding both
yourTextFieldName.addPadding(.both(20))

Solution 3

Better to subclass the textview than to add a left view incase you are planning to add an image as a left view.

class UITextFieldPadding: UITextField {

    let padding = UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 0)

    override open func textRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: padding)
    }

    override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: padding)
    }

    override open func editingRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: padding)
    }
}

Comments

[Levi K]

It worked! I appreciate the code. For some reason it just wasn't accepting CGRect for that other specific code, but now it is working.

[Levi K]

just for fun, is there a way to make this a function lets say called indent and run it on a textfield in the viewdidrun

[Levi K]

thanks, let me know if you can answer that previous comment about the function

[pbodsk]

@LeviK just did :)

[Levi K]

That is extremely helpful. I appreciate your help and all of the additional support!

[Levi K]

Thanks for the answer. I appreciate the help, but I think I am going to stick with the first response because it is a little more straightforward. Thanks! It is cool how you made the function have the ability to customize the padding, I might use that in the future.

[cvb]

No, this is the better answer.

[atereshkov]

Wow, really easy to set up and use. Thanks! Working like a charm in Swift 4 and iOS 11.4.

[M.R]

What about top and bottom?

[Bhuvan Bhatt]

Thats not default in a textfield I have to update this answer for that but you can increase the height of the textfield for that, that will work.