UITextfield leftView / rightView padding on iOS7

Question

The leftView and rightView UITextField views on iOS7 are really close to the border of the text field.

How to add some (horizontal) additions to these elements?

I tried modifying the frame but did not work

uint padding = 10;//padding for iOS7 UIImageView * iconImageView = [[UIImageView alloc] initWithImage:iconImage]; iconImageView.frame = CGRectMake(0 + padding, 0, 16, 16); textField.leftView = iconImageView; 

Please note that I am not interested in adding an addendum to text text, for example Install an addendum for UITextField with UITextBorderStyleNone

Answer 1

Just worked on it myself and used this solution:

 - (CGRect) rightViewRectForBounds:(CGRect)bounds { CGRect textRect = [super rightViewRectForBounds:bounds]; textRect.origin.x -= 10; return textRect; } 

This will move the image to the right by 10 instead of compressing the image against the edge in iOS 7.

In addition, this was in a subclass of UITextField that could be created:

• Create a new subclass file UITextField instead of the standard NSObject

• Add a new method named - (id)initWithCoder:(NSCoder*)coder to set the image

   - (id)initWithCoder:(NSCoder*)coder { self = [super initWithCoder:coder]; if (self) { self.clipsToBounds = YES; [self setRightViewMode:UITextFieldViewModeUnlessEditing]; self.leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"textfield_edit_icon.png"]]; } return self; } 

• You may need to import #import <QuartzCore/QuartzCore.h>

• Add the rightViewRectForBounds method above

• In the Builder interface, click on the TextField that you want to subclass, and change the class attribute to the name of this new subclass

Answer 2

A much simpler solution that uses contentMode :

  arrow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"down_arrow"]]; arrow.frame = CGRectMake(0.0, 0.0, arrow.image.size.width+10.0, arrow.image.size.height); arrow.contentMode = UIViewContentModeCenter; textField.rightView = arrow; textField.rightViewMode = UITextFieldViewModeAlways; 

In Swift 2,

  let arrow = UIImageView(image: UIImage(named: "down_arrow")) arrow.frame = CGRectMake(0.0, 0.0, arrow.image.size.width+10.0, arrow.image.size.height); arrow.contentMode = UIViewContentMode.Center self.textField.rightView = arrow self.textField.rightViewMode = UITextFieldViewMode.Always 

In Swift 3

  let arrow = UIImageView(image: UIImage(named: "arrowDrop")) if let size = arrow.image?.size { arrow.frame = CGRect(x: 0.0, y: 0.0, width: size.width + 10.0, height: size.height) } arrow.contentMode = UIViewContentMode.center self.textField.rightView = arrow self.textField.rightViewMode = UITextFieldViewMode.always 

Answer 3

The easiest way is to add a UIView to leftView / righView and add an ImageView to a UIView, configure the ImageView source inside the UIView anywhere, it worked for me like a charm. He needs only a few lines of code

 UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 5, 26, 26)]; imgView.image = [UIImage imageNamed:@"img.png"]; UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 32, 32)]; [paddingView addSubview:imgView]; [txtField setLeftViewMode:UITextFieldViewModeAlways]; [txtField setLeftView:paddingView]; 

Answer 4

This works fine for Swift:

 let imageView = UIImageView(image: UIImage(named: "image.png")) imageView.contentMode = UIViewContentMode.Center imageView.frame = CGRectMake(0.0, 0.0, imageView.image!.size.width + 20.0, imageView.image!.size.height) textField.rightViewMode = UITextFieldViewMode.Always textField.rightView = imageView 

Answer 5

It works for me

 UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 20)]; self.passwordTF.leftView = paddingView; self.passwordTF.leftViewMode = UITextFieldViewModeAlways; 

May this help you.

Answer 6

I like this solution because it solves the problem with a single line of code

 myTextField.layer.sublayerTransform = CATransform3DMakeTranslation(10.0f, 0.0f, 0.0f); 

