[UI基础][QQ登陆界面]

【目标】

　　1、QQ号码文本框要有“请输入QQ号码”的提示（用户输入时会自动消失）

　　2、QQ密码文本框要有“请输入QQ密码”的提示（用户输入文字会自动消失）

　　3、QQ号码文本框只能输入数字

　　4、QQ密码文本框内容必须是暗文显示

　　5、点击登陆按钮后把QQ密码和QQ号码打印到控制台，退出键盘

 

【实现】

　　1、完成界面搭建

　　　　这个界面比较简单，需要在storyboard上搭建

　　　　1、 2个Label 　　

　　　　　　“QQ号码” 和 “QQ密码”

　　　　2、 1个Button

　　　　　　“登陆”

　　　　3、 2个TextField

　　　　　　QQ密码输入和QQ号码输入

 

　　　　搭建完成如下　　　　　　　　

　　　　　　

 

　　2、设置属性

　　　　1、键盘属性

　　　　　　a> QQ号码只能是数字键盘，设置QQ号码文本框的属性 KeyBoard Type 为 Number Pad.

　　　　　　b> QQ密码即可输入字符又可输入数字，设置其属性 KeyBoard Type 为 AsccII Capable.

 

　　　　2、文本提示

　　　　　　a> QQ号码文本框提示“请输入QQ号码”，设置其属性 PlaceHolder 为“请输入QQ号码”

                 b> QQ密码文本框提示“请输入QQ密码”，设置其属性 PlaceHolder 为“请输入QQ密码”

 

　　　　3、QQ密码暗文

　　　　　　暗文属性只要使能 Secure Text Entry 属性即可.

　　　　　　前四项功能只需要通过设置控件的属性就可以完成相应的功能，在这里可以增加一个功能就是clear button。

　　　　设置文本框的clear button 属性 为 Appears while eding 那么就可以在输入内容是显示一个clear button，一键

　　　　清除刚刚输入的文本内容。下图就完成的界面搭建，可以看到在输入框里输入内容的时候出现了clear button，这个

　　　　时候点击clear button会删除文本框里的所有数据。

            　　　

　　3、监听按键

　　　　按下登陆按钮时需要进行两个操作，那么我们需要对登陆按钮进行监听，并且写出按键事件产生对应的handler

　　　　　　1> 输出文本框的内容到控制台

　　　　　　2> 退出键盘 

　　　　1、输出文本框的内容到控制台

　　　　　　　　我们要输出文本框的内容到控制台那么首先要获取到文本框的内容，那么需要两个属性属性 qqNum 和 qqPassWord。

　　　　　　通过这两个属性来获取文本内容并打印到控制台：

　　　　　　NSLog(@"\n QQ number is %@; \n QQ passworld is %@",self.qqNum.text,self.qqPassWord.text);

 　　　　2、退出键盘

　　　　　　　　键盘是由文本框在编辑的时候进行调出的，按键关闭遵循谁调出谁关闭的原则，取消第一响应者就可以将键盘退出。

    　　　　　　// 退出键盘的第一种方式，取消第一响应者。

    　　　　　　[self.qqNum resignFirstResponder];

   　　　　　　 [self.qqPassWord resignFirstResponder];

   　　　　　　

　　　　　　　　第二种方式用view的 endEditing:方法

   　　　　　　 // 退出键盘的第二种方式。

    　　　　　　[self.view endEditing:YES];

 

　　　　　　　相应事件代码完成，然后跟界面进行连线，整个功能完成，全部代码如下：

//
//  ViewController.m
//  01-qq登陆
//
//  Created by zhaoli on 15/8/8.
//  Copyright (c) 2015年 hello. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UITextField *qqNum;
@property (weak, nonatomic) IBOutlet UITextField *qqPassWord;

- (IBAction)login;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/** 登陆*/
- (IBAction)login {
    // print qqNumber and qq password
    NSLog(@"\n QQ number is %@; \n QQ passworld is %@",self.qqNum.text,self.qqPassWord.text);
    
    
    // 退出键盘的第一种方式，取消第一响应者。
    [self.qqNum resignFirstResponder];
    [self.qqPassWord resignFirstResponder];
    
    // 退出键盘的第二种方式。
    [self.view endEditing:YES];
}
@end