15

How to create some space at the beginning of a text field using swift? I looked at the post

padding of text field

I don't understand what the subclass is doing and how do I use that class to padding.

Thank you very much

Community
  • 1
  • 1
sekaisan
  • 441
  • 3
  • 8
  • 20

5 Answers5

16

https://stackoverflow.com/a/27066764/846780

This answer is very clear,

  1. If you subclass UITextField you can override textRectForBounds, editingRectForBounds and placeholderRectForBounds. These methods just allow you to add a rect (frame) to your textfield's label.

  2. newBounds method create the rect (frame) that will be added to textfield's label.

  3. Finally your padding is: let padding = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5);

  4. Now you have a custom UITextField that has a custom padding.

  5. If you create your new subClass like this class MyTextField: UITextField for example, you only need to change the class of the UITextField that you've added into IB file.

enter image description here

Community
  • 1
  • 1
Klevison
  • 3,342
  • 2
  • 19
  • 32
  • Thank you very much! I forgot to change the class of my textfield to the new subclass. The padding is set to the default padding right now which is (top: 0, left: 5, bottom: 0, right: 5). What if I want to modify the padding without editing the subclass every time? I added this to the viewController "myTextField.textRectForBounds(CGRect(x: 20, y: 0, width: 0, height: 0))" as I want get more padding from the left. But nothing changed. Could you help me with that? – sekaisan Aug 04 '15 at 16:46
15

Complementing the answer of klevison-matias this is the code I use when I want to add a padding to my TextField in Swift 3

//UITextField : override textRect, editingRect 
class LeftPaddedTextField: UITextField {

    override func textRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.origin.x + 10, y: bounds.origin.y, width: bounds.width, height: bounds.height)
    }

    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.origin.x + 10, y: bounds.origin.y, width: bounds.width, height: bounds.height)
    }

}

Then in my TextField I use in this way:

let emailTextField: LeftPaddedTextField = {
    let textField = LeftPaddedTextField()
    textField.placeholder = "Enter email"
    textField.layer.borderColor = UIColor.lightGray.cgColor
    textField.layer.borderWidth = 1
    textField.keyboardType = .emailAddress
    return textField
}()

let passwordTextField: LeftPaddedTextField = {
    let textField = LeftPaddedTextField()
    textField.placeholder = "Enter password"
    textField.layer.borderColor = UIColor.lightGray.cgColor
    textField.layer.borderWidth = 1
    textField.isSecureTextEntry = true
    return textField
}()
Jorge Casariego
  • 21,948
  • 6
  • 90
  • 97
  • 1
    Don't you have to subtract your insets from width of returned CGRect? Otherwise your text will block clearTextIndicator or other views contained in UITextField. – finngu Jun 27 '17 at 15:17
11

Create TextField outlet and use following code. Say "nameTextField" has to add padding.

let paddingView = UIView(frame: CGRectMake(x: 0, y: 0, width: 30, height: 30))
nameTextField.leftView = paddingView
nameTextField.leftViewMode = .always
nameTextField.placeholder = "Enter Name"

You can add Image in paddingView.

swalkner
  • 16,679
  • 31
  • 123
  • 210
Avijit Nagare
  • 8,482
  • 7
  • 39
  • 68
4

Based on @Jorge Casariego's answer I came up with this solution.

You can set PaddedTextField class and the desired padding through the Interface Builder!

class PaddedTextField: UITextField {

    @IBInspectable var padding: CGFloat = 0

    override func textRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.origin.x + padding, y: bounds.origin.y, width: bounds.width - padding * 2, height: bounds.height)
    }

    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.origin.x + padding, y: bounds.origin.y, width: bounds.width - padding * 2, height: bounds.height)
    }
}
nickgzzjr
  • 409
  • 6
  • 9
3

full code sample: make sure your TextField points to RoundedTextField via Story board

import UIKit

class RoundedTextField: UITextField {

    override func awakeFromNib() {
        // add rounded corner
        self.layer.cornerRadius = 15.0
        self.clipsToBounds = false

        super.awakeFromNib()
    }

    // For the padding from the left
    override func textRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.origin.x + 15.0, y: bounds.origin.y, width: bounds.width, height: bounds.height)
    }

    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.origin.x + 15.0, y: bounds.origin.y, width: bounds.width, height: bounds.height)
    }
}
Mr T
  • 1,409
  • 1
  • 17
  • 24