在 Swift 4 中左側/右側的 UITextField 中添加圖標或圖像

Question

我已經在UITextField設置了左圖標。 當我設置文本時，它位於左側圖標上方。 我想在UITextField的圖標之后設置文本。 我使用了下面的代碼。

    let imageView = UIImageView(image: UIImage(named: strImgname))
    imageView.frame = CGRect(x: 0, y: 0, width: imageView.image!.size.width , height: imageView.image!.size.height)
    let paddingView: UIView = UIView.init(frame: CGRect(x: 0, y: 0, width: 50, height: 30))        
    paddingView.addSubview(imageView)
    txtField.leftViewMode = .always
    txtField.leftView = paddingView

Answer 1

您可以使用@IBDesignable來制作具有這些功能甚至更多功能的可設計UITextField ，並在整個項目中使用它。

當UITextField中的圖標被點擊時，帶有 Delegate 方法的 DesignableTextField：

import Foundation
import UIKit

protocol DesignableTextFieldDelegate: UITextFieldDelegate {
    func textFieldIconClicked(btn:UIButton)
}

@IBDesignable
class DesignableTextField: UITextField {

    //Delegate when image/icon is tapped.
    private var myDelegate: DesignableTextFieldDelegate? {
        get { return delegate as? DesignableTextFieldDelegate }
    }

    @objc func buttonClicked(btn: UIButton){
        self.myDelegate?.textFieldIconClicked(btn: btn)
    }

    //Padding images on left
    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
        var textRect = super.leftViewRect(forBounds: bounds)
        textRect.origin.x += padding
        return textRect
    }

    //Padding images on Right
    override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
        var textRect = super.rightViewRect(forBounds: bounds)
        textRect.origin.x -= padding
        return textRect
    }

    @IBInspectable var padding: CGFloat = 0
    @IBInspectable var leadingImage: UIImage? { didSet { updateView() }}
    @IBInspectable var color: UIColor = UIColor.lightGray { didSet { updateView() }}
    @IBInspectable var imageColor: UIColor = UIColor.init(hex: "3EB2FF") { didSet { updateView() }}
    @IBInspectable var rtl: Bool = false { didSet { updateView() }}

    func updateView() {
        rightViewMode = UITextFieldViewMode.never
        rightView = nil
        leftViewMode = UITextFieldViewMode.never
        leftView = nil

        if let image = leadingImage {
            let button = UIButton(type: .custom)
            button.frame = CGRect(x: 0, y: 0, width: 20, height: 20)

            let tintedImage = image.withRenderingMode(.alwaysTemplate)
            button.setImage(tintedImage, for: .normal)
            button.tintColor = imageColor

            button.setTitleColor(UIColor.clear, for: .normal)
            button.addTarget(self, action: #selector(buttonClicked(btn:)), for: UIControlEvents.touchDown)
            button.isUserInteractionEnabled = true

            if rtl {
                rightViewMode = UITextFieldViewMode.always
                rightView = button
            } else {
                leftViewMode = UITextFieldViewMode.always
                leftView = button
            }
        }

        // Placeholder text color
        attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedStringKey.foregroundColor: color])
    }
}

現在它在故事板中的可設計性如下：

注意： Rtl當設置為Off圖標時會移動到UITextField左邊

在所需的 ViewController 中符合 Delegate。

class MyViewController: UIViewController, DesignableTextFieldDelegate {
    @IBOutlet weak var txtFieldSomeSearch: DesignableTextField!
    txtFieldSomeSearch.delegate = self // can be done in storyboard as well
    ... // other codes
    func textFieldIconClicked(btn: UIButton) {
        print("MyViewController : textFieldIconClicked")
    }
    ... // other codes
}

最后輸出：

Answer 2

使用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.setupRightImage(imageName: "unlock")

輸出 ：）

Answer 3

please use below code

// image on left side
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


// image on left side
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

Answer 4

Swift 5 中UITextField擴展。這允許您檢查圖像是否為系統圖像，否則，您使用自定義圖像。 您還可以使用TextFieldImageSide枚舉設置您希望圖像顯示在文本字段的哪一側。

enum TextFieldImageSide {
    case left
    case right
}

extension UITextField {
    func setUpImage(imageName: String, on side: TextFieldImageSide) {
        let imageView = UIImageView(frame: CGRect(x: 10, y: 5, width: 30, height: 30))
        if let imageWithSystemName = UIImage(systemName: imageName) {
            imageView.image = imageWithSystemName
        } else {
            imageView.image = UIImage(named: imageName)
        }
        
        let imageContainerView = UIView(frame: CGRect(x: 0, y: 0, width: 45, height: 40))
        imageContainerView.addSubview(imageView)
        
        switch side {
        case .left:
            leftView = imageContainerView
            leftViewMode = .always
        case .right:
            rightView = imageContainerView
            rightViewMode = .always
        }
    }
}

用法：

searchBar.setUpImage(imageName: "mappin.and.ellipse", on: .left)

產生以下內容：