Swift добавить значок / изображение в UITextField

Question

Swift добавить значок / изображение в UITextField

Я хотел бы добавить значок / изображение в UITextField. Значок / изображение должно быть оставлено для заполнения.

Я попытался это:

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

спасибо.

10 57

ios swift image-processing uitextfielddelegate login

10 ответов:

У Sahil есть отличный ответ, и я хотел бы взять его и развернуть в @IBDesignable, чтобы разработчики могли добавлять изображения в свои UITextFields на раскадровке.

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])
    }
}
что здесь происходит?

эта конструкция позволяет:

установите изображение слева

добавить отступ между левым краем поля UITextField и изображением

установите цвет так изображение и текст заполнителя соответствует

Примечания

для изменения цвета изображения вы должны следовать этой заметке в комментарии в коде

цвет изображения не изменится в раскадровке. Вы должны запустить проект, чтобы увидеть цвет в симуляторе/устройстве.

Designable в раскадровке

At Время работы

83

я просто хочу добавить еще кое-что здесь:

если вы хотите добавить изображение на UITextField на левой стороне использовать leftView собственность UITextField

Примечание:не забудьте установить leftViewMode до UITextFieldViewMode.Always и справа rightViewMode до UITextFieldViewMode.Always andпо умолчанию UITextFieldViewModeNever

для электронной.г

для добавления изображения на левой стороне
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
для добавления изображения справа сбоку
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
Примечание: некоторые вещи, которые вы должны позаботиться при добавлении изображения на UITextField либо с левой стороны, либо с правой стороны.

не забудьте дать рамку ImageView, которые вы собираетесь добавить на UITextField

дайте графическое представление = помощью UIImageView(каркас: CGRect на(Х: 0, г: 0, ширина: 20, высота: 20))

если ваш фон изображения белый, то изображение не будет видно на UITextField

если вы хотите добавить изображение в определенную позицию, вам нужно добавить ImageView как подвид UITextField.

Обновление Для Swift 3.0

@Марк Moeykens красиво израсходованы его и сделать его @IBDesignable.

я изменил и добавил еще несколько функций (добавить нижнюю строку и отступ для правого изображения) в этом.

Примечание если вы хотите чтобы добавить изображение с правой стороны, вы можете выбрать на semantic в interface builder (но для правильного заполнения изображения не будет работать, пока вы не переопределите метод rightViewRect ).

я изменил это и могу скачать источник отсюда ImageTextField

37

для Swift 3.0 добавить изображение на левой стороне текстового поля
textField.leftView = UIImageView(image: "small-calendar"))
textField.leftView?.frame = CGRect(x: 0, y: 5, width: 20 , height:20)
textField.leftViewMode = .always

4

Я создал простой IBDesignable. Используйте его, как вам нравится. Просто сделайте ваш UITextField подтвердить этот класс.

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

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

}

2

Другой способ установить значок заполнителя и установить заполнение в текстовое поле.

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

еще один способ, вдохновленный предыдущими сообщениями, чтобы сделать расширение.

мы можем поместить изображение справа или слева

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
}

}

использование :

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

наслаждайтесь :)

2

почему бы тебе не пойти на самый простой подход. В большинстве случаев вы хотите добавить значки, такие как шрифт awesome... Просто используйте Font awesome library, и было бы так же легко добавить значок в текстовое поле, как это:
myTextField.setLeftViewFAIcon(icon: .FAPlus, leftViewMode: .always, textColor: .red, backgroundColor: .clear, size: nil)
вам нужно будет сначала установить эту библиотеку swift: https://github.com/Vaberer/Font-Awesome-Swift

1

вы можете поместить эту функцию в свой глобальный файл или над своим классом, чтобы вы могли получить к нему доступ во всем приложении. После этой процедуры вы можете вызвать эту функцию в соответствии с вашим требованием в приложении.
        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

Markus · Accepted Answer · 2017-10-30 08:43:00

попробуйте добавить emailField.leftViewMode = UITextFieldViewMode.Always

(по умолчанию leftViewMode и Never)

обновленный ответ для Swift 4
emailField.leftViewMode = UITextFieldViewMode.always

emailField.leftViewMode = .always