CODEWITHSUNDEEP
iosswift
sekaisan
sekaisan

Reputation: 441

set the padding of a text field using swift in xcode

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

Upvotes: 15

Views: 44674

Answers (5)

Mr T
Mr T

Reputation: 1499

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

Upvotes: 3

nickgzzjr
nickgzzjr

Reputation: 419

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

Upvotes: 4

Avijit Nagare
Avijit Nagare

Reputation: 8782

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.

Upvotes: 11

Jorge Casariego
Jorge Casariego

Reputation: 22212

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

Upvotes: 15

Klevison
Klevison

Reputation: 3484

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

Upvotes: 16

Related Questions