ios Swift 在 UITextField 中添加图标/图像

Swift add icon/image in UITextField

提问by informatiker

I would like to add icon/image in UITextField. The icon/image should be left to placeholder.

我想在 UITextField 中添加图标/图像。图标/图像应留给占位符。

I tried this:

我试过这个：

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

Thanks.

谢谢。

回答by Mark Moeykens

Sahil has a great answer and I wanted to take that and expand it into an @IBDesignable so developers can add images to their UITextFields on the Storyboard.

Sahil 有一个很好的答案，我想将其扩展为 @IBDesignable，以便开发人员可以将图像添加到故事板上的 UITextFields 中。

Swift 4.2

斯威夫特 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])
    }
}

What is happening here?

这里发生了什么？

This designable allows you to:

此设计允许您：

• Set an image on the left
• Add padding between the left edge of the UITextField and the image
• Set a color so the image and the Placeholder text matches

• 在左侧设置图像
• 在 UITextField 的左边缘和图像之间添加填充
• 设置颜色，使图像和占位符文本匹配

Notes

笔记

• For image color to change you have to follow that note in the comment in the code
• The image color will not change in the Storyboard. You have to run the project to see the color in the Simulator/device.

• 要更改图像颜色，您必须遵循代码注释中的注释
• 故事板中的图像颜色不会改变。您必须运行该项目才能查看模拟器/设备中的颜色。

Designable in the Storyboard

可在故事板中设计

At Runtime

在运行时

回答by Markus

Try adding emailField.leftViewMode = UITextFieldViewMode.Always

尝试添加 emailField.leftViewMode = UITextFieldViewMode.Always

(Default leftViewModeis Never)

（默认leftViewMode为Never）

Updated Answer for Swift 4

Swift 4 的更新答案

emailField.leftViewMode = UITextFieldViewMode.always

emailField.leftViewMode = .always

回答by Sahil

I Just want to add some more thing here:

我只想在这里添加更多内容：

If you want to add the image on UITextFieldon left side use leftViewproperty of UITextField

如果您想在添加图像UITextField上的左侧使用leftView的财产UITextField

NOTE:Don't forget to set leftViewModeto UITextFieldViewMode.Alwaysand for right rightViewModeto UITextFieldViewMode.Always anddefault is UITextFieldViewModeNever

注意：不要忘了一套leftViewMode以UITextFieldViewMode.Always和为右rightViewMode至UITextFieldViewMode.Always and默认为UITextFieldViewModeNever

for e.g

例如

For adding an image on left side

用于在左侧添加图像

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

For adding an image on right side

用于在右侧添加图像

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

NOTE:some things you need to take care while adding an image on UITextFieldeither on the left side or right side.

注意：UITextField在左侧或右侧添加图像时需要注意一些事项。

• Don't forget to give a frame of ImageViewwhich are you going to add on UITextField

  let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))

• if your image background is white then image won't visible on UITextField

• if you want to add an image to the specific position you need to add ImageViewas the subview of UITextField.

• 不要忘记给出ImageView你要添加的框架UITextField

  让 imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))

• 如果您的图像背景为白色，则图像将不可见 UITextField

• 如果要将图像添加到需要添加ImageView为UITextField.

Update For Swift 3.0

Swift 3.0 更新

@Mark Moeykens Beautifully expended it and make it @IBDesignable.

@Mark Moeykens 精美地使用它并使其成为@IBDesignable。

I modified and added some more features (add Bottom Line and padding for right image) in this.

我在此修改并添加了更多功能（为右侧图像添加底线和填充）。

NOTEif you want to add an image on the right side you can select the Force Right-to-Leftoption in semanticin interface builder(But for right image padding won't work until you will override rightViewRect method ).

注意，如果您想在右侧添加图像，您可以在界面构建器中选择该Force Right-to-Left选项semantic（但对于右图像填充将不起作用，直到您覆盖 rightViewRect 方法）。

I have modified this and can download the source from here ImageTextField

我已经修改了这个，可以从这里下载源ImageTextField

回答by Insou

Another way, inspired from previous posts to make an extension.

另一种方式，受以前帖子的启发进行扩展。

We can put the image on the right or on the left

我们可以将图像放在右侧或左侧

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
}

}

Use :

用 ：

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

Enjoy :)

享受 ：）

回答by S Yoshida

To create padding, I like to place the image inside of a container view. You can remove the background color once you are happy with the icon placement.

为了创建填充，我喜欢将图像放在容器视图中。一旦您对图标位置感到满意，您就可以删除背景颜色。

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

回答by Maulik Patel

for Swift 3.0 add image on leftside of textField

对于 Swift 3.0，在 textField 的左侧添加图像

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

回答by Gurjinder Singh

Swift 5

斯威夫特 5

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

I have created extension

我已经创建了扩展

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

Result

结果

回答by Sudhi 9135

Another way to set placeholder icon & set padding to TextField.

另一种设置占位符图标并将填充设置为 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
}

回答by Abhishek Biswas

I created a simple IBDesignable. Use it however u like. Just make your UITextField confirm to this class.

我创建了一个简单的 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)
    }

}

回答by jethava yogesh

Swift 3.1

斯威夫特 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
        }
    }

}