11

I am setting up a UIImageView as a leftView on a UITextField like so:

UIImageView *envelopeView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.height*.1, self.height*.1)]; envelopeView.image = [UIImage imageNamed:@"envelope.png"]; envelopeView.contentMode = UIViewContentModeScaleAspectFit; envelopeView.bounds = CGRectInset(envelopeView.frame, 15, 10); self.emailAddress.leftView = envelopeView; self.emailAddress.leftViewMode = UITextFieldViewModeAlways; 

which gets me the following:

UITextField image

As you can see the left size of the image goes right up to the left edge of the button even though I tried to set an inset. How can I move this envelope in so that it's got padding on all sides?


Update: I tried the proposed answer of changing the UIImageView frame like so, but the envelope is still lined up on the left side at the border of the UITextField:

CGFloat padding = 20; UIImageView *envelopeView = [[UIImageView alloc] initWithFrame:CGRectMake(3*padding, padding, self.height*.1-padding, self.height*.1-padding)]; 
1
  • 1
    did you try to change CGRectMake(5, 0, self.height*.1, self.height*.1)] for example ... Commented Sep 11, 2015 at 14:07

4 Answers 4

27

For Swift 3 Users

Here is what worked for me:

extension UITextField { /// set icon of 20x20 with left padding of 8px func setLeftIcon(_ icon: UIImage) { let padding = 8 let size = 20 let outerView = UIView(frame: CGRect(x: 0, y: 0, width: size+padding, height: size) ) let iconView = UIImageView(frame: CGRect(x: padding, y: 0, width: size, height: size)) iconView.image = icon outerView.addSubview(iconView) leftView = outerView leftViewMode = .always } } 

test:

txOrigin.setLeftIcon(icon_location) 

result:

enter image description here

Sign up to request clarification or add additional context in comments.

2 Comments

superb solution
Still works perfectly on Swift 5! Thanks bro for saving my day!
10

For Swift 4.2 +

You can use this extension:

extension UITextField { func leftImage(_ image: UIImage?, imageWidth: CGFloat, padding: CGFloat) { let imageView = UIImageView(image: image) imageView.frame = CGRect(x: padding, y: 0, width: imageWidth, height: frame.height) imageView.contentMode = .center let containerView = UIView(frame: CGRect(x: 0, y: 0, width: imageWidth + 2 * padding, height: frame.height)) containerView.addSubview(imageView) leftView = containerView leftViewMode = .always } } 

1 Comment

Works like a champ! Thanks. Very easy to duplicate for the rightView also.
5

enter image description hereyou can simply try this:

 UIImageView *envelopeView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 0, 30, 30)]; envelopeView.image = [UIImage imageNamed:@"comment-128.png"]; envelopeView.contentMode = UIViewContentModeScaleAspectFit; UIView *test= [[UIView alloc]initWithFrame:CGRectMake(20, 0, 30, 30)]; [test addSubview:envelopeView]; [self.textField.leftView setFrame:envelopeView.frame]; self.textField.leftView =test; self.textField.leftViewMode = UITextFieldViewModeAlways; 

10 Comments

just tried this, but it shows no effect. The image is the approximately the same.
how much did you give for x ?
x can not be CGFloat .. it is like on the x-Axis, should be some integer.
@SimonaMi are you sure? I use a float for x all the time.
i always used it with int, but you are right, this is from the apple documentation CGRect CGRectMake ( CGFloat x, CGFloat y, CGFloat width, CGFloat height ); developer.apple.com/library/ios/documentation/GraphicsImaging/…
|
0

You can use this. Change your frame according to your need.

NSTextAttachment* placeholderImageTextAttachment = [[NSTextAttachment alloc] init]; placeholderImageTextAttachment.image = [UIImage imageNamed:@"Search"]; placeholderImageTextAttachment.bounds = CGRectMake(0, -2, 16, 16); NSMutableAttributedString* placeholderImageString = [[NSAttributedString attributedStringWithAttachment:placeholderImageTextAttachment] mutableCopy]; NSMutableAttributedString* placeholderString = [[NSMutableAttributedString alloc] initWithString:NSLocalizedString(@" Search", nil)]; [placeholderImageString appendAttributedString:placeholderString]; _txtFieldSearch.attributedPlaceholder = placeholderImageString; _txtFieldSearch.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter; 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.