iOS7上的UITextfield leftView / rightView填充

iOS7上的UITextField的leftView和rightView视图非常接近文本框边框。

我怎么可以添加一些(水平)填充这些项目?

我试图修改框架,但没有工作

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

请注意,我没有兴趣向文本字段的文本添加填充,例如,使用UITextBorderStyleNone为UITextField设置填充

只是在自己工作,并使用这个解决scheme:

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

这会将图像从右侧移动10,而不是将图像挤压到iOS 7的边缘。

此外,这是在UITextField一个子类,可以创build:

  1. 创build一个新的文件,它是UITextField的子类,而不是默认的NSObject
  2. 添加一个名为- (id)initWithCoder:(NSCoder*)coder的新方法来设置图像

     - (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; } 
  3. 您可能需要导入#import <QuartzCore/QuartzCore.h>

  4. 添加上面的rightViewRectForBounds方法

  5. 在界面生成器中,单击您想要inheritance的TextField,并将类属性更改为此新子类的名称

一个更简单的解决scheme,它利用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; 

在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 

在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 

最简单的方法是添加一个UIView到leftView / righView并添加一个ImageView到UIView,调整UIView里面的ImageView的原点在你喜欢的任何地方,这对我来说就像一个魅力。 它只需要几行代码

 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]; 

这对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 

这对我有用

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

愿它帮助你。

我喜欢这个解决scheme,因为它解决了单行代码的问题

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

注意:..或2,如果你考虑包括QuartzCore一行:)

最好的方法是使用UITextField的子类和.m文件创build一个类

  #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; } 

通过这样做去你的故事板或XIB,并点击身份检查,并用类选项中自己的“CustomTextField”replaceUITextfield。

注意:如果你只是给自动布局填充文本字段,那么你的应用程序将不会运行,只显示空白屏幕。

我发现这个地方…

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

创build一个自定义的UITextField类,并使用该类而不是UITextField。 覆盖 – (CGRect)textRectForBounds:(CGRect)边界设置您需要的矩形

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

我自己有这个问题,到目前为止最简单的解决scheme是修改您的图像,以简单地添加填充图像的每一面!

我只是改变了我的PNG图像添加10像素透明填充,它运作良好,没有任何编码!

一招:将包含UIImageView的UIView作为rightView添加到UITextField中。 这个UIView必须大一些,现在把UIImageView放在它的左边。 所以会有从右侧的空白填充。

 // 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; 

这是一个解决scheme:

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

下面的例子是将水平填充添加到恰好是图标的左侧视图 – 您可以使用类似的方法将填充添加到任何想要用作文本框左侧视图的UIView

UITextField子类中:

 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)); } 

尽pipe我们在这里是UITextField的子类,但我相信这是最干净的方法。

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

感谢你们的答案,令我惊讶的是,他们中没有一个真正把正确的视图图像放在我的文本框中,同时还提供了所需的填充。 然后我想到了使用AspectFill模式和奇迹发生。 为未来的求职者,这是我用的:

 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; 

在我的imageview的框架中的35代表我的emailTextfield的高度,随时调整到您的需要。

如果您使用UIImageView作为leftView,那么你必须使用这个代码:

注意:请勿在viewWillAppear或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; } 

简单的代码在Swift中:

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

我在我的ViewController类中创build了一个自定义的方法,如下图所示:

 - (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; } 

现在,我可以调用里面的方法( viewDidLoad方法),并发送我的任何TextFields到该方法,并添加左右两边的填充,并通过只写一行代码给文本和背景颜色,如下所示:

 [self modifyTextField:self.firstNameTxtFld]; 

这在iOS 7上完美工作! 希望这仍然适用于iOS 8和9!

我知道添加太多的视图可能会使这个有点重的对象被加载。 但是,当担心其他解决scheme中的困难时,我发现自己更偏向于这种方法,并且使用这种方法更灵活。 ;)

希望这个答案可能有助于或有助于找出另一个解决scheme给其他人。

干杯!

最简单的方法就是将文本框更改为RoundRect而不是Custom,然后查看魔法。 🙂

对于Swift2,我使用

 ... 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 ...