Swift 在 UITextField 中添加图标/图像

Posted 2023-02-23

【中文标题】Swift 在 UITextField 中添加图标/图像

【英文标题】：Swift add icon/image in UITextField

【发布时间】：2015-01-12 13:50:46

【问题描述】：

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

我试过这个：

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

谢谢。

【问题讨论】：

你不小心添加了分号 :D

emailField.leftView = UIImageView(image: UIImage(named: "search")) :)

使用@IBDesignable，我们可以以优雅的方式做到这一点，如本例所示：***.com/a/51841433/8238512

【参考方案1】：

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

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

这里发生了什么？

这个设计允许你：

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

备注

要更改图像颜色，您必须按照代码注释中的说明进行操作 故事板中的图像颜色不会改变。您必须运行项目才能在模拟器/设备中看到颜色。

可在情节提要中设计

在运行时

【讨论】：

在 imageView.contentMode = .AspectFit 中添加，以避免图像大小调整。

非常感谢您的精彩帖子！我已对其进行了修改，使其也具有 RTL 选项。此处提供代码：pastebin.com/7CCm6NEB

干得好，伙计们！我后来也做了同样的事情。哈哈

图片和文字之间有什么填充？

最佳答案。

【参考方案2】：

尝试添加emailField.leftViewMode = UITextFieldViewMode.Always

（默认leftViewMode 是Never）

Swift 4

的更新答案

emailField.leftViewMode = UITextFieldViewMode.always

emailField.leftViewMode = .always

【讨论】：

嗯，它对我有用，你用更新后的值（UITextFieldViewMode.Always）试过了吗？你知道是什么没用吗？ （例如它编译了吗？）

这是我在'ViewWillAppear'部分的全部代码：'var imageView = UIImageView(); var image = UIImage(named: "email.png"); imageView.image = 图像； emailTextField.leftView = imageView; emailTextField.leftViewMode = UITextFieldViewMode.Always

@informatiker 好的，您确定您的连接正确吗，例如，如果您设置emailTextField 的背景颜色，它真的会改变吗？你确定图像在那里吗？例如，创建另一个 UIImageView 并在其中加载 image 以验证它是否有效。

好的，谢谢。问题是图标是白色的，在白色背景上不可见。

我继续我的搜索，终于让它工作了，我错过了为图像视图设置框架。看起来我们需要在将图像添加到 uitextfield 之前在图像上设置框架。像这样imageView1.frame = CGRect(x: 5, y: 0, width: userName.frame.height, height: userName.frame.height) view.addSubview(imageView1)

【参考方案3】：

我只是想在这里添加一些东西：

如果您想在左侧的UITextField 添加图像，请使用UITextField 的leftView 属性

注意： 不要忘记将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上添加它

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

如果您的图片背景为白色，则图片在 UITextField 上不可见

如果要将图片添加到特定位置，则需要添加ImageView 作为UITextField 的子视图。

Swift 3.0 更新

@Mark Moeykens 巧妙地使用它并使其成为 @IBDesignable。

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

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

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

【讨论】：

如何在扩展中添加它并在我的视图控制器中调用？你能推荐我吗

非常简单！只需在 UIViewController 扩展中创建函数并在调用该函数时传递 imagename 和 textfield ref。

extension UIViewController func addLeftImage(imageName: String, textField: UITextField) textField.leftViewMode = UITextFieldViewMode.Always let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20 , height: 20)) 让 image = UIImage(named: imageName) imageView.image = image textField.leftView = imageView 并称它为 self.addLeftImage("imganame", textField: yourtextfield)

我尝试更改图标位置。但未使用此代码更改

【参考方案4】：

另一种方式，灵感来自以前的帖子进行扩展。

我们可以把图片放在右边或左边

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)

享受:)

【讨论】：

你成就了我的一天，我自定义了“view.backgroundColor”和“imageView.tintColor”以使其完全可定制。非常感谢您的回答 xD

这太棒了

这是最好最简单的答案

【参考方案5】：

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

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

【讨论】：

谢谢。用颜色很好的解释。

最智能的方式，因为它在 uitextfield 上无需扩展即可缩短时间

【参考方案6】：

对于 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

【参考方案7】：

斯威夫特 5

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

我已经创建了扩展

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
  

结果

【参考方案8】：

2020 - 合理的解决方案

关于 Apple 的这种疯狂。

这也许是“最清晰”、最简单的方法：

首先，您必须正确移动文本。

请注意这个关键的 QA：https://***.com/a/27066764/294884

class TidyTextField: UITextField 
    
    @IBInspectable var leftImage: UIImage? = nil
    @IBInspectable var leftPadding: CGFloat = 0
    @IBInspectable var gapPadding: CGFloat = 0
    
    private var textPadding: UIEdgeInsets 
        let p: CGFloat = leftPadding + gapPadding + (leftView?.frame.width ?? 0)
        return UIEdgeInsets(top: 0, left: p, bottom: 0, right: 5)
    
    
    override open func textRect(forBounds bounds: CGRect) -> CGRect 
        return bounds.inset(by: textPadding)
    
    
    override open func placeholderRect(forBounds bounds: CGRect) -> CGRect 
        return bounds.inset(by: textPadding)
    
    
    override open func editingRect(forBounds bounds: CGRect) -> CGRect 
        return bounds.inset(by: textPadding)
    
    

