Swift在UITextField中添加图标/图像

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

在这里输入图像说明

我试过这个:

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

谢谢。

尝试添加emailField.leftViewMode = UITextFieldViewMode.Always

(默认leftViewModeNever

更新了Swift 4的答案

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

Sahil有一个很好的答案,我想把它扩展到一个@IBDesignable,以便开发人员可以添加图像到他们的故事板上的UITextFields。

Swift 3

 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.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:[NSForegroundColorAttributeName: color]) } } 

这里发生了什么?

这个devise可以让你:

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

笔记

  • 为了改变图像的颜色,你必须在代码的注释中遵循这个注释
  • 故事板中的图像颜色不会改变。 您必须运行该项目以查看模拟器/设备中的颜色。

在故事板中可devise 故事板

在运行时 运行

我只想在这里添加更多的东西:

如果要在左侧的UITextField上添加图像,请使用UITextField leftView属性

注意: 不要忘记将leftViewMode设置为UITextFieldViewMode.Always并将右侧的rightViewModeUITextFieldViewMode.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上添加图像时,需要注意一些事项。

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

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

  • 如果你的图像背景是白色的,那么图像将不会在UITextField可见

  • 如果要在特定位置添加图像,则需要将ImageView添加为UITextField子视图。

更新为Swift 3.0

@Mark Moeykens精美地花费它,使@IBDesignable

我修改并添加了一些更多的function(添加底线和正确的图像填充)在这个。

注意,如果你想在右侧添加图像,你可以在界面生成器中selectsemantic上的从右Force Right-to-Left选项(但对于右图像填充将无法正常工作,直到你将覆盖rightViewRect方法)。

在这里输入图像说明

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

在这里输入图像说明

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

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

你为什么不去最简单的方法。 对于大多数情况下,你想添加像字体真棒的图标…只要使用字体真棒图书馆,它会很容易地添加一个图标到文本字段,如下所示:

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

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

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