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

2016/03/30 iOS开发

今天在工作中,搭建一个登录界面,因为涉及到用户名和密码的输入,所以在iOS中我们免不了要用到UITextField这个常见的输入控件。首先来看一下美工给我的效果图,这里我仅仅截出了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在界面上的要求就已经基本完成了,一般我们用到的常用属性也就是这些。

Search

    Table of Contents