[iOS-UI] 控件学习 UITextField And 简单实现登陆界面

UITextField

UITextField 控件

UITextField 时iOS UI视图的 一种，它其实就是我们的文本输入区域，例如平常用户名，密码的文本文字输入区域，

 UITextField 创建的对象一般只能单行输入文字，不能输入或者显示多行

• 注意，UITextField 控件也是继承于UIControl控件 UIControl 是继承于UIView 控件 这样其实 UITextField 也是间接继承于 UIView，也是视图的一种

UITextField 的简单创建及使用

• 找到VIewController
• 创建一个UITestField对象 && 定义属性

 UITextField * _textField;
 / 定义属性
@property (retain, nonatomic) UITextField* textField;

• 同步属性

@synthesize textField = _textField;
//self.textField 或者 _textField 来调用该对象

• 创建一个UITextField对象并分配位置i

 self.textField = [[UITextField alloc] init];
    
self.textField.frame = CGRectMake(100, 100, 180, 40);

• 设置基本属性

//设置内容文字
    self.textField.text = @" 用户名 ";
    
    //设置字体大小
    self.textField.font = [UIFont systemFontOfSize: 18];
    
    // 设置字体颜色
    self.textField.textColor = [UIColor blueColor];
    

UITextField的 边框风格

设置完属性我们来设置一下出现的边框风格

• UItextField 的 边框属性：
  UITextBorderStyleRoundedRect 圆角风格 UITextBorderStyleLine 线框风格 UITextBorderStyleBezel bezel 线框 UITextBorderStyleNone 无边框风格
• 注意一般不设置的话是圆角风格

self.textField.borderStyle = UITextBorderStyleRoundedRect;

键盘的出现

因为我们是文本输入，那么在针对用户的时候就要让他拿出键盘以供用户输入选择

• 输入键盘的风格
• UIKeyboardTypeDefault 默认风格 UIKeyboardTypeNamePhonePad 字母和数字组合风格 UIKeyboardTypeNumberPad 纯数字风格

 self.textField.keyboardType = UIKeyboardTypeNumberPad;
 // 我们采用一下数字风格

• self.textField.keyboardType = UIKeyboardTypeDefault;
• 普通风效果如下

收回键盘

对于上述代码 我们可以用COMMEND + K 打开键盘，但是在实现的过程里我们发现我们不能回收键盘，添加如下函数

-(void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    // 使 虚拟键盘 回收
    // 不再作为第一消息响应
    [self.textField resignFirstResponder] ;
}

点击空白即可回收键盘

UITextField的小细节

• 1）密码输入
  在写学生管理系统的时候我们知道由于Xcode么有Getchar函数 我们在输入密码的时候不能进行加密 但是在我写UI的时候我们的UITextField 有一个密码加密方法
• • 是否作为密码输入方法
• • self.textField.secureTextEntry = YES;
    YES进行加密
    NO不进行加密

我们隐藏了输入的东西

• 2） 提示文字信息
  这个提示文字信息的意思就是当用户不输入东西的时候界面会提示用户需要输入什么
• • self.textField.placeholder = @"请输入用户名";
• • 该属性是默认浅灰色，看着舒适

最后 - [self.view addSubview:_textField];

简单实现一个登陆界面

分析界面

通过前段时间的学习可以简单的设计一个登陆

• 登陆组成：
  • -Label–用户名提示： 输入框textfield
  • -label密码提示： 密码输入 textfield
  • • 登录按钮 button
  • • 注册按钮 button

界面实现

基础属性的设置

 UILabel* _lbUserName;
    UILabel* _lbPassWord;
    UITextField* _tfUserName;
    UITextField* _tfPassWord;
    
    //Login;
    UIButton *_btLogin;
    
    //注册Register;
    UIButton *_btRegister;

实现部分

