UITextField设置leftView、圆角以及文字距离

今天在工作中，搭建一个登录界面，因为涉及到用户名和密码的输入，所以在iOS中我们免不了要用到UITextField这个常见的输入控件。首先来看一下美工给我的效果图，这里我仅仅截出了UITextField这个部分的效果：

这里我们能看到这个UITextField的基本要求有如下几个：

• 输入框内有提示图片
• 之后输入的文字与输入框内的图片有间距
• 输入框有圆角

大致分为上面的三个特殊要求，那么我们一个一个来分析，首先是输入框内的提示图片，这里我们要讲UITextField里的两个属性，leftview和rightview，这两个属性分别能设置textField内的左右两边的视图，可以插入图片,我用最简单的代码来展示textField的leftview怎么实现。

 UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"github.jpg"]];
    
    UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, 100, 20)];
    textField.leftView =imgView;
    textField.leftViewMode = UITextFieldViewModeAlways;
    
    [self addSubview:textField];

上面的代码，我们能很清楚的看到首先定义一个UIImageView，之后把这个imageView设置成textField的leftview，之后设置leftview的样式，就可以很简单的定义一个leftview。

UITextFieldViewMode是一个枚举类型，有如下属性:

typedef NS_ENUM(NSInteger, UITextFieldViewMode) {
    UITextFieldViewModeNever,
    UITextFieldViewModeWhileEditing,
    UITextFieldViewModeUnlessEditing,
    UITextFieldViewModeAlways
};

但是这样设置的TextField我们会发现，图片是紧紧贴在输入框的边缘的，看起来特别别扭不舒服，那么该怎么设置呢？我们可以子类化一个TextField，去复写它的一个方法来设置leftView的位置

- (CGRect)leftViewRectForBounds:(CGRect)bounds
{
    CGRect iconRect = [super leftViewRectForBounds:bounds];
    iconRect.origin.x += 15; //像右边偏15
    return iconRect;
}

在继承与UITextField中复写这个方法，得到的结果是leftView像右偏移15，是不是很简单呢。

如果这时候我们在输入框中打字，会发现leftview确实跟最初的输入框产生的距离，但是我们打出来的字还是紧紧的黏在图片上，用户体验也极差，根据上面的思路，我们可以接着在这个子类中复写它的设置方法来实现。

//UITextField 文字与输入框的距离
- (CGRect)textRectForBounds:(CGRect)bounds{
    
    return CGRectInset(bounds, 45, 0);
    
}

//控制文本的位置
- (CGRect)editingRectForBounds:(CGRect)bounds{
    
    return CGRectInset(bounds, 45, 0);
}

之前的图片是20大小，加上偏移的15那么一共是35，所以我们设置偏移45的量，即为文本比leftView的图片的最右边向右15。至此，我们已经完成了textField的文本和图片设置，最后来看一下圆角。

圆角有两种实现方式，一种是在layer层处理，来渲染绘制圆角

    textField.layer.cornerRadius = 4;
    textField.layer.masksToBounds = YES;

第二种是设置UITextfield的样式，也能实现自带圆角，但是这个圆角的值是固定的

textField.borderStyle = UITextBorderStyleRoundedRect; 

写到这里，这个UITextField在界面上的要求就已经基本完成了，一般我们用到的常用属性也就是这些。