在UITextField中显示文本左侧的UIImage

时间:2018-01-01 22:09:59

标签: ios swift uitextfield uikit

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

这可能吗?从文档中看,.leftView位于UITextField的最左侧位置,而不是在用户输入时直接位于文本的左侧。

由于

2 个答案:

答案 0 :(得分:0)

是的,您对leftView的{​​{1}}属性是正确的 - 据我所知,它位于文本字段的左侧。

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

我已经创建了一个可以作为起点的简单示例:

UIImageView

P.S。:如果图像视图永远不会超过textField,请考虑将图像视图添加为textField的子视图并设置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 } }

答案 1 :(得分:0)

编写下面的代码以在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"然后在属性检查器中看到选择图像。

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