it-swarm.com.de

Hinzufügen eines Symbols/Bildes in UITextField

Ich möchte ein Icon/Bild in UITextField hinzufügen. Das Symbol/Bild sollte Platzhalter haben.

enter image description here

Ich habe das versucht:

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

Vielen Dank.

66
informatiker

Versuchen Sie, emailField.leftViewMode = UITextFieldViewMode.Always hinzuzufügen.

(Default leftViewMode ist Never)

Aktualisierte Antwort für Swift 4

emailField.leftViewMode = UITextFieldViewMode.always

emailField.leftViewMode = .always
79
Markus

Sahil hat eine großartige Antwort, und ich wollte das nehmen und zu einem @IBDesignable erweitern, sodass Entwickler Bilder zu ihren UITextFields im Storyboard hinzufügen können.

Schnell 4.2

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 = UITextField.ViewMode.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 = UITextField.ViewMode.never
            leftView = nil
        }

        // Placeholder text color
        attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedString.Key.foregroundColor: color])
    }
}

Was passiert hier?

Dieses Design ermöglicht es Ihnen:

  • Stellen Sie links ein Bild ein
  • Fügen Sie eine Auffüllung zwischen dem linken Rand des UITextField und dem Bild hinzu
  • Legen Sie eine Farbe so fest, dass Bild und Platzhaltertext übereinstimmen

Anmerkungen

  • Damit sich die Bildfarbe ändern kann, müssen Sie dieser Anmerkung im Kommentar im Code folgen
  • Die Bildfarbe ändert sich im Storyboard nicht. Sie müssen das Projekt ausführen, um die Farbe im Simulator/Gerät anzuzeigen.

Designable im Storyboard Storyboard

Zur Laufzeit Runtime

91
Mark Moeykens

Ich möchte hier nur noch etwas hinzufügen:

Wenn Sie das Bild in UITextField auf der linken Seite einfügen möchten, verwenden Sie die Eigenschaft leftView von UITextField.

HINWEIS: Vergessen Sie nicht, leftViewMode auf UITextFieldViewMode.Always und rechts rightViewMode bis UITextFieldViewMode.Always anddefault ist UITextFieldViewModeNever

für z.B.

Zum Hinzufügen eines Bildes auf der linken Seite

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

Zum Hinzufügen eines Bildes auf der rechten Seite

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

HINWEIS: Einige Dinge, die Sie beim Hinzufügen eines Bildes auf UITextField entweder auf der linken oder rechten Seite beachten müssen.

  • Vergiss nicht, einen Rahmen von ImageView anzugeben, den du am UITextField hinzufügen willst.

    let imageView = UIImageView (Rahmen: CGRect (x: 0, y: 0, Breite: 20, Höhe: 20))

  • wenn Ihr Bildhintergrund weiß ist, wird das Bild auf UITextField nicht angezeigt.

  • wenn Sie ein Bild zu einer bestimmten Position hinzufügen möchten, müssen Sie ImageView als Unteransicht von UITextField hinzufügen.

Update für Swift 3.0

@ Mark Moeykens Schön erweitert und machen es @ IBDesignable .

Ich habe einige weitere Funktionen (Fazit und Auffüllung für das rechte Bild) geändert und hinzugefügt.

[~ # ~] note [~ # ~] Wenn Sie ein Bild auf der rechten Seite hinzufügen möchten, können Sie das Force Right-to-Left Option in semantic im Interface Builder (aber für das rechte Bild funktioniert das Auffüllen erst, wenn Sie die rightViewRect-Methode überschreiben).

enter image description here

Ich habe dies geändert und kann den Quellcode hier herunterladen ImageTextField

enter image description here

45
Sahil

 UITextField with image (left or right)

Ein anderer Weg, inspiriert von vorherigen Beiträgen, um eine Erweiterung zu machen.

Wir können das Bild rechts oder links platzieren

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
}

}

Benutzen : 

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

Genießen :)

8
Insou

fügen Sie für Swift 3.0 ein Bild auf der linken Seite von textField hinzu

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

Ich habe ein einfaches IBDesignable erstellt. Verwenden Sie es jedoch wie Sie möchten. Lassen Sie einfach Ihr UITextField für diese Klasse bestätigen.

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

}
3
Abhishek Biswas

 enter image description here
.__ Eine andere Möglichkeit, das Platzhaltersymbol und die Auffüllung auf TextField zu setzen.

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
}
2
Sudhi 9135

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

}
2
jethava yogesh

Sie können diese Funktion in Ihre globale Datei oder über Ihre Klasse setzen, damit Sie in der gesamten Anwendung darauf zugreifen können. Nach dieser Prozedur können Sie diese Funktion entsprechend Ihrer Anforderung in der Anwendung aufrufen.

        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
1
Dhaval Solanki

Warum gehen Sie nicht für den einfachsten Ansatz? In den meisten Fällen möchten Sie Symbole wie "font awesome" hinzufügen. Verwenden Sie einfach die Bibliothek "font awesome", und es ist so einfach, einem Textfeld ein Symbol hinzuzufügen:

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

Sie müssen zuerst diese Swift-Bibliothek installieren: https://github.com/Vaberer/Font-Awesome-Swift

