Display UIImage to the left of text in UITextField

Question

I have a UITextField which spans the width of my view. I'd like to add a small image that sits directly to the left-most character entered in my UITextView.

Is that possible? From the docs, it looks like .leftView sits to the left-most position of the UITextField rather than directly to the left of the text as the user types.

Thanks

Answer 1

Yes, you are correct about the leftView property of the UITextField - as far as I know it stays to the left of the textfield.

I would do it using autolayout and a separate UIImageView anchored to the right side of the textField and I would dynamically change the constant of the constraint to move it with text. You can determine the current width using answers in this SO Question .

I've created a simple example you can use as your starting point:

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
    }
}

PS: Consider adding the image view as a subview of the textField and setting textField.clipsToBounds = true , if the image view never exceeds the textField.

Answer 2

Write Below code to add left image in 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
    }
 }

Then after in storyboard select textfield give class name "CustomTextField" and then see in your attribute inspector select your image.

I hope it will help you.