iOS TextField

整理一下TextField常用的一些属性

首先来看一下TextField在xib的Attributes inspector里面的一些属性

textField attributes inspector

先来看几个显而易见的,比如说:

你在Text里面填的内容就是这个可编辑输入框的内容。Text可以是Plain或者Attributed的。如果设置Text是Attribute的,那么界面就会变成这样

text attributed

Color 就是文字的颜色

Font 就是字体。

Aligment 文字在框内的对其方式

Placeholder 即没有内容的时候呈现在框里的信息,一般用于提示。比如说“没有密码可不填”等。

Background当textField为enable的时候显示的背景图片。

Disabled当textField为disabled的时候显示的背景图片

Border style 边框的类型。从左往右分别是没有边框、直角边框、直角带阴影的边框、圆角边框。(我个人觉得圆形边框比较好看)

border style 直角边框

border style 直角带阴影边框

border style round

Clear Button 一键删除按钮。(感觉这个是比android的EditTextView最好的一个地方,android如果想要实现删除按钮还得自己来,或者使用第三方库)。下图是Clear button出现的几种方式

clear button

Never appears永远不出现;Appears while editing编辑的时候出现 (一般我都选这个);Appears unless editing在不编辑的时候出现;Is always visible始终可见

Adjust to Fit勾选了它之后,如果文字过多,那么会缩小文字来适应输入框的大小。同时上面Min Font Size可以设置最小的文字的大小。

下面的一些属性一般默认就行,基本不太会用到。比如说Capitalization是否要首字母大小;Correction是否自动校正。

capitalization

Spell checking是否检查拼写;Keyboard Type键盘的类型(ASCII键盘、数字标点键盘、数字键盘等)

keyboard type

其中KeyboardType有好几个可以选的,下面列举几个常用的keyboardType类型

Decimal Pad 可输入小数

KeyboardType Decimal pad

Phone Pad 可输入电话号码,#号键,*号键等

Keyboard Phone Pad

Number Pad 只能输入数字

Keyboard Number Pad

Ascii capable 输入英文、数字、标点

Keyboard Ascii capable

Numbers Punctuation 输入拼音、数字、标点

Keyboard Numbers Punctuation

Return key键盘的右下角的那个回车键叫returnKey,你可以选择它上面呈现的字体,比如说Next(下一步)、Done(完成)等

Secure Text Entry如果勾选了这个,表示类似密码框。里面输入的东西,用小黑点代替。


UITextField还有inputViewinputAccessoryView这两个属性

inputView,当UITextField成为first responder的时候,展现自定义的输入视图。这个属性默认是nil,当这个属性是nil的时候,textField会展示系统键盘。如果你想testField成为first responder的时候,呈现其他视图,那么就把你自定义的视图赋值给这个属性。

inputAccessoryView.当UITextField成为first responder的时候,展现自定义的附属视图。这个属性默认为nil。accessory是附件的意思.这个属性所代表的视图将被展现在inputView上方。


现在有个需求,就是一个密码框,我想在里面放一个可以在“密码可见”与“密码不可见”之间切换的按钮。在编辑的时候是有一键删除的那个叉叉的。

在编辑的时候是如下图这样的。输入的东西会变成小黑点,且有一键删除的叉叉。

edit pwd

编辑完成后,光标离开。密码不可见,如下图所示

pwd invisible

点击那个“可视不可视”按钮,使密码可见

pwd visible

具体的做法是这样的:

声明一个密码框UITextField *passwordTextField,声明一个密码可视按钮UIButton *passwordVisibleButton

1.首先设置clear button在编辑的时候出现

[_passwordTextField setClearButtonMode:UITextFieldViewModeWhileEditing];

2.设置这是一个密码框

[_passwordTextField setSecureTextEntry:YES];

3.给密码可视按钮设置视图大小。就让它的宽是输入框的六分之一,高度比密码框稍微低一点。

_passwordVisibleButton.frame = CGRectMake(0, 0, _passwordTextField.frame.size.width / 6, _passwordTextField.frame.size.height - 5);
_passwordVisibleButton.backgroundColor = [UIColor clearColor];
_passwordVisibleButton.layer.cornerRadius = 2.0;

PS:如果passwordTextField是使用NSLayoutConstraint来设置布局的,那么它的rightView的frame就不能使用_passwordTextField.frame.size.width / 6这种来设置。改成固定的值就OK了

4.设置密码可视按钮的图片,以及相应的触摸响应动作。