1
Alex Zanfir

Um das Auffüllen zu erstellen, platziere ich das Bild gerne in einer Containeransicht. Sie können die Hintergrundfarbe entfernen, sobald Sie mit der Platzierung des Symbols zufrieden sind. 

 enter image description here

let imageView = UIImageView(frame: CGRect(x: 8.0, y: 8.0, width: 24.0, height: 24.0))
let image = UIImage(named: "my_icon")
imageView.image = image
imageView.contentMode = .scaleAspectFit
imageView.backgroundColor = UIColor.red

let view = UIView(frame: CGRect(x: 0, y: 0, width: 32, height: 40))
view.addSubview(imageView)
view.backgroundColor = .green
textField.leftViewMode = UITextFieldViewMode.always
textField.leftView = view
1
S Yoshida

SwiftUI

RoundedRectangle(cornerRadius: 50)
                .frame(height: 40)
                .colorInvert() // sets the background white
            .padding()
            .shadow(radius: 12) // adds shadow to the rectangle
                .overlay(
                    HStack(spacing: 20){

                        Image(systemName: "person")
                            .resizable()
                            .aspectRatio(contentMode: .fit)

                        TextField("Username ", text: $username)
                            .font(Font.custom("Arial", size: 25))


                            .font(.title)
                    }
                    .padding()
                    .padding()
                )

Ergebnisse

0
Roberto Font

Dies ist eine modifizierte Version von Mark Moeykens 'Antwort mit zusätzlicher Auffüllung zwischen Bild und Text und einer anpassbaren Bildgröße, falls jemand sie benötigt.

Swift 4

    import UIKit

    @IBDesignable
    class TextFieldWithImage: UITextField {

        override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
            return super.leftViewRect(forBounds: bounds)
        }

        @IBInspectable var leftImage: UIImage? {
            didSet {
                updateView()
            }
        }
        @IBInspectable var leftPadding: CGFloat = 0 {
            didSet {
                updateView()
            }
        }
        @IBInspectable var rightPadding: CGFloat = 0 {
            didSet {
                updateView()
            }
        }
        @IBInspectable var imageMaxHeight: CGFloat = 0 {
            didSet {
                updateView()
            }
        }

        @IBInspectable var color: UIColor = UIColor.lightGray {
            didSet {
                updateView()
            }
        }

        func updateView() {
            if let image = leftImage {
                leftViewMode = UITextField.ViewMode.always

                let containerSize = calculateContainerViewSize(for: image)
                let containerView = UIView(frame: CGRect(x: 0, y: 0, width: containerSize.width, height: containerSize.height))

                let imageView = UIImageView(frame: .zero)
                containerView.addSubview(imageView)
                setImageViewConstraints(imageView, in: containerView)

                setImageViewProperties(imageView, image: image)

                leftView = containerView
            } else {
                leftViewMode = UITextField.ViewMode.never
                leftView = nil
            }

            attributedPlaceholder = NSAttributedString(string: placeholder != nil ? placeholder! : "",
                    attributes: [NSAttributedString.Key.foregroundColor: color])
        }

        private func calculateContainerViewSize(for image: UIImage) -> CGSize {
            let imageRatio = image.size.height / image.size.width
            let adjustedImageMaxHeight = imageMaxHeight > self.frame.height ? self.frame.height : imageMaxHeight

            var imageSize = CGSize()
            if image.size.height > adjustedImageMaxHeight {
                imageSize.height = adjustedImageMaxHeight
                imageSize.width = imageSize.height / imageRatio
            }

            let paddingWidth = leftPadding + rightPadding

            let containerSize = CGSize(width: imageSize.width + paddingWidth, height: imageSize.height)
            return containerSize
        }

        private func setImageViewConstraints(_ imageView: UIImageView, in containerView: UIView) {
            imageView.translatesAutoresizingMaskIntoConstraints = false
            imageView.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
            imageView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
            imageView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -rightPadding).isActive = true
            imageView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: leftPadding).isActive = true
        }

        private func setImageViewProperties(_ imageView: UIImageView, image: UIImage) {
            imageView.contentMode = .scaleAspectFit
            imageView.image = image
            imageView.tintColor = color
        }
    }
0
l.sypniewski

Swift 5

Ähnlich wie @Markus, aber in Swift 5:

emailTextField.leftViewMode = UITextField.ViewMode.always
emailTextField.leftViewMode = .always
0
Jerry Chong

Swift 5

@IBOutlet weak var paswd: UITextField! {
    didSet{
      paswd.setLeftView(image: UIImage.init(named: "password")!)
      paswd.tintColor = .darkGray
      paswd.isSecureTextEntry = true
    }   
 }

Ich habe eine Erweiterung erstellt

extension UITextField {
  func setLeftView(image: UIImage) {
    let iconView = UIImageView(frame: CGRect(x: 10, y: 10, width: 25, height: 25)) // set your Own size
    iconView.image = image
    let iconContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 35, height: 45))
    iconContainerView.addSubview(iconView)
    leftView = iconContainerView
    leftViewMode = .always
    self.tintColor = .lightGray
  }
}

Ergebnis

enter image description here

0
GSK