UITextField with a placeholder containing an image and text

Question

is there any way I could have a magnifier icon stuck to my placeholder in a UITextField like the below:

I tried to override leftViewRectForBounds(bounds: CGRect):

override func leftViewRectForBounds(bounds: CGRect) -> CGRect {
    var superRect = super.leftViewRectForBounds(bounds)
    superRect.origin.x += 80
    return superRect
  }

but it didn't work

the placeholder is located perfectly, so how would that help me? — Quantaliinuxite, Jan 20 '16 at 11:01
@Justlike You can add images to attributed text like I showed in my answer. No need to subclass UITextField or change any bounds. — Fogmeister, Jan 20 '16 at 12:09

Fogmeister · Accepted Answer · 2016-01-20T11:21:44.860

5

You can add images to text using NSAttributedString and NSTextAttachment.

I haven't used them in a while but I believe you can do something like this...

let magnifyingGlassAttachment = NSTextAttachment(data: nil, ofType: nil)
magnifyingGlassAttachment.image = UIImage(named: "MagnifyingGlass")

let magnifyingGlassString = NSAttributedString(attachment: magnifyingGlassAttachment)

now you can use the magnifyingGlassString attributed string and add it as part of the attributed text to the UITextField.

I believe you can also specify exactly how the magnifying glass renders alongside the string (how it wraps etc...)

Something like this...

var attributedText = NSMutableAttributedString(attributedString: magnifyingGlassString)

let searchString = NSAttributedString(string: "Search for stuff")

attributedText.appendAttributedString(searchString)

textField.attributedPlaceholder = attributedText

edited Jan 20 '16 at 11:21

answered Jan 20 '16 at 11:16

Fogmeister

76,236
42
207
306

this is a beautiful solution, is there any way the image could be centered with the rest of the text? – Quantaliinuxite Jan 20 '16 at 12:44
@Quantaliinuxite hi, yes you can do that by subclassing `NSTextAttachment` like is shown here... http://stackoverflow.com/questions/26105803/center-nstextattachment-image-next-to-single-line-uilabel – Fogmeister Jan 20 '16 at 12:46
I did see that, didn't think it was very elegant. Oh well! thanks :) – Quantaliinuxite Jan 20 '16 at 12:58

score 1 · Answer 2 · answered Jan 20 '16 at 11:09

1

You can add a image view or a custom view that displays this icon over the text field by properly placing it over and set up appropriate layout constraints. You will be adding this view as a sibling and not subview though.

answered Jan 20 '16 at 11:09

Shripada

6,296
1
30
30

So would I calculate the size of the placeholder text, assume it's in the middle and simply place the icon there to the left of the calculated frame? – Quantaliinuxite Jan 20 '16 at 11:11
So this also works, it's a little more work than the other answer, but if more control of the positioning is needed this is a good method. I should add that it is much easier if the image view is added as a subview rather than a sibling. – Quantaliinuxite Jan 21 '16 at 11:06

UITextField with a placeholder containing an image and text

2 Answers2

Linked