今天在工作中，搭建一個(gè)登錄界面稽寒，因?yàn)樯婕暗接脩裘兔艽a的輸入俯抖，所以在iOS中我們免不了要用到UITextField這個(gè)常見的輸入控件。首先來看一下美工給我的效果圖瓦胎，這里我僅僅截出了UITextField這個(gè)部分的效果：
這里我們能看到這個(gè)UITextField的基本要求有如下幾個(gè)：
- 輸入框內(nèi)有提示圖片
- 之后輸入的文字與輸入框內(nèi)的圖片有間距
- 輸入框有圓角
大致分為上面的三個(gè)特殊要求，那么我們一個(gè)一個(gè)來分析尤揣，首先是輸入框內(nèi)的提示圖片搔啊，這里我們要講UITextField里的兩個(gè)屬性，leftview和rightview北戏，這兩個(gè)屬性分別能設(shè)置textField內(nèi)的左右兩邊的視圖负芋，可以插入圖片,我用最簡單的代碼來展示textField的leftview怎么實(shí)現(xiàn)。
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];
上面的代碼，我們能很清楚的看到首先定義一個(gè)UIImageView旧蛾，之后把這個(gè)imageView設(shè)置成textField的leftview莽龟，之后設(shè)置leftview的樣式，就可以很簡單的定義一個(gè)leftview锨天。
UITextFieldViewMode是一個(gè)枚舉類型毯盈，有如下屬性:
typedef NS_ENUM(NSInteger, UITextFieldViewMode) {
UITextFieldViewModeNever,
UITextFieldViewModeWhileEditing,
UITextFieldViewModeUnlessEditing,
UITextFieldViewModeAlways
};
但是這樣設(shè)置的TextField我們會(huì)發(fā)現(xiàn)，圖片是緊緊貼在輸入框的邊緣的病袄，看起來特別別扭不舒服搂赋，那么該怎么設(shè)置呢？我們可以子類化一個(gè)TextField益缠，去復(fù)寫它的一個(gè)方法來設(shè)置leftView的位置
- (CGRect)leftViewRectForBounds:(CGRect)bounds
{
CGRect iconRect = [super leftViewRectForBounds:bounds];
iconRect.origin.x += 15; //像右邊偏15
return iconRect;
}
在繼承與UITextField中復(fù)寫這個(gè)方法脑奠，得到的結(jié)果是leftView像右偏移15，是不是很簡單呢幅慌。
如果這時(shí)候我們在輸入框中打字宋欺，會(huì)發(fā)現(xiàn)leftview確實(shí)跟最初的輸入框產(chǎn)生的距離，但是我們打出來的字還是緊緊的黏在圖片上胰伍，用戶體驗(yàn)也極差齿诞，根據(jù)上面的思路，我們可以接著在這個(gè)子類中復(fù)寫它的設(shè)置方法來實(shí)現(xiàn)喇辽。
//UITextField 文字與輸入框的距離
- (CGRect)textRectForBounds:(CGRect)bounds{
return CGRectInset(bounds, 45, 0);
}
//控制文本的位置
- (CGRect)editingRectForBounds:(CGRect)bounds{
return CGRectInset(bounds, 45, 0);
}
之前的圖片是20大小掌挚，加上偏移的15那么一共是35，所以我們設(shè)置偏移45的量菩咨，即為文本比leftView的圖片的最右邊向右15吠式。至此，我們已經(jīng)完成了textField的文本和圖片設(shè)置抽米，最后來看一下圓角特占。
圓角有兩種實(shí)現(xiàn)方式，一種是在layer層處理云茸，來渲染繪制圓角
textField.layer.cornerRadius = 4;
textField.layer.masksToBounds = YES;
第二種是設(shè)置UITextfield的樣式是目，也能實(shí)現(xiàn)自帶圓角，但是這個(gè)圓角的值是固定的
textField.borderStyle = UITextBorderStyleRoundedRect;
寫到這里标捺，這個(gè)UITextField在界面上的要求就已經(jīng)基本完成了懊纳，一般我們用到的常用屬性也就是這些。
