iOS7上的UITextfield leftView/rightView填充

问题描述：

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;

请注意，我不感兴趣，在添加填充到文本框的文本，这样Set padding for UITextField with UITextBorderStyleNone

的可能重复[插图文字为UITextField？]（http://*.com/questions/2694411/text-inset-for-uitextfield） – Zorayr

无，这是询问如何在文本字段中缩进显示为左视图的图像。不缩进文本本身。试试他的代码，你会发现将leftView设置为一个图像可以将图像放置在文本字段的左边缘，而不需要填充。它看起来很丑。 – stone

答

只是在做这个我和使用该解决方案的RECT：

- (CGRect) rightViewRectForBounds:(CGRect)bounds { 

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

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

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

创建一个新的文件，该文件的UITextField而不是默认的一个子类NSObject

添加一个名为- (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; 
}

新方法您可能需要导入#import <QuartzCore/QuartzCore.h>
添加rightViewRectForBounds以上方法
在Interface Builder中，点击文本字段要继承和改变阶级属性这个新的子类

如何使用IBDesignable进行相同？ – riddhi

答

我发现这个地方。 ...

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

[self addSubview:itemDescription];

这只是向文本添加填充，而不是提问者正在寻找的内容。他不想要一个清晰的左视图。他希望将图像显示为leftView。 – stone

答

创建一个自定义的UITextField类并使用该类而不是UITextField。覆盖 - （的CGRect）textRectForBounds：（的CGRect）边界设置，你需要

例

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

答

这里的名字是一个解决办法：

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

答

一技巧：将包含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;

答

我在我的ViewController类中创建一个自定义的方法，如所示波纹管：

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

This Worked perfectl y在iOS 7上！希望这仍然适用于iOS 8和9！

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

希望这个答案可能是有用的或有用的找出别人的另一种解决方案。

干杯！

答

一个更简单的解决方案，这需要的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;

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

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

我很喜欢这个。最简单的一个在这里 – volk

您也可以使用ScaleAspectFit而不是中心...如果图像的大小与确切的框架不匹配。 –

我用你的例子为UIButton（而不是UIImageView），而它的类型是InfoLight。 – OhadM

答

最简单的方法是添加一个UIView到leftView/righView并添加一个ImageView到UIView，调整ImageView在UIView里的起源艾克，这对我来说很有魅力。它只需要几行代码

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

快速简单的实施！ –

答

下面的例子是添加水平填充到恰好是一个图标左视图 - 您可以使用类似的方法添加填充到您想使用的任何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)); 
}

虽然我们是一个子类UITextField这里，我相信这是最干净的方法。

答

我喜欢这个解决方案，因为它有一个单一的代码行

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

注意解决这个问题：..或2如果你考虑包括QuartzCore行:)

这也移动了边界 – Softlion

，但并没有解决问题，只填补了左填充问题 –

我使用rightView.layer获得了更好的结果。sublayerTransform = CATransform3DMakeTranslation（-10.0f，0.0f，0.0f），但方法 –

答

做的最好的方法这只是让一类使用的UITextField

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

}

，并在.m文件子做这个去你的故事板或XIB并单击身份检查和更换的UITextField与您可以在课程选项中使用您自己的“CustomTextField”。

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

答

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

如果'UITextField'嵌入在'UISearchBar'中，你如何告诉UISearchBar使用你的'UITextField'子类？ – crishoj

请为此问题启动一个新线程 –

答

感谢你们的答案，让我吃惊的没有真的他们安装在右视图图像到我的文本框，同时仍然提供所需的填充。然后我想到了使用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的高度，随意将其调整到您的需要。

答

这对于斯威夫特的伟大工程：

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

不能将'string'类型的值转换为期望的参数类型'UIImage？' –

@JoshuaHart我更新了示例。 –

答

这对我的作品

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

愿它可以帮助你。

答

我自己也有这个问题，到目前为止，最简单的解决方案是修改图像，以简单地添加填充图像的每一面！

我只是改变了我的PNG图像添加10像素透明填充，它运作良好，根本没有编码！

答

如果您正在使用一个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; 
}

答

简单的代码，请不要使用或：

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

答

最简单的方法就是将文本框更改为RoundRect而不是自定义并查看魔术。 :)

答

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

iOS7上的UITextfield leftView/rightView填充

相关推荐