您的位置:首页 > 产品设计 > UI/UE

关于iOS 6.0 以后设置UITextField的左侧图片、文字居中(占位符的位置)

2015-11-30 08:29 1176 查看
一、我们通常在设计登录界面时会用到UITextField,如下图所示:
通常想实现下面几点:
1、左边显示图片
2、textField中添加默认的占位符(提示文字),并且希望占位符和左边图片有一点的距离,或者让占位符居中,
3、点击textField输入时光标的位置应该紧在占位符左侧,并紧挨着占位符
最终实现效果如下图所示:



二、左边显示图片很简单下面几行代码搞定(右边显示图片同理):
UIImageView
*passwordImage = [[UIImageView
alloc]
initWithImage:[UIImage
imageNamed:@"passwordIcon"]];

password.leftView
= passwordImage;
password.leftViewMode
= UITextFieldViewModeAlways;
友情提示:上下两个图片的宽度要保持一致,不然会导致占位符的左边无法对其!

三、而设置占位符的位置和编辑状态时光标的位置试了很多方法感觉都不好使,最终找到一个方法,自定义一个basicTextField继承自UITextField;然后可以重写下面的几个方法:
- (CGRect)borderRectForBounds:(CGRect)bounds;

- (CGRect)textRectForBounds:(CGRect)bounds;

- (CGRect)placeholderRectForBounds:(CGRect)bounds;

- (CGRect)editingRectForBounds:(CGRect)bounds;

- (CGRect)clearButtonRectForBounds:(CGRect)bounds;

- (CGRect)leftViewRectForBounds:(CGRect)bounds;
- (CGRect)rightViewRectForBounds:(CGRect)bounds;

二、下面是具体的代码实现:
#import
"basicTextField.h"

@implementation
basicTextField

- (CGRect)leftViewRectForBounds:(CGRect)bounds{

CGRect
iconRect = [super
leftViewRectForBounds:bounds];

iconRect.origin.x
+=
10;

return
iconRect;

}

//
重写占位符的x值
- (CGRect)placeholderRectForBounds:(CGRect)bounds{

CGRect
placeholderRect = [super
placeholderRectForBounds:bounds];

placeholderRect.origin.x
+=
1;

return
placeholderRect;
}

//
重写文字输入时的X值

- (CGRect)editingRectForBounds:(CGRect)bounds{

CGRect
editingRect = [super
editingRectForBounds:bounds];

editingRect.origin.x
+=
20;

return
editingRect;

}

//
重写文字显示时的X值

- (CGRect)textRectForBounds:(CGRect)bounds{

CGRect
textRect = [super
editingRectForBounds:bounds];

textRect.origin.x
+=
20;

return
textRect;

}
@end

四、这里有一个坑:就是当你同时重写这三个方法时,同时设置他们X的偏移量时会发现运行结果如下图。
//
重写占位符的X值
- (CGRect)placeholderRectForBounds:(CGRect)bounds{

CGRect placeholderRect = [super
placeholderRectForBounds:bounds];
placeholderRect.origin.x
+= 80;

return placeholderRect;
}



看上图可以发现当点击textField使其处于输入状态时,光标和文字中间有间隔;这个间隔其实是占位符的偏移量80,因为我们设置了输入状态时光标的偏移量为20,占位符是80。而光标的偏移量是根据leftView的算的,占位符的偏移量是根据光标的位置算的。所以设置占位符偏移量为1是最合适的。至于其它的方法根据实际需要重写即可。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: