Swift agregar icono / imagen en UITextField

Me gustaría agregar un icono / imagen en UITextField. El ícono / imagen debe dejarse en el marcador de posición.

enter image description here

Intenté esto:

var imageView = UIImageView(); var image = UIImage(named: "email.png"); imageView.image = image; emailField.leftView = imageView; 

Gracias.

Intente agregar emailField.leftViewMode = UITextFieldViewMode.Always

(El leftViewMode predeterminado es Never )

Respuesta actualizada para Swift 4

 emailField.leftViewMode = UITextFieldViewMode.always emailField.leftViewMode = .always 

Sahil tiene una gran respuesta y quería tomar eso y expandirlo en un @IBDesignable para que los desarrolladores puedan agregar imágenes a sus UITextFields en el Storyboard.

Swift 4

 import UIKit @IBDesignable class DesignableUITextField: UITextField { // Provides left padding for images override func leftViewRect(forBounds bounds: CGRect) -> CGRect { var textRect = super.leftViewRect(forBounds: bounds) textRect.origin.x += leftPadding return textRect } @IBInspectable var leftImage: UIImage? { didSet { updateView() } } @IBInspectable var leftPadding: CGFloat = 0 @IBInspectable var color: UIColor = UIColor.lightGray { didSet { updateView() } } func updateView() { if let image = leftImage { leftViewMode = UITextFieldViewMode.always let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20)) imageView.contentMode = .scaleAspectFit imageView.image = image // Note: In order for your image to use the tint color, you have to select the image in the Assets.xcassets and change the "Render As" property to "Template Image". imageView.tintColor = color leftView = imageView } else { leftViewMode = UITextFieldViewMode.never leftView = nil } // Placeholder text color attributedPlaceholder = NSAttributedString(string: placeholder != nil ? placeholder! : "", attributes:[NSAttributedStringKey.foregroundColor: color]) } } 

¿Que está sucediendo aquí?

Este designable le permite:

  • Establecer una imagen a la izquierda
  • Agregue relleno entre el borde izquierdo del UITextField y la imagen
  • Establezca un color para que la imagen y el texto del marcador de posición coincidan

Notas

  • Para que el color de la imagen cambie, debes seguir esa nota en el comentario en el código
  • El color de la imagen no cambiará en el guión gráfico. Tienes que ejecutar el proyecto para ver el color en el simulador / dispositivo.

Designable en el Storyboard Storyboard

En tiempo de ejecución Tiempo de ejecución

Solo quiero agregar algo más aquí:

Si desea agregar la imagen en UITextField en el lado izquierdo, use la propiedad UITextField de UITextField

NOTA: No olvide configurar leftViewMode en UITextFieldViewMode.Always y para rightViewMode en UITextFieldViewMode.Always and default es UITextFieldViewModeNever

por ejemplo

Para agregar una imagen en el lado izquierdo

 textField.leftViewMode = UITextFieldViewMode.Always let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20)) let image = UIImage(named: imageName) imageView.image = image textField.leftView = imageView 

Para agregar una imagen en el lado derecho

 textField.rightViewMode = UITextFieldViewMode.Always let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20)) let image = UIImage(named: imageName) imageView.image = image textField.rightView = imageView 

NOTA: algunas cosas que debe tener cuidado al agregar una imagen en UITextField en el lado izquierdo o derecho.

  • No olvides dar un marco de ImageView que vas a agregar en UITextField

    let imageView = UIImageView (frame: CGRect (x: 0, y: 0, ancho: 20, alto: 20))

  • si el fondo de su imagen es blanco, la imagen no será visible en UITextField

  • si desea agregar una imagen a la posición específica, necesita agregar ImageView como subvista de UITextField .

Actualización para Swift 3.0

@Mark Moeykens Lo gasta maravillosamente y lo convierte en @IBDesignable .

Modifiqué y agregué algunas características más (agregue Bottom Line y relleno para la imagen de la derecha) en esto.

NOTA: si desea agregar una imagen en el lado derecho, puede seleccionar la opción Force Right-to-Left en semantic en el constructor de interfaz (pero para el relleno correcto de la imagen no funcionará hasta que anule el método correcto ViewView).

enter image description here

Lo he modificado y puedo descargar la fuente desde aquí ImageTextField

enter image description here

para Swift 3.0 agregue la imagen en el lado izquierdo de textField

 textField.leftView = UIImageView(image: "small-calendar")) textField.leftView?.frame = CGRect(x: 0, y: 5, width: 20 , height:20) textField.leftViewMode = .always 

Creé un IBDesignable simple. Úsalo como quieras. Simplemente haga que su UITextField confirme a esta clase.

 import UIKit @IBDesignable class RoundTextField : UITextField { @IBInspectable var cornerRadius : CGFloat = 0{ didSet{ layer.cornerRadius = cornerRadius layer.masksToBounds = cornerRadius > 0 } } @IBInspectable var borderWidth : CGFloat = 0 { didSet{ layer.borderWidth = borderWidth } } @IBInspectable var borderColor : UIColor? { didSet { layer.borderColor = borderColor?.cgColor } } @IBInspectable var bgColor : UIColor? { didSet { backgroundColor = bgColor } } @IBInspectable var leftImage : UIImage? { didSet { if let image = leftImage{ leftViewMode = .always let imageView = UIImageView(frame: CGRect(x: 20, y: 0, width: 20, height: 20)) imageView.image = image imageView.tintColor = tintColor let view = UIView(frame : CGRect(x: 0, y: 0, width: 25, height: 20)) view.addSubview(imageView) leftView = view }else { leftViewMode = .never } } } @IBInspectable var placeholderColor : UIColor? { didSet { let rawString = attributedPlaceholder?.string != nil ? attributedPlaceholder!.string : "" let str = NSAttributedString(string: rawString, attributes: [NSForegroundColorAttributeName : placeholderColor!]) attributedPlaceholder = str } } override func textRect(forBounds bounds: CGRect) -> CGRect { return bounds.insetBy(dx: 50, dy: 5) } override func editingRect(forBounds bounds: CGRect) -> CGRect { return bounds.insetBy(dx: 50, dy: 5) } } 

Swift 3.1

 extension UITextField { enum Direction { case Left case Right } func AddImage(direction:Direction,imageName:String,Frame:CGRect,backgroundColor:UIColor) { let View = UIView(frame: Frame) View.backgroundColor = backgroundColor let imageView = UIImageView(frame: Frame) imageView.image = UIImage(named: imageName) View.addSubview(imageView) if Direction.Left == direction { self.leftViewMode = .always self.leftView = View } else { self.rightViewMode = .always self.rightView = View } } } 

UITextField con imagen (izquierda o derecha)

Otra forma, inspirada en publicaciones anteriores para hacer una extensión.

Podemos poner la imagen a la derecha o a la izquierda

 extension UITextField { enum Direction { case Left case Right } // add image to textfield func withImage(direction: Direction, image: UIImage, colorSeparator: UIColor, colorBorder: UIColor){ let mainView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 45)) mainView.layer.cornerRadius = 5 let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 45)) view.backgroundColor = .white view.clipsToBounds = true view.layer.cornerRadius = 5 view.layer.borderWidth = CGFloat(0.5) view.layer.borderColor = colorBorder.cgColor mainView.addSubview(view) let imageView = UIImageView(image: image) imageView.contentMode = .scaleAspectFit imageView.frame = CGRect(x: 12.0, y: 10.0, width: 24.0, height: 24.0) view.addSubview(imageView) let seperatorView = UIView() seperatorView.backgroundColor = colorSeparator mainView.addSubview(seperatorView) if(Direction.Left == direction){ // image left seperatorView.frame = CGRect(x: 45, y: 0, width: 5, height: 45) self.leftViewMode = .always self.leftView = mainView } else { // image right seperatorView.frame = CGRect(x: 0, y: 0, width: 5, height: 45) self.rightViewMode = .always self.rightView = mainView } self.layer.borderColor = colorBorder.cgColor self.layer.borderWidth = CGFloat(0.5) self.layer.cornerRadius = 5 } 

}

Utilizar :

 if let myImage = UIImage(named: "my_image"){ textfield.withImage(direction: .Left, image: myImage, colorSeparator: UIColor.orange, colorBorder: UIColor.black) } 

Disfruta 🙂

¿Por qué no vas por el enfoque más fácil? Para la mayoría de los casos, desea agregar íconos como fonts increíbles … Solo use la biblioteca font awesome y sería tan fácil agregar un ícono a un campo de texto como este:

 myTextField.setLeftViewFAIcon(icon: .FAPlus, leftViewMode: .always, textColor: .red, backgroundColor: .clear, size: nil) 

Debería instalar primero esta biblioteca rápida: https://github.com/Vaberer/Font-Awesome-Swift

Puede poner esta función en su archivo global o por encima de su clase para que pueda acceder a ella en toda la aplicación. Después de este procedimiento, puede llamar a esta función según su requerimiento en la aplicación.

  func SetLeftSIDEImage(TextField: UITextField, ImageName: String){ let leftImageView = UIImageView() leftImageView.contentMode = .scaleAspectFit let leftView = UIView() leftView.frame = CGRect(x: 20, y: 0, width: 30, height: 20) leftImageView.frame = CGRect(x: 13, y: 0, width: 15, height: 20) TextField.leftViewMode = .always TextField.leftView = leftView let image = UIImage(named: ImageName)?.withRenderingMode(.alwaysTemplate) leftImageView.image = image leftImageView.tintColor = UIColor(red: 106/255, green: 79/255, blue: 131/255, alpha: 1.0) leftImageView.tintColorDidChange() leftView.addSubview(leftImageView) } SetLeftSIDEImage(TextField: Your_textField, ImageName: “YourImageName”) // call function 

enter image description here
Otra forma de establecer el icono del marcador de posición y establecer el relleno en TextField.

 let userIcon = UIImage(named: "ImageName") setPaddingWithImage(image: userIcon, textField: txtUsername) func setPaddingWithImage(image: UIImage, textField: UITextField){ let imageView = UIImageView(image: image) imageView.contentMode = .scaleAspectFit let view = UIView(frame: CGRect(x: 0, y: 0, width: 60, height: 50)) imageView.frame = CGRect(x: 13.0, y: 13.0, width: 24.0, height: 24.0) //For Setting extra padding other than Icon. let seperatorView = UIView(frame: CGRect(x: 50, y: 0, width: 10, height: 50)) seperatorview.backgroundColor = UIColor(red: 80/255, green: 89/255, blue: 94/255, alpha: 1) view.addSubview(seperatorView) textField.leftViewMode = .always view.addSubview(imageView) view.backgroundColor = .darkGray textField.leftViewMode = UITextFieldViewMode.always textField.leftView = view }