IOs Padding TextField from MaterialComponents.MaterialTextFields

8

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

When writing it looks like this

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

My box is of textField Materials type

@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

using Shadros' solution

 self.strPhoneTxt.setLeftPaddingPoints(5)

generates me:

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

Unsuccessful

    
asked by Bruno Sosa Fast Tag 20.04.2018 в 22:46
source

2 answers

5

To make 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're looking for.

    
answered by 21.04.2018 / 23:35
source
3

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 you get the following result:

You can also use a function instead of setting it didSet 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, viewDidLoadpor example, 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" en 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))
  

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

    
answered by 24.04.2018 в 21:43