Note: .. or 2 if you consider including QuartzCore in a string :)

Answer 7

The best way to do this is to simply create a class using a subclass of UITextField and in the .m file

  #import "CustomTextField.h" #import <QuartzCore/QuartzCore.h> @implementation CustomTextField - (id)initWithCoder:(NSCoder*)coder { self = [super initWithCoder:coder]; if (self) { //self.clipsToBounds = YES; //[self setRightViewMode:UITextFieldViewModeUnlessEditing]; self.leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0,15,46)]; self.leftViewMode=UITextFieldViewModeAlways; } return self; } 

after doing this, go to your storyboard or xib and click on the identity inspector and replace UITextfield with your own "CustomTextField" in the class option.

Note. If you just pass the registration with the automatic layout for the text field, your application will not start and display only a blank screen.

Answer 8

I found this somewhere ...

 UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)]; paddingView.backgroundColor = [UIColor clearColor]; itemDescription.leftView = paddingView; itemDescription.leftViewMode = UITextFieldViewModeAlways; [self addSubview:itemDescription]; 

Answer 9

Create a custom UITextField class and use this class instead of UITextField. Override - (CGRect) textRectForBounds: (CGRect) restricts the setting of the required rectangle

Example

 - (CGRect)textRectForBounds:(CGRect)bounds{ CGRect textRect = [super textRectForBounds:bounds]; textRect.origin.x += 10; textRect.size.width -= 10; return textRect; } 

Answer 10

I had this problem myself, and by far the easiest solution is to change your image to just add an addition to each side of the image!

I just modified my png image to add a transparent add-on of 10 pixels and it works well, without coding at all!

Answer 11

Here is one solution:

  UIView *paddingTxtfieldView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 20, 42)]; // what ever you want txtfield.leftView = paddingTxtfieldView; txtfield.leftViewMode = UITextFieldViewModeAlways; 

Answer 12

One trick: add a UIView containing a UIImageView to the UITextField, as a rightView. This UIView should be larger, now put the UIImageView to the left of it. Thus, there will be free space on the right.

 // Add a UIImageView to UIView and now this UIView to UITextField - txtFieldDate UIView *viewRightIntxtFieldDate = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 20, 30)]; // (Height of UITextField is 30px so height of viewRightIntxtFieldDate = 30px) UIImageView *imgViewCalendar = [[UIImageView alloc] initWithFrame:CGRectMake(0, 10, 10, 10)]; [imgViewCalendar setImage:[UIImage imageNamed:@"calendar_icon.png"]]; [viewRightIntxtFieldDate addSubview:imgViewCalendar]; txtFieldDate.rightViewMode = UITextFieldViewModeAlways; txtFieldDate.rightView = viewRightIntxtFieldDate; 

Answer 13

I created my own method in my ViewController class, as shown below:

 - (void) modifyTextField:(UITextField *)textField { // Prepare the imageView with the required image uint padding = 10;//padding for iOS7 UIImageView * iconImageView = [[UIImageView alloc] initWithImage:iconImage]; iconImageView.frame = CGRectMake(0 + padding, 0, 16, 16); // Set the imageView to the left of the given text field. textField.leftView = iconImageView; textField.leftViewMode = UITextFieldViewModeAlways; } 

Now I can call this method inside ( viewDidLoad method) and send any of my TextFields this method and add indentation both on the right and on the left and give the text and background colors by writing only one line of code, as follows:

 [self modifyTextField:self.firstNameTxtFld]; 

This works great on iOS 7! Hope this still works on iOS 8 and 9!

I know that adding too many views can make this a heavier object to load. But when we are concerned about the difficulty of other solutions, I find myself more biased towards this method and more flexible using this method .;)

Hope this answer may be helpful or helpful in figuring out another solution for someone else.

Hurrah!

Answer 14

The following is an example of adding a horizontal spacer to the left view, which is an icon - you can use a similar approach to add a complement to any UIView that you would like to use as the field on the left of the field.

