textField占位图片

最新推荐文章于 2021-05-01 10:55:59 发布

转载最新推荐文章于 2021-05-01 10:55:59 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/kaqijiang/blog/693294

文章标签：

#移动开发 #python

2019独角兽企业重金招聘Python工程师标准>>>

一、我们通常在设计登录界面时会用到UITextField，如下图所示：

通常想实现下面几点：

1、左边显示图片

2、textField中添加默认的占位符（提示文字），并且希望占位符和左边图片有一点的距离，或者让占位符居中，

3、点击textField输入时光标的位置应该紧在占位符左侧，并紧挨着占位符

最终实现效果如下图所示：

二、左边显示图片很简单下面几行代码搞定（右边显示图片同理）：

UIImageView *passwordImage = [[UIImageView alloc] initWithImage:[UIImageimageNamed:@"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是最合适的。至于其它的方法根据实际需要重写即可。

转载于:https://my.oschina.net/kaqijiang/blog/693294