[英]Swift add icon/image in UITextField
我想在 UITextField 中添加图标/图像。 图标/图像应留给占位符。
我试过这个：
var imageView = UIImageView();
var image = UIImage(named: "email.png");
imageView.image = image;
emailField.leftView = imageView;
谢谢。
Sahil 有一个很好的答案，我想将其扩展为 @IBDesignable，以便开发人员可以将图像添加到 Storyboard 上的 UITextField 中。
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
我只想在这里添加更多内容：
如果要在左侧的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 。
我在此修改并添加了更多功能（为右图添加底线和填充）。
注意如果您想在右侧添加图像，您可以在界面构建器的semantic中选择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 的左侧添加图像
textField.leftView = UIImageView(image: "small-calendar")
textField.leftView?.frame = CGRect(x: 0, y: 5, width: 20 , height:20)
textField.leftViewMode = .always
斯威夫特 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 ://stackoverflow.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
}
}
}
这似乎是最清晰、最可靠的方法。
使用 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")
输出 ：）
斯威夫特 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
}
}
}
我创建了一个简单的 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)
}
}
另一种设置占位符图标并将填充设置为 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
}
您可以将此函数放在您的全局文件或您的类之上，以便您可以在整个应用程序中访问它。 在此过程之后，您可以根据应用程序的要求调用此函数。
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
你为什么不选择最简单的方法。 在大多数情况下，您想添加像 font awesome 之类的图标...只需使用 font awesome 库，就可以很容易地将图标添加到文本字段，如下所示：
myTextField.setLeftViewFAIcon(icon: .FAPlus, leftViewMode: .always, textColor: .red, backgroundColor: .clear, size: nil)
您需要先安装这个 swift 库： https ://github.com/Vaberer/Font-Awesome-Swift
这是 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
}
}
斯威夫特 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()
)
我不认为基于框架的解决方案是一个好方法，因为在某些情况下它不会在 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
这为我做到了。 在自定义/可重用类中。 对黑白实际文本和左视图图标/图像的空间有很大帮助
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)
}
为了摆脱@Mark Moeykens 的回答，我做了一些细微的调整，以解决我遇到的一些问题：
可以在Constants枚举中调整不同的值。
归功于@Mark Moeykens
import UIKit
final class PaddingWithImageTextField: UITextField {
private enum Constants {
static let iconLength: CGFloat = 24.0
static let imageTextSpacing: CGFloat = 8.0
static let horizontalPadding: CGFloat = 12.0
static let placeholderColor = UIColor.lightGray
}
var leftImage: UIImage? { didSet { updateView() } }
var rightImage: UIImage? { didSet { updateView() } }
override var placeholder: String? {
didSet {
attributedPlaceholder = NSAttributedString(string: placeholder != nil ? placeholder! : "", attributes:[NSAttributedString.Key.foregroundColor: Constants.placeholderColor])
}
}
init() {
super.init(frame: .zero)
// Any additional setup you may need.
/*
layer.cornerRadius = 8.0
clipsToBounds = true
keyboardType = .asciiCapable
backgroundColor = UIColor(hexString: "#F5F5F5")
*/
updateView()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func updateView() {
leftViewMode = .always
rightViewMode = .always
if let image = leftImage {
// Setting the rendering mode allows us to set the tint color and change the entire color of the image.
let imageView = UIImageView(image: image.withRenderingMode(.alwaysTemplate))
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: Constants.iconLength).isActive = true
imageView.heightAnchor.constraint(equalToConstant: Constants.iconLength).isActive = true
imageView.contentMode = .scaleAspectFit
imageView.tintColor = Constants.placeholderColor
let stack = UIStackView(arrangedSubviews: [
createHorizontalPaddingView(),
imageView,
createImageToTextPaddingView()
])
stack.axis = .horizontal
leftView = stack
} else {
leftView = createHorizontalPaddingView()
}
if let image = rightImage {
// Setting the rendering mode allows us to set the tint color and change the entire color of the image.
let imageView = UIImageView(image: image.withRenderingMode(.alwaysTemplate))
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: Constants.iconLength).isActive = true
imageView.heightAnchor.constraint(equalToConstant: Constants.iconLength).isActive = true
imageView.contentMode = .scaleAspectFit
imageView.tintColor = Constants.placeholderColor
let stack = UIStackView(arrangedSubviews: [
createImageToTextPaddingView(),
imageView,
createHorizontalPaddingView()
])
stack.axis = .horizontal
rightView = stack
} else {
rightView = createHorizontalPaddingView()
}
}
private func createHorizontalPaddingView() -> UIView {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.widthAnchor.constraint(equalToConstant: Constants.horizontalPadding).isActive = true
return view
}
private func createImageToTextPaddingView() -> UIView {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.widthAnchor.constraint(equalToConstant: Constants.imageTextSpacing).isActive = true
return view
}
}
要使用此类，您可以执行以下操作：
let textField = PaddingWithImageTextField()
textField.placeholder = "Code"
textField.leftImage = UIImage() // Your image here
textField.rightImage = UIImage() // Your other image here
这应该会给您类似下图的内容（取决于您在初始化程序中设置文本字段的方式）。
在 Swift 4 中左侧/右侧的 UITextField 中添加图标或图像
[英]Add icon or image in UITextField on left / right in Swift 4
如何在UITextField中添加图像和文本作为swift中心的占位符
[英]How to add image and text in UITextField as placeholder in center in swift
Swift：如何将图标图像和图像背景添加到 App 委托中的 UItabBar？
[英]Swift : How to add icon image and image background to the UItabBar in App delegate?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.