文本输入交互控件-UITxetField(原创)

作者.jpg

• 由于这些都是一些很基础的东西,所以我们这边很快的简述一下,最主要是后面的UI高级,网络多线程这反面的文章,所以快速的讲解控件这方面的,通过一个小案例来讲解UITxetField控件,直接上代码:

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // 搭建用户登录界面
    // 1.创建用户名输入框
    UITextField *userNameTextField = [[UITextField alloc] initWithFrame:CGRectMake(40, 120, 240, 40)];
    // 2.创建密码输入框
    UITextField *passWordTextField = [[UITextField alloc] initWithFrame:CGRectMake(40, 200, 240, 40)];
    // 3.设置文本输入框的风格
    userNameTextField.borderStyle = UITextBorderStyleRoundedRect;
    passWordTextField.borderStyle = UITextBorderStyleRoundedRect;
    // 4设置输入框默认提示文字
    userNameTextField.placeholder = @"请输入用户名";
    passWordTextField.placeholder = @"请输入密码";
    // 4.1设置passWordTextField为密码模式
    passWordTextField.secureTextEntry = YES;
    [self.view addSubview:userNameTextField];
    [self.view addSubview:passWordTextField];
    // 5.创建登录按钮
    UIButton *loginBtn = [UIButton buttonWithType:UIButtonTypeSystem];
    loginBtn.frame = CGRectMake(110, 260, 100, 30);
    [loginBtn setTitle:@"登录" forState:UIControlStateNormal];
    [self.view addSubview:loginBtn];
    // 6.设置挂件
    UIImageView *userImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
    userImageView.image = [UIImage imageNamed:@"user"];
    userNameTextField.leftView = userImageView;
    UIImageView *passWordImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
    passWordImageView.image = [UIImage imageNamed:@"password"];
    passWordTextField.leftView = passWordImageView;
    // 6.1设置输入框的视图
    userNameTextField.leftViewMode = UITextFieldViewModeAlways;
    passWordTextField.leftViewMode = UITextFieldViewModeAlways;
    
// 挂件枚举值解释
//    UITextFieldViewModeNever, 在任何状态下都不显示
//    UITextFieldViewModeWhileEditing,正处于编辑是显示
//    UITextFieldViewModeUnlessEditing,非编辑状态下显示
//    UITextFieldViewModeAlways 始终显示
}

• 运行代码如图

  
  Snip20161209_10.png

• 如何去监听用户的输入操作,可以通过UITxetFieldDelegate协议来管理,代理模式在之前的搜索框控件已经有讲述过了.代理方法主要用作当用户与系统控件进行交互式产生的回调处理.直接上代码演示:

- (void)viewDidLoad {
    [super viewDidLoad];
    // 设置界面
    [self setupUI];
}

// 设置UI界面
- (void)setupUI {
    // 搭建用户登录界面
    // 1.创建用户名输入框
    UITextField *userNameTextField = [[UITextField alloc] initWithFrame:CGRectMake(40, 120, 240, 40)];
    // 2.创建密码输入框
    UITextField *passWordTextField = [[UITextField alloc] initWithFrame:CGRectMake(40, 200, 240, 40)];
    // 3.设置文本输入框的风格
    userNameTextField.borderStyle = UITextBorderStyleRoundedRect;
    passWordTextField.borderStyle = UITextBorderStyleRoundedRect;
    // 4设置输入框默认提示文字
    userNameTextField.placeholder = @"请输入用户名";
    passWordTextField.placeholder = @"请输入密码";
    // 4.1设置passWordTextField为密码模式
    passWordTextField.secureTextEntry = YES;
    [self.view addSubview:userNameTextField];
    [self.view addSubview:passWordTextField];
    // 5.创建登录按钮
    UIButton *loginBtn = [UIButton buttonWithType:UIButtonTypeSystem];
    loginBtn.frame = CGRectMake(110, 260, 100, 30);
    [loginBtn setTitle:@"登录" forState:UIControlStateNormal];
    [self.view addSubview:loginBtn];
    // 6.设置挂件
    UIImageView *userImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
    userImageView.image = [UIImage imageNamed:@"user"];
    userNameTextField.leftView = userImageView;
    UIImageView *passWordImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
    passWordImageView.image = [UIImage imageNamed:@"password"];
    passWordTextField.leftView = passWordImageView;
    // 6.1设置输入框的视图
    userNameTextField.leftViewMode = UITextFieldViewModeAlways;
    passWordTextField.leftViewMode = UITextFieldViewModeAlways;
    _userNameTextField = userNameTextField;
    _passWordTextField = passWordTextField;
    // 设置代理
    userNameTextField.delegate = self;

}

// 实现代理方法
// 设置输入框是否可被修改，return no将无法修改，不出现键盘。默认yes可以修改
- (BOOL)textFieldShouldBeginEditing:(UITextField*)textField {
    return YES;
}

// 点击输入框时执行此方法
- (void)textFieldDidBeginEditing:(UITextField*)textField {
}

// 是否允许结束编辑，允许的话，将会失去first responder 第一响应者（比如键盘）
- (BOOL)textFieldShouldEndEditing:(UITextField*)textField {
    return YES;
}

// 结束编辑(失去第一响应者时执行)
- (void)textFieldDidEndEditing:(UITextField*)textField {
}

// 得到用户输入字符
- (BOOL)textField:(UITextField*)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString*)string {
    return YES;
}
// 当用户全部清空的时候的时候会调用
- (BOOL)textFieldShouldClear:(UITextField*)textField {
    return YES;
}

// 点击Return键（标志着编辑已经结束了），隐藏键盘
- (BOOL)textFieldShouldReturn:(UITextField*)textField {
    [textField resignFirstResponder];
    return YES;
}

• 最近我发现很多app存在一个问题,就是输入完之后,先要退出键盘,却无法退出,其中微信发红包界面就存在这个bug,令人真的很不爽,所以我这边也特意的讲一下,然后通过点击屏幕收起键盘.
• 想要实现这个功能,那么这需要重写UIViewController中的一个手势方法,在这个方法中,进行UITextField 控件注销第一响应者的操作,直接上代码:

// 重写touchBegin方法
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self.userNameTextField resignFirstResponder];
    [self.passWordTextField resignFirstResponder];
}

• 上面的代码就可以实现点击屏幕进行收键盘的操作了
• 具体如图

收键盘操作.gif

• UITxetField控件就见到这吧,有需要更多的了解,或者后面更高级文章的改进,欢迎留言评论,谢谢!