Display UIImage to the left of text in UITextField - ios

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

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.

Answer 2

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
}
}
P.S.: Consider adding the image view as a subview of the textField and setting textField.clipsToBounds = true, if the image view never exceeds the textField.