Inside the UITextField subclass:

 static CGFloat const kLeftViewHorizontalPadding = 10.0f; @implementation TextFieldWithLeftIcon { UIImage *_image; UIImageView *_imageView; } - (instancetype)initWithFrame:(CGRect)frame image:(UIImage *)image { self = [super initWithFrame:frame]; if (self) { if (image) { _image = image; _imageView = [[UIImageView alloc] initWithImage:image]; _imageView.contentMode = UIViewContentModeCenter; self.leftViewMode = UITextFieldViewModeAlways; self.leftView = _imageView; } } return self; } #pragma mark - Layout - (CGRect)leftViewRectForBounds:(CGRect)bounds { CGFloat widthWithPadding = _image.size.width + kLeftViewHorizontalPadding * 2.0f; return CGRectMake(0, 0, widthWithPadding, CGRectGetHeight(bounds)); } 

Although we are a subclass of UITextField here, I believe this is the cleanest approach.

Answer 15

 - (CGRect)rightViewRectForBounds:(CGRect)bounds { return CGRectMake(bounds.size.width - 40, 0, 40, bounds.size.height); } 

Answer 16

I thank you guys for your answers, to my surprise, not one of them placed a suitable image in my text box, but at the same time provided the necessary indentation. then I thought about using AspectFill mode and miracles happened. for future seekers, here is what I used:

 UIImageView *emailRightView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 35, 35)]; emailRightView.contentMode = UIViewContentModeScaleAspectFill; emailRightView.image = [UIImage imageNamed:@"icon_email.png"]; emailTextfield.rightViewMode = UITextFieldViewModeAlways; emailTextfield.rightView = emailRightView; 

The 35 in the frame of my image represents the height of my email field, feel free to tailor it to your needs.

Answer 17

If you use UIImageView as a leftView, you should use this code:

Caution: do not use inside viewWillAppear or viewDidAppear

 -(UIView*)paddingViewWithImage:(UIImageView*)imageView andPadding:(float)padding { float height = CGRectGetHeight(imageView.frame); float width = CGRectGetWidth(imageView.frame) + padding; UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)]; [paddingView addSubview:imageView]; return paddingView; } 

Answer 18

Simple code in Swift:

 let paddleView:UIView = UIView(frame: CGRect(x:0, y:0, width:8, height:20)); uiTextField.leftView = paddleView; uiTextField.leftViewMode = UITextFieldViewMode.Always; 

Answer 19

The easiest way is to simply change the text box as RoundRect instead of Custom and see the magic. :)

Answer 20

for Swift2, I use

 ... self.mSearchTextField.leftViewMode = UITextFieldViewMode.Always let searchImg = UIImageView(image: UIImage(named: "search.png")) let size = self.mSearchTextField.frame.height searchImg.frame = CGRectMake(0, 0, size,size) searchImg.contentMode = UIViewContentMode.ScaleAspectFit self.mSearchTextField.leftView = searchImg ... 

Answer 21

Instead of manipulating the imageView or image, we can override the method provided by apple for the rightView.

 class CustomTextField : UITextField { override func rightViewRect(forBounds bounds: CGRect) -> CGRect { let offset = 5 let width = 20 let height = width let x = Int(bounds.width) - width - offset let y = offset let rightViewBounds = CGRect(x: x, y: y, width: width, height: height) return rightViewBounds }} 

and in the same way we can redefine below func for left view.

 override func leftViewRect(forBounds bounds: CGRect) -> CGRect { /*return as per requirement*/ } 

Answer 22

 ... textField.rightView = UIImageView(image: ...) textField.rightView?.contentMode = .top textField.rightView?.bounds.size.height += 10 textField.rightViewMode = .always ... 

Answer 23

Simple approach:

 textField.rightViewMode = .always let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 25, height: 15)) textField.contentMode = .scaleAspectFit imageView = UIImage(named: "imageName") textField.rightView = imageView 

Note. The height should be less than the width to ensure horizontal filling.