我想在UITextField中添加图标/图片。该图标/图片应位于占位符左侧。
我尝试过这个:
var imageView = UIImageView();
var image = UIImage(named: "email.png");
imageView.image = image;
emailField.leftView = imageView;
谢谢。
我想在UITextField中添加图标/图片。该图标/图片应位于占位符左侧。
我尝试过这个:
var imageView = UIImageView();
var image = UIImage(named: "email.png");
imageView.image = image;
emailField.leftView = imageView;
谢谢。
Sahil有一个很好的答案,我想将其扩展为@IBDesignable,以便开发人员可以在Storyboard中向他们的UITextFields添加图像。
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])
}
}
这里正在发生什么?
这个可设计的部件允许你:
注释
尝试添加emailField.leftViewMode = UITextFieldViewMode.Always
(默认的leftViewMode
是Never
)
Swift 4的更新答案
emailField.leftViewMode = UITextFieldViewMode.always
emailField.leftViewMode = .always
imageView1.frame = CGRect(x: 5, y: 0, width: userName.frame.height, height: userName.frame.height) view.addSubview(imageView1)
。 - Sashi我只是想在这里添加一些内容:
如果你想在 UITextField
的左侧添加图片,使用 UITextField
的 leftView
属性。
注意: 不要忘记设置左侧视图模式 leftViewMode
为 UITextFieldViewMode.Always
,右侧则为 rightViewMode
,默认值为 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
指定一个框架。
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
如果您的图像背景是白色,则图像将不会在UITextField
上显示。
如果您想将图像添加到特定位置,则需要将ImageView
作为UITextField
的子视图添加。
Swift 3.0更新
@Mark Moeykens美化了它并将其设置为@IBDesignable。
我进行了修改并添加了一些新功能(添加底部线和右边图像的填充)。
注意:如果您想在右侧添加图像,则可以在界面构建器中的“语义”选项中选择Force Right-to-Left
选项(但对于右侧图像填充,直到您覆盖rightViewRect
方法才能起作用)。
我对此进行了修改,并可以从此处下载源代码ImageTextField
受之前的帖子启发,我们可以创建一个扩展程序。
我们可以将图像放在右侧或左侧。
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)
}
享受 :)
为了创建填充,我喜欢将图像放在容器视图内。一旦您对图标位置感到满意,就可以删除背景颜色。
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
如何在Swift 3.0中将图像添加到文本框左侧
textField.leftView = UIImageView(image: "small-calendar")
textField.leftView?.frame = CGRect(x: 0, y: 5, width: 20 , height:20)
textField.leftViewMode = .always
Swift 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
}
}
结果
针对苹果公司的这种疯狂行为。
这里也许是最"清晰"、最简单的方法:
首先,您必须正确地移动文本。
注意这个关键的QA:https://dev59.com/t18e5IYBdhLWcg3wyM0r#27066764
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
}
}
}
这似乎是最清晰、最可靠的方法。
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")
输出 :)
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
}
emailField.leftView = UIImageView(image: UIImage(named: "search"))
可以翻译为:将邮箱输入框的左侧视图设置为一张搜索图片,该图片加载自名为"search"的图片资源。 - tspentzas@IBDesignable
,我们可以以优雅的方式完成此操作,就像这个例子中所示: https://dev59.com/Qa3la4cB1Zd3GeqPP6NG#51841433 - Rizwan