• 先实现 对话框和按钮界面

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    _lb = [[UILabel alloc] init];
    _lb.frame = CGRectMake(100, 400, 200, 200);
    _lb.text = @" 关于小司的简单登陆界面3G iOS 有点 厉害";
    _lb.textColor = [UIColor redColor];
    _lb.font = [UIFont systemFontOfSize:20];
    _lb.textAlignment = NSTextAlignmentCenter;
    _lb.numberOfLines = 0;
    
    _lbUserName = [[UILabel alloc]init];
    _lbUserName.frame = CGRectMake(20, 60, 80, 40);
    _lbUserName.text = @"用户名：";
    _lbUserName.font = [UIFont systemFontOfSize:15];
    _lbUserName.textAlignment = NSTextAlignmentLeft;
    
    // 密码提示
    _lbPassWord = [[UILabel alloc] init];
    _lbPassWord.frame = CGRectMake(20, 140, 80, 40);
    _lbPassWord.text = @"密码：";
    _lbPassWord.font = [UIFont systemFontOfSize:15];
    _lbPassWord.textAlignment = NSTextAlignmentLeft;
    
    //用户名输入框
    _tfUserName = [[UITextField alloc] init];
    _tfUserName.frame = CGRectMake(120, 60, 180, 40);
    _tfUserName.placeholder = @"请输入用户名";
    _tfUserName.borderStyle = UITextBorderStyleRoundedRect;
//    _tfUserName.keyboardType = UIKeyboardTypeNumberPad;
//
    //密码输入框
    _tfPassWord = [[UITextField alloc] init];
    _tfPassWord.frame = CGRectMake(120, 140, 180, 40);
    _tfPassWord.placeholder = @"请输入密码";
    _tfPassWord.borderStyle = UITextBorderStyleRoundedRect;
    _tfPassWord.secureTextEntry = YES;
//    _tfPassWord.keyboardType = UIKeyboardTypeNumberPad;
//
    //登陆button
    _btLogin = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    _btLogin.frame = CGRectMake(120, 300, 80, 40);
    [_btLogin setTitle:@"登陆" forState:UIControlStateNormal];
    [_btLogin addTarget:self action:@selector(pressLogin) forControlEvents:UIControlEventTouchUpInside];
    
    
    //注册button
    _btRegister = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    _btRegister.frame = CGRectMake(120, 360, 80, 40);
    [_btRegister setTitle:@"注册" forState:UIControlStateNormal];
    [_btRegister addTarget:self action:@selector(pressRegister) forControlEvents:UIControlEventTouchUpInside];
    
    
    [self.view addSubview:_lbUserName];
    [self.view addSubview:_lbPassWord];
    [self.view addSubview:_lb];
    [self.view addSubview:_btLogin];
    [self.view addSubview:_btRegister];
    [self.view addSubview:_tfUserName];
    [self.view addSubview:_tfPassWord];
   
    
}

登陆和注册按钮的事件函数

• 按下登陆界面时候
• 我们设定好一个账号或者密码 然后输入的账号密码由函数获取
• 进行比对 设置弹窗

-(void) pressLogin {
    NSString* str1 = @"Michael";
    NSString* str2 = @"123456";
    
    //输入的账号密码都能在其他函数获取
    NSString* strName = _tfUserName.text;
    NSString* strPass = _tfPassWord.text;
    if ([str1 isEqualToString:strName] && [str2 isEqualToString:strPass]) {
        NSLog(@" 用户名密码正确！");
    // 提示框出现
        UIAlertController *_alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"账号密码正确" preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *sure = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:nil];
        
        [_alert addAction:sure];
        [self presentViewController:_alert animated:YES completion:nil];
    }
    else {
        UIAlertController *_alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"验证失败,用户名或密码错误，请检查！" preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *sure = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:nil];
        [_alert addAction:sure];
        [self presentViewController:_alert animated:YES completion:nil];
    }
}

• 注册

-(void) pressRegister {
    UIAlertController *_alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"该功能正在完善 摆了！" preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *sure = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:nil];
    [_alert addAction:sure];
    [self presentViewController:_alert animated:YES completion:nil];
}

• 回收键盘-注意对输入账号和密码都要回收

-(void) pressRegister {
    UIAlertController *_alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"该功能正在完善 摆了！" preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *sure = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:nil];
    [_alert addAction:sure];
    [self presentViewController:_alert animated:YES completion:nil];
}