8

Actualmente tengo un TextField (MaterialComponents.MaterialTextFields) con un fondo como la siguiente imagen:

introducir la descripción de la imagen aquí

Al escribir se ve de la siguiente manera

introducir la descripción de la imagen aquí

Lo que necesito es meterle un padding o relleno para que no quede tan pegado a la izquierda ,

Mi caja es de tipo 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)])
    }

Utilizo Swift 4

Con TextField y material me refiero a esto

introducir la descripción de la imagen aquí

utlizando la solucion de Shadros

 self.strPhoneTxt.setLeftPaddingPoints(5)

me genera :

introducir la descripción de la imagen aquí

Si cambio a self.strPhoneTxt.setLeftPaddingPoints(2)

introducir la descripción de la imagen aquí

Sin exito

2
  • Te refieres a MaterialComponents.MaterialTextFields ? @brunososafasttag
    – Jorgesys
    Commented el 20 abr. 2018 a las 22:12
  • @Elenasys edite la pregunta con una imagen ilustrativa estoy recien empezando me imagino que si es eso que dices Jorge / Elena? cambiaste de nombre Commented el 21 abr. 2018 a las 0:52

2 respuestas 2

5
+50

Para hacer un padding te adjunto una extensión del TextField y su forma de usarla:

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

Y para usarla:

txtPassword.setLeftPaddingPoints(25)

Espero que sea lo que buscas.

7
  • SI la respuesta te ha sido de utilidad márcala como válida para ayudar a la comunidad.
    – Shadros
    Commented el 22 abr. 2018 a las 19:54
  • en cuanto lo pruebe te la marco para respuesta , igual dedo para arriba Commented el 22 abr. 2018 a las 20:59
  • por mas que ponga 5 o 25 el relleno es el mismo , este efecto no es el deseado Commented el 23 abr. 2018 a las 14:14
  • El código lo probé antes de publicarlo, y hace un padding a derecha o izquierda, según se elija y aplica los pixels indicados. Prueba a poner la caja de texto un borde negro sólido para que veas lo que ocupa y veras como el padding cambia según el valor que introduzcas
    – Shadros
    Commented el 23 abr. 2018 a las 14:52
  • edite la pregunta @Shadros Commented el 23 abr. 2018 a las 14:59
3

Puedes probar esto, por ejemplo:

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

Con el cual se obtiene el siguiente resultado:

left padding

Puede usar también una función en lugar de configurarla didSet y algo así como:

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
}

y luego llamas eso, viewDidLoadpor ejemplo, así:

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

Otra Manera es:

Una forma personalizada de agregar relleno a lado: "left", "right" o "both" en UITextField.

Paso 1: agregue esta extensión UITextfield

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

Paso 2: Cómo usar

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

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

2
  • 1
    Como dije arriba esto funciona , con la clase de UITextField , pero no con la clase TextField Tipo Materials , arriba deje la configuracion que utilizo Commented el 25 abr. 2018 a las 12:48
  • @BrunoSosaFastTag, comprendo, lamento no poder brindarle una mejor solución Commented el 27 abr. 2018 a las 13:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.