在UITextField中显示文本左侧的UIImage

Posted 2021-04-07

我有一个UITextField跨越我的视野宽度。我想添加一个直接位于我的UITextView中输入的最左边字符的小图像。

那可能吗？从文档中，看起来.leftView位于UITextField的最左侧位置，而不是在用户输入时直接位于文本的左侧。

谢谢

答案

编写下面的代码以在TextField中添加左图像

Class CustomTextField : UITextField {

/// A UIImage value that set LeftImage to the UItextfield
    @IBInspectable open var leftImage:UIImage? {
       didSet {
            if (leftImage != nil) {
                self.leftImage(leftImage!)
            }
        }
    }

    fileprivate func leftImage(_ image: UIImage)
    {

        rightPadding()
        let icn : UIImage = image
        let imageView = UIImageView(image: icn)
        imageView.frame = CGRect(x: 0, y: 0, width: icn.size.width + 20, height: icn.size.height)
        imageView.contentMode = UIViewContentMode.center
        self.leftViewMode = UITextFieldViewMode.always
        let view = UIView(frame: CGRect(x: 0, y: 0, width: imageView.frame.size.width, height: imageView.frame.size.height))
        view.addSubview(imageView)
        self.leftView = view
    }


/// Give right padding to UITextField
    fileprivate func rightPadding() {
        let paddingRight = UIView(frame: CGRect(x: 0, y: 5, width: 5, height: 5))
        self.rightView = paddingRight
        self.rightViewMode = UITextFieldViewMode.always
    }
 }

然后在故事板中选择textfield后，给出类名“CustomTextField”，然后在属性检查器中看到选择你的图像。

我希望它会对你有所帮助。

另一答案

是的，你对leftView的UITextField属性是正确的 - 据我所知它位于文本域的左侧。

我会使用autolayout和一个单独的UIImageView锚定到textField的右侧，我会动态地更改约束的常量以使用文本移动它。您可以使用此SO Question中的答案确定当前宽度。

我创建了一个简单的例子，您可以将其作为起点：

import UIKit

class CustomVC: UIViewController {

    let textField = UITextField()

    // use your image here
    let imageView = UIImageView(image: #imageLiteral(resourceName: "your_image_here"))

    var imagePositionFromRight: NSLayoutConstraint!

    let imageOffset: CGFloat = CGFloat(4)

    override func loadView() {
        self.view = UIView()

        view.backgroundColor = UIColor.lightGray

        view.addSubview(textField)
        view.addSubview(imageView)

        // if alignment is .left, you can just use leftView property
        textField.textAlignment = .right
        textField.backgroundColor = UIColor.white

        imageView.contentMode = .scaleAspectFit

        imageView.translatesAutoresizingMaskIntoConstraints = false
        textField.translatesAutoresizingMaskIntoConstraints = false

        imagePositionFromRight = textField.rightAnchor.constraint(equalTo: imageView.rightAnchor, constant: imageOffset)

        NSLayoutConstraint.activate([
            textField.rightAnchor.constraint(equalTo: view.rightAnchor),
            textField.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            textField.leftAnchor.constraint(equalTo: view.leftAnchor),

            imageView.topAnchor.constraint(equalTo: textField.topAnchor),
            imageView.bottomAnchor.constraint(equalTo: textField.bottomAnchor),
            imageView.widthAnchor.constraint(equalTo: imageView.heightAnchor),
            imagePositionFromRight,
            ])

        textField.delegate = self
    }
}

extension CustomVC: UITextFieldDelegate {
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        let proposedString = (textField.text as NSString?)?.replacingCharacters(in: range, with: string) ?? ""
        textField.text = proposedString
        let width = textField.attributedText?.size().width
        imagePositionFromRight.constant = (width ?? 0) + imageOffset
        // returning false since we updated text above manually
        return false
    }
}

P.S。：如果图像视图永远不会超过textField，请考虑将图像视图添加为textField的子视图并设置textField.clipsToBounds = true。