iOS development UI-simulates the ipad version of the QQ space login interface

iOS development UI-simulates the ipad version of the QQ space login interface

I. Implementation and STEPS

1. The general ipad item can be added with a HD when named, marked as HD version

2. Set the file structure of the project into the home and login two sections

　　

3. Settings of the Login interface

(1) Setting the first controller and a custom controller class (login) Association

　　　　

(2) Set the color of the controller's view, RGB three values are 42

　　

(3) Import the relevant footage pictures

About the picture: General to the vertical screen with the picture, to portrait name identification, to the horizontal screen with the picture, to landscape name identification

Modify the Plist file, adjust the picture

Hint: in the project (ipad) There are a lot of places to use the icon

Add: You can view the official document (Apple icon) for the size of the icon in Apple's development application.

(4) Preliminary interface Setup

Add a Uiimageview to storyboard and set its corresponding picture.

Use Outlayout to lay it out. Set its distance to the top of the view with a distance of 50 and fixed, set its horizontal center.

Add a view to storyboard to load the password, login and other controls.

Add a ImageView to storyboard to set the password and log in. (Note: The images provided here need to be stretched to set the 1 pixels in the middle of the extrusion).

Set up accounts and adjust constraints. Add a corresponding TextField control, set the constraint, set the inner text color to white, set the background to take out the white, set a clear button when editing, set the keyboard as the numeric keypad.

Set its border style

　

Set the pop-up keyboard for the Account entry box to the numeric keypad

Set the return key for the pop-up numeric keypad next.

Set the password, the steps are similar to the account, set the account internal text for redaction.

　　

Set the Purge button

　　

Set the password entry box for the popup keyboard to return key done.

　　

(5) about the processing of the keyboard.

The default keyboard. next, and done.

Let the controller be called the proxy for the text box. The controller needs to comply with the protocol.

　　

About automatically determine whether the text box currently has a value, tick the option, when there are no values in the TextField, (return) is a gray button, when there is a value can point.

　　

Click on the Next button, the cursor moves to the Password input box, click the Done button to perform login related actions.

The implementation code is as follows (note that two TextField have been towed)

　　

Note: The simplest way to do this is to set two tag values in storyboard for two TextField, and to remove the corresponding TextField in code processing according to its tag value, but this is not recommended.

Second, the login settings

Tip: Stretching a picture in storyboard or xib is only valid for ImageView and has no effect on the button.

How to set the button fill:

The first way: use code to extrude the most intermediate pixel.

　　

The second way: set the image directly.

　　

iOS development UI-simulates the ipad version of the QQ space login interface