Swift 在 UITextField 中添加 icon/image
Swift add icon/image in UITextField
我想在 UITextField 中添加 icon/image。 icon/image 应留给占位符。
我试过这个：
var imageView = UIImageView();
var image = UIImage(named: "email.png");
imageView.image = image;
emailField.leftView = imageView;
谢谢。
尝试添加 emailField.leftViewMode = UITextFieldViewMode.Always
（默认 leftViewMode 为 Never）
Swift 4
的更新答案
emailField.leftViewMode = UITextFieldViewMode.always
emailField.leftViewMode = .always
我只想在这里添加一些东西：
如果要在左侧 UITextField 上添加图像，请使用 leftView 属性 of UITextField
注意： 不要忘记将 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
上加什么
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
如果您的图片背景为白色，则图片在 UITextField
如果要在特定位置添加图片需要添加ImageView作为UITextField的子视图。
更新 Swift 3.0
@Mark Moeykens 漂亮地扩展并制作了它 @IBDesignable.
我在此修改并添加了更多功能（为右图添加底线和填充）。
注意 如果您想在右侧添加图像，您可以 select 界面生成器 semantic 中的 Force Right-to-Left 选项（但是对于右图像填充将不起作用，直到您覆盖 rightViewRect 方法）。
我已经修改了这个，可以从这里下载源码ImageTextField
Sahil 有一个很好的答案，我想把它扩展到 @IBDesignable 中，这样开发人员就可以将图像添加到 Storyboard 上的 UITextFields 中。
Swift 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 的左边缘和图像之间添加填充
- 设置颜色使图像和占位符文本匹配
备注
- 要更改图像颜色，您必须遵循代码注释中的注释
- 故事板中的图像颜色不会改变。您必须 运行 项目才能在 Simulator/device.
中看到颜色
可在故事板中设计
在运行时
你为什么不选择最简单的方法。在大多数情况下，您想添加图标，例如 font awesome...只需使用 font awesome 库，将图标添加到文本字段就像这样：
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
}
}
}
for 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
我创建了一个简单的 IBDesignable。随心所欲地使用它。只需让您的 UITextField 确认此 class.
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)
}
}
您可以将此函数放在您的全局文件中或放在您的 class 之上，这样您就可以在整个应用程序中访问它。
完成此过程后，您可以在应用程序中根据您的要求调用此功能。
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
另一种设置占位符图标并将填充设置为 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
}
另一种方式，借鉴之前的帖子做一个扩展。
我们可以把图片放在右边或左边
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)
}
尽情享受吧:)
这是 Mark Moeykens 回答的修改版本，在图像和文本之间添加了填充，并且可以调整图像大小以备不时之需。
Swift 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
}
}
为了创建填充，我喜欢将图像放在容器视图中。一旦您对图标位置感到满意，就可以删除背景颜色。
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 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
}
}
结果
Swift 5
类似于@Markus，但在Swift 5:
emailTextField.leftViewMode = UITextField.ViewMode.always
emailTextField.leftViewMode = .always
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
2020 - 合理的解决方案
关于 Apple 的疯狂行为。
这可能是“最清晰”、最简单的方法：
首先要正确移动文字。
注意这个关键的质量检查：
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
}
}
}
这似乎是最清晰、最可靠的方法。
使用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")
输出:)
我认为基于框架的解决方案不是一个好方法，因为在某些情况下 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
}()
在任何设备上的结果都是：
此外，我的解决方案适用于文本字段左视图。
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
这是为我做的。在 custom/reusable class 中。 b/w 中的 space 实际文本和左视图 icon/image
有很大帮助
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)
}
我想在 UITextField 中添加 icon/image。 icon/image 应留给占位符。
我试过这个：
var imageView = UIImageView();
var image = UIImage(named: "email.png");
imageView.image = image;
emailField.leftView = imageView;
谢谢。
尝试添加 emailField.leftViewMode = UITextFieldViewMode.Always
（默认 leftViewMode 为 Never）
Swift 4
的更新答案emailField.leftViewMode = UITextFieldViewMode.always
emailField.leftViewMode = .always
我只想在这里添加一些东西：
如果要在左侧 UITextField 上添加图像，请使用 leftView 属性 of UITextField
注意： 不要忘记将 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的框架，你要在UITextFieldlet imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
如果您的图片背景为白色，则图片在
UITextField 上将不可见
如果要在特定位置添加图片需要添加
ImageView作为UITextField的子视图。
更新 Swift 3.0
@Mark Moeykens 漂亮地扩展并制作了它 @IBDesignable.
我在此修改并添加了更多功能（为右图添加底线和填充）。
注意 如果您想在右侧添加图像，您可以 select 界面生成器 semantic 中的 Force Right-to-Left 选项（但是对于右图像填充将不起作用，直到您覆盖 rightViewRect 方法）。
我已经修改了这个，可以从这里下载源码ImageTextField
Sahil 有一个很好的答案，我想把它扩展到 @IBDesignable 中，这样开发人员就可以将图像添加到 Storyboard 上的 UITextFields 中。
Swift 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 的左边缘和图像之间添加填充
- 设置颜色使图像和占位符文本匹配
备注
- 要更改图像颜色，您必须遵循代码注释中的注释
- 故事板中的图像颜色不会改变。您必须 运行 项目才能在 Simulator/device. 中看到颜色
可在故事板中设计
在运行时
你为什么不选择最简单的方法。在大多数情况下，您想添加图标，例如 font awesome...只需使用 font awesome 库，将图标添加到文本字段就像这样：
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
}
}
}
for 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
我创建了一个简单的 IBDesignable。随心所欲地使用它。只需让您的 UITextField 确认此 class.
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)
}
}
您可以将此函数放在您的全局文件中或放在您的 class 之上，这样您就可以在整个应用程序中访问它。 完成此过程后，您可以在应用程序中根据您的要求调用此功能。
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
另一种设置占位符图标并将填充设置为 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
}
另一种方式，借鉴之前的帖子做一个扩展。
我们可以把图片放在右边或左边
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)
}
尽情享受吧:)
这是 Mark Moeykens 回答的修改版本，在图像和文本之间添加了填充，并且可以调整图像大小以备不时之需。
Swift 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
}
}
为了创建填充，我喜欢将图像放在容器视图中。一旦您对图标位置感到满意，就可以删除背景颜色。
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 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
}
}
结果
Swift 5
类似于@Markus，但在Swift 5:
emailTextField.leftViewMode = UITextField.ViewMode.always
emailTextField.leftViewMode = .always
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
2020 - 合理的解决方案
关于 Apple 的疯狂行为。
这可能是“最清晰”、最简单的方法：
首先要正确移动文字。
注意这个关键的质量检查：
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
}
}
}
这似乎是最清晰、最可靠的方法。
使用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")
输出:)
我认为基于框架的解决方案不是一个好方法，因为在某些情况下 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
}()
在任何设备上的结果都是：
此外，我的解决方案适用于文本字段左视图。
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
这是为我做的。在 custom/reusable class 中。 b/w 中的 space 实际文本和左视图 icon/image
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)
}