CODEWITHSUNDEEP
iosswiftuitextfield
akes406
akes406

Reputation: 531

UIImage next to centered UITextField Placeholder Text

What would be the best approach for aligning a UIImage icon next to the centered placeholder text of a UITextField? Ex: http://imgur.com/a/Beqrt

I have been attempting to replicate this for sometime now and can't seem to reach the desired effect.

I've tried using the LeftView of the UITextField however can't get this aligned next to the placeholder text (I thought about adding padding to the LeftView by changing it's frame but am unsure how I would obtain the values needed to align it next to the placeholder. There does not appear to be away to get the coordinates for the placeholder text.) . I've also tried to subclass UITextField but here am again unsure on how to obtain the proper coordinates.

Upvotes: 2

Views: 423

Answers (1)

RajeshKumar R
RajeshKumar R

Reputation: 15748

You can attach images inside attributed strings using NSTextAttachment

Swift 3.0

txtField.textAlignment = .center
let attachment = NSTextAttachment()
attachment.image = UIImage(named: "searchIcon")
attachment.bounds = CGRect(x: 0, y: 0, width: 10, height: 10)
let attachmentStr = NSAttributedString(attachment: attachment)
let myString = NSMutableAttributedString(string: "")
myString.append(attachmentStr)
let myString1 = NSMutableAttributedString(string: "Find a Location (Zip Code or Name)")
myString.append(myString1)
txtField.attributedPlaceholder = myString

Objective-C

NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
attachment.image = [UIImage imageNamed:@"searchIcon"];
attachment.bounds = CGRectMake(0, 0, 10, 10);
NSAttributedString *attachmentStr = [NSAttributedString attributedStringWithAttachment:attachment];
NSMutableAttributedString *myString = [[NSMutableAttributedString alloc] initWithString:@""];
[myString appendAttributedString:attachmentStr];
NSMutableAttributedString *myString1 = [[NSMutableAttributedString alloc] initWithString:@"Find a Location (Zip Code or Name)"];
[myString appendAttributedString:myString1];
txtField.attributedPlaceholder = myString;

Upvotes: 2

Related Questions