[_passwordVisibleButton setImage:[UIImage imageNamed:@"Password invisible"] forState:UIControlStateNormal];
[_passwordVisibleButton addTarget:self action:@selector(visibleButtonClicked:) forControlEvents:UIControlEventTouchUpInside];

5.将这个密码可是按钮作为密码框的rightView。并设置rightView的出现形式,让这个按钮在不编辑的时候出现。

[_passwordTextField setRightView:_passwordVisibleButton];
[_passwordTextField setRightViewMode:UITextFieldViewModeUnlessEditing];

6.在点击密码可见按钮的时候,做出响应。

- (void)visibleButtonClicked:(id)sender {
    NSLog(@"visibleButtonClicked");
    if (_isPasswordVisible) {
        _isPasswordVisible = NO;
        [_passwordTextField setSecureTextEntry:YES];
        [_passwordVisibleButton setImage:[UIImage imageNamed:@"Password invisible"] forState:UIControlStateNormal];
        [self setNeedsLayout];
    }else {
        _isPasswordVisible = YES;
        [_passwordTextField setSecureTextEntry:NO];
        [_passwordVisibleButton setImage:[UIImage imageNamed:@"Password visible"] forState:UIControlStateNormal];
        [self setNeedsLayout];
    }
}

这样就实现了上面的需求。


来看一下官方文档里面的内容

显示或隐藏键盘

如果用户触摸了输入框,那么这个输入框就自动变成了first responder,系统会自动把键盘中输入的东西与这个输入框的内容绑定。如果在代码中让输入框becomeFirstResponder,那么它会变成first responder,键盘就出出现了。

当用户触摸在别的控件里,之前那个输入框就不再是first responder了,键盘就会隐藏。也可以在代码中调用resignFirstResponder

建议在界面布局的时候,要考虑到输入框被键盘遮盖的问题。

与键盘相关的通知

下面这几个通知与键盘有关。看名字就能猜出它的大概含义。

UIKeyboardWillShowNotification

UIKeyboardDidShowNotification

UIKeyboardWillHideNotification

UIKeyboardDidHideNotification

UIKeyboardWillChangeFrameNotification

UIKeyboardDidChangeFrameNotification

与输入框编辑相关的通知

UITextFieldTextDidBeginEditingNotification

UITextFieldTextDidChangeNotification

UITextFieldTextDidEndEditingNotification

Overlay view

一般overlay view是在text field的左边或者右边的很小的视图,一般是一个图片按钮。比如说这个按钮是个书签按钮。

TextField有leftViewrightView两个属性,分别可以用来设置左边和右边的overlay view。

看一下官网提供的示例代码:

leftview sample code

clear button是显示在right overlay view位置上的。如果使用rightView来展现一个小视图的话,需要注意这个视图与clear button何时出现何时不出现。

UITextFieldDelegate

可以在UITextFieldDelegate这个协议的方法里面可以做这些事情:

1.Determining whether the user should be allowed to edit the text field’s contents.决定用户能不能编辑这个输入框

2.Validating the text entered by the user.检验用户输入的内容

3.Responding to taps in the keyboard’s return button.响应按下键盘return键的动作

4.Forwarding the user-entered text to other parts of your app.将用户输入的内容用于app的其他地方。

在编辑一个输入框的时候,具体的过程是这样的:

1.在textField变成first responder之前,会调用delegate里面的textFieldShouldBeginEditing:。如果你在这个方法里面返回NO,那么这个输入框的内容就不会被编辑。

2.textField变成first responder。系统调出键盘或者textField的inputView,发送UIKeyboardWillShowNotificationUIKeyboardDidShowNotification通知。如果键盘已经被调出或者inputView已经可见了,那么系统会改为调用UIKeyboardWillChangeFrameNotificationUIKeyboardDidChangeFrameNotification

3.textField调用delegate里面的textFieldDidBeginEditing:,并且发送UITextFieldTextDidBeginEditingNotification通知。

4.在内容变动的时候,会调用textField:shouldChangeCharactersInRange:replacementString:方法,并发送UITextFieldTextDidChangeNotification通知。

5.当用户点击clear button的时候,会调用textFieldShouldClear:

6.当用户点击键盘的return键的时候,会调用textFieldShouldReturn:方法

7.当textField resign firstresponder的时候,系统会隐藏键盘,并发送UIKeyboardWillHideNotificationUIKeyboardDidHideNotification通知。textField会调用delegate的textFieldDidEndEditing:方法并发送UITextFieldTextDidEndEditingNotification通知。

参考

1.http://www.peterboni.net/blog/2014/01/11/mobile-design-details-hide-show-passwords-ios-implementation-and-thoughts/

2.https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/

Show Comments