Home / Questions / 157886
Accepted
Bruno Sosa Fast Tag
Asked: 2020-04-21 12:46:26 +0800 CST 2020-04-21 12:46:26 +0800 CST

IOs Padding TextField of MaterialComponents.MaterialTextFields

  • 772

I currently have a TextField ( MaterialComponents.MaterialTextFields) with a background like the following image:

enter image description here

When writing it looks like this

enter image description here

What I need is to put a padding or filling so that it is not so stuck to the left,

My box is of type textField Materials

@IBOutlet weak var txtPassword: TextField!



func setupStyles(){
    self.txtPassword.textColor =  Utils.Color.COLOR_A0856A
    self.txtPassword.dividerNormalColor =  Utils.Color.COLOR_A0856A
    self.txtPassword.dividerActiveColor =  Utils.Color.COLOR_A0856A
    self.txtPassword.attributedPlaceholder =
        NSAttributedString(string: NSLocalizedString("strTxtPassword",comment:""), attributes: [NSAttributedStringKey.foregroundColor : UIColor(red:0.74, green:0.78, blue:0.83, alpha:1.0)])
    }

I use Swift 4

With TextField and material I mean this

enter image description here

using Shadros solution

 self.strPhoneTxt.setLeftPaddingPoints(5)

generates me:

enter image description here

If I change to self.strPhoneTxt.setLeftPaddingPoints(2)

enter image description here

Unsuccessfully

swift

2 Answers

  1. Best Answer

    To do a padding I enclose an extension of the TextField and its way of using it:

    import Foundation
import UIKit

extension UITextField {
    func setLeftPaddingPoints(_ amount:CGFloat){
        let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: amount, height: self.frame.size.height))
        self.leftView = paddingView
        self.leftViewMode = .always
    }
    func setRightPaddingPoints(_ amount:CGFloat) {
        let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: amount, height: self.frame.size.height))
        self.rightView = paddingView
        self.rightViewMode = .always
    }
}

    And to use it:

    txtPassword.setLeftPaddingPoints(25)

    I hope it's what you want.

    • 5

  2. You can try this, for example:

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

    With which the following result is obtained:

    left padding

    You can also use a function instead of setting didSetit and 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, viewDidLoadporexample, like this:

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

    Another way is:

    A custom way to add padding to side: "left", "right"or "both"in 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.  Para agregar relleno izquierdo
yourTextFieldName.addPadding(.left(20)) 

// 2.  Para agregar relleno Derecho
yourTextFieldName.addPadding(.right(20))

// 3. Para agregar relleno izquierdo y derecho (ambos)
yourTextFieldName.addPadding(.both(20))

    SO Source: How do you create textfield padding in Swift 4?

    • 3