继续，我们现在必须制作并移动左侧图像：

    override func leftViewRect(forBounds bounds: CGRect) -> CGRect 
        var r = super.leftViewRect(forBounds: bounds)
        r.origin.x += leftPadding
        return r
    
    
    override func layoutSubviews() 
        super.layoutSubviews()
        setup()
    
    
    private func setup() 
        if let image = leftImage 
            if leftView != nil  return  // critical!
            
            let im = UIImageView()
            im.contentMode = .scaleAspectFit
            im.image = image
            
            leftViewMode = UITextField.ViewMode.always
            leftView = im
            
         else 
            leftViewMode = UITextField.ViewMode.never
            leftView = nil
        
    

这似乎是最清晰、最可靠的方法。

【参考方案9】：

使用 Swift4 中的扩展，我们可以轻松地将图像放在右侧或左侧，并与 TextField 进行填充。

extension UITextField 

    //MARK:- Set Image on the right of text fields

  func setupRightImage(imageName:String)
    let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
    imageView.image = UIImage(named: imageName)
    let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
    imageContainerView.addSubview(imageView)
    rightView = imageContainerView
    rightViewMode = .always
    self.tintColor = .lightGray


 //MARK:- Set Image on left of text fields

    func setupLeftImage(imageName:String)
       let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
       imageView.image = UIImage(named: imageName)
       let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
       imageContainerView.addSubview(imageView)
       leftView = imageContainerView
       leftViewMode = .always
       self.tintColor = .lightGray
     

  

使用代码作为左图设置：-

   self.password_text_field.setupLeftImage(imageName: "unlock")

输出:)

【讨论】：

我认为最好的方法。不需要故事板。简单而简短。干得好！

出色的工作......

【参考方案10】：

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

【参考方案11】：

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

【参考方案12】：

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

【讨论】：

请添加用法和我需要传递帧参数的内容？

在此函数中的“框架”参数用于左视图或右视图

【参考方案13】：

您可以将此函数放在您的全局文件或您的类之上，以便您可以在整个应用程序中访问它。 完成此过程后，您可以根据应用程序的要求调用此函数。

        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

【讨论】：

欢迎来到 ***，有没有什么方法可以与这段代码一起提供一些解释？仅包含代码的答案往往会因为质量低下而被删除。另请查看本指南以在帮助部分进行回答：***.com/help/how-to-answer

【参考方案14】：

您为什么不采用最简单的方法。在大多数情况下，您想添加像 font awesome 之类的图标...只需使用 font awesome 库，就可以像这样轻松地将图标添加到文本字段：

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

您需要先安装这个 swift 库： https://github.com/Vaberer/Font-Awesome-Swift

【讨论】：

为什么要添加整个库才能获得一个字形？

【参考方案15】：

这是 Mark Moeykens 答案的修改版本，在图像和文本之间添加了填充，并在有人需要时可调整图像大小。

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

【参考方案16】：

斯威夫特 5

类似于@Markus，但在 Swift 5 中：

emailTextField.leftViewMode = UITextField.ViewMode.always
emailTextField.leftViewMode = .always

【参考方案17】：

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

Results

【参考方案18】：

我不认为基于框架的解决方案是一个好方法，因为在某些情况下它在 iPad 上不可用。 理想的解决方案是将 imageView 的约束添加到文本字段右视图，但这并不容易。除非需要，否则右视图似乎不在文本字段视图层次结构中，因此您需要执行以下操作：

    private let countryTextField: UITextField = 
        let countryTextField = UITextField()
        countryTextField.translatesAutoresizingMaskIntoConstraints = false
        countryTextField.rightViewMode = .always
        
        let button = UIButton(type: .system)
        button.setImage(UIImage(named: "yourImageName"), for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        
        countryTextField.rightView = button
        countryTextField.setNeedsLayout() //Add rightView in textField hierarchy
        countryTextField.layoutIfNeeded() //Add rightView in textField hierarchy
        
        button.topAnchor.constraint(equalTo: countryTextField.topAnchor).isActive = true
        button.bottomAnchor.constraint(equalTo: countryTextField.bottomAnchor).isActive = true
        button.widthAnchor.constraint(equalTo: countryTextField.heightAnchor).isActive = true
        
        return countryTextField
    ()

任何设备上的结果都是：

另外，我的解决方案适用于文本字段左视图。

【参考方案19】：

let image = UIImage(systemName: "envelope")
let textField = UITextField()
textField.leftView = UIImageView(image: image)
textField.leftView?.frame = CGRect(x: 5, y: 5, width: 20 , height:20)
textField.leftViewMode = .always

【讨论】：

请解释一下你的答案，***.com/help/how-to-answer

【参考方案20】：

这是为我做的。在自定义/可重用类中。对实际文本和左视图图标/图像的黑白空间有很大帮助

func currencyLeftVeiw(image litery: UIImage) 
        self.leftView = UIView(frame: CGRect(x: 10, y: 0, width: 40, height: 40))
        self.leftViewMode = .always
        let leftViewItSelf = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
        leftViewItSelf.image = litery
        leftView?.addSubview(leftViewItSelf)