[英]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.