[UI Basics] [QQ Landing Interface]

Target

1, QQ number text box to have "Please enter QQ number" prompt (user input will automatically disappear)

2, QQ password text box to have "Please enter the QQ password" prompt (user input text will automatically disappear)

3, QQ number text box can only enter a number

4, QQ password text box content must be dark text display

5, click the login button and QQ password and QQ number to print to the console, exit the keyboard

Achieve

1. Complete the interface construction

This interface is relatively simple and needs to be built on the storyboard

1, 2 labels

"QQ number" and "QQ password"

2, 1 button

Landing

3, 2 x TextField

QQ password input and QQ number input

Construction completed as follows

　　　　　　

　　2. Setting properties

1. Keyboard Properties

A> QQ number can only be numeric keypad, set QQ number text Box property KeyBoard Type is number Pad.

b> QQ Password can enter characters and enter a number, set its properties KeyBoard Type asccii capable.

2. Text hint

a> QQ Number text box prompt "Please enter QQ number", set its property PlaceHolder as "Please enter QQ number"

b> QQ Password text box prompt "Please enter the QQ password", set its properties PlaceHolder "Please enter the QQ password"

3, QQ password Dark text

The Redaction property is available only if the Secure text Entry property is enabled.

　　　　　　The first four features only need to be set by the properties of the control to complete the corresponding function, where you can add a function is the clear button.

Set the Clear button property of the text box to appears while eding then you can display a clear button in the input, one-click

Clears the text content you just entered. On the finished interface, you can see the Clear button that appears when you enter content in the input box, which

When you click the Clear button, all the data in the text box is deleted.

3. Monitor button

When you press the login button, you need to do two actions, then we need to listen to the login button, and write the key event to generate the corresponding handler

1> The contents of the Output text box to the console

2> exit Keyboard

1. Output text box contents to the console

We want to output the contents of the text box to the console so first to get to the content of the text box, you need two property attributes Qqnum and Qqpassword.

Use these two properties to get the text content and print to the console:

NSLog (@ "\ n QQ number is%@; \ n QQ Passworld is%@", self.qqnum.text,self.qqpassword.text);

2. Exit the keyboard

The keyboard is called by the text box at the time of editing, the key is closed to follow the principle of who call off, cancel the first responder can exit the keyboard.

//exit the keyboard the first way to cancel the first responder. 　　 　　 　　

[Self.qqnum Resignfirstresponder];

[Self.qqpassword Resignfirstresponder];

The second way to use the view endediting: Method

The second way to exit the keyboard.

[Self.view Endediting:yes];

The corresponding event code is completed, and then connected with the interface, the entire function is completed, all the code is as follows:

1 //2 //VIEWCONTROLLER.M3 //01-QQ Login4 //5 //Created by Zhaoli on 15/8/8.6 //Copyright (c) 2015 hello. All rights reserved.7 //8 9 #import "ViewController.h"Ten  One @interfaceViewcontroller () A  -@property (Weak, nonatomic) Iboutlet Uitextfield *Qqnum; -@property (Weak, nonatomic) Iboutlet Uitextfield *Qqpassword; the  --(ibaction) login; -  - @end +  - @implementationViewcontroller +  A- (void) Viewdidload { at [Super Viewdidload]; -     //additional setup after loading the view, typically from a nib. - } -  -- (void) didreceivememorywarning { - [Super didreceivememorywarning]; in     //Dispose of any resources the can be recreated. - } to  + /** Login*/ --(ibaction) Login { the     //print Qqnumber and QQ password *NSLog (@"\ n QQ number is%@; \ n QQ Passworld is%@", self.qqnum.text,self.qqpassword.text); $     Panax Notoginseng      -     //the first way to exit the keyboard is to cancel the first responder.  the [Self.qqnum Resignfirstresponder]; + [Self.qqpassword Resignfirstresponder]; A      the     //the second way to exit the keyboard.  + [Self.view Endediting:yes]; - } $ @end

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

[UI Basics] [QQ Landing Interface]