ios iOS7 上的 UITextfield leftView/rightView 填充

UITextfield leftView/rightView padding on iOS7

提问by subzero

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

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

How may I add some (horizontal) padding to those items?

我如何为这些项目添加一些（水平）填充？

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'm not interested in adding padding to the textfield's text, like this Set padding for UITextField with UITextBorderStyleNone

请注意，我对向文本字段的文本添加填充不感兴趣，例如Set padding for UITextField with UITextBorderStyleNone

采纳答案by AngeloS

Was just working on this 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 over from the right by 10 instead of having the image squeezed up against the edge in iOS 7.

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

Additionally, this was in a subclass of UITextField, which can be created by:

此外，这是在 的子类中UITextField，可以通过以下方式创建：

1. Create a new file that's a subclass of UITextFieldinstead of the default NSObject

2. Add a new method named - (id)initWithCoder:(NSCoder*)coderto 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;
   }
   

3. You may have to import #import <QuartzCore/QuartzCore.h>

4. Add the rightViewRectForBoundsmethod above

5. In Interface Builder, click on the TextField you would like to subclass and change the class attribute to the name of this new subclass

1. 创建一个新文件，它是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. 在 Interface Builder 中，单击要子类化的 TextField 并将 class 属性更改为这个新子类的名称

回答by TTillage

A much simpler solution, which takes advantage of contentMode:

一个更简单的解决方案，它利用了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 3,

在斯威夫特 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

回答by vishal dharankar

Easiest way is add a UIView to leftView/righView and add an ImageView to UIView , adjust the origin of ImageView inside UIView anywhere you like , this worked for me like a charm. It needs only few lines of code

最简单的方法是向 leftView/righView 添加一个 UIView 并将一个 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];

回答by Andy

This works great for Swift:

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

回答by Ashu

This works for me

这对我有用

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

May it helps you.

愿它对你有帮助。

回答by Jordi Corominas

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 a line :)

注意：.. 或 2 如果您考虑包含 QuartzCore 一行 :)

回答by Anuj Kumar Rai

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

最好的方法是简单地使用 UITextField 的子类和 .m 文件创建一个类

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

}

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

通过这样做，转到您的故事板或 xib 并单击身份检查器并在类选项中将 UITextfield 替换为您自己的“CustomTextField”。

Note: If you simply give padding with auto layout for textfield then your application will not run and show only blank screen.

注意：如果您只是为文本字段提供带有自动布局的填充，那么您的应用程序将不会运行并仅显示空白屏幕。

回答by RegularExpression

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

回答by Dev Patel

Here is one solution:

这是一种解决方案：

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

回答by Pranav Gupta

Instead of manipluating imageView or image we can override a method provided by apple for rightView.

我们可以覆盖苹果为 rightView 提供的方法，而不是操作 imageView 或 image。

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 same way we can override below func for left view.

同样，我们可以覆盖左视图的 func 下方。

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

}