Swift在UITextField中添加图标/图像

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

我试过这个：

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

谢谢。

Answer 1

尝试添加emailField.leftViewMode = UITextFieldViewMode.Always

（默认leftViewMode是Never ）

更新了Swift 4的答案

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

Answer 2

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

在运行时

Answer 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上添加图像时，需要注意一些事项。

• 不要忘记给你在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的源代码

Answer 4

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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