iOS7上的UITextfield leftView/rightView填充

Question

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设置填充

Answer 1

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

Answer 2

我自己正在研究这个并使用这个解决方案:

- (CGRect) rightViewRectForBounds:(CGRect)bounds {

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

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

另外,这是在子类中UITextField,可以通过以下方式创建:

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属性更改为此新子类的名称

Answer 3

最简单的方法是向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];

Answer 4

这适用于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

这适合我

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

可以帮到你.

Answer 6

我喜欢这种解决方案，因为它只需一行代码即可解决问题

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

注意：..或2，如果您考虑将QuartzCore包括在内：)

Answer 7

我们可以覆盖苹果为 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
}}

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

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

}

Answer 8

斯威夫特 5

class CustomTextField: UITextField {
    func invalidate() {
        let errorImage =  UIImageView(image: UIImage(named: "errorImage"))
        errorImage.frame = CGRect(x: 8, y: 8, width: 16, height: 16)
        rightView = UIView(frame: CGRect(x: 0, y: 0, width: 32, height: 32))
        rightView?.addSubview(errorImage)
        rightViewMode = .always
    }
}

你会想要：

• 子类 UITextField
• 在子类文本字段中编写一个 invalidate 方法
• 在 invalidate 方法中，创建一个UIView 比您的图像更大的
• 将您的图像放在视图中
• 将视图分配给 UITextField.rightView