IOS development-UI from entry to entry (1), ios-ui

IOS development-UI from entry to entry (1), ios-ui

I. UI Overview

(1) UI (User Interface) User Interface, various page elements that users can see;

(2) iOS App = Various UI controls + business logic and algorithms;

(3) to develop an exquisite application, you must be familiar with the usage of various UI controls.

Ii. UIWindow

1. What is window?

(1) widow is a window. Each app must use a window to display the content to users;

(2) In iOS, a window is represented by the UIWindow class. Generally, an application creates only one UIWindow object;

(3) The main function of window is to present the content to the user. We will not perform too many operations on the window.

2. How to Create a window?

(1) When creating a window, you must specify the size of the window.

(2) The size of the window (frame) is usually the same as that of the screen (UIScreen.

Sample Code: self. window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen] bounds];

3. Add: Create a project:

(1) command + shift + N-> Application in iOS> Empty Application. Click Next.

(2) enter your Product Name and click Next.

(3) Select the SAVE project path and click Create.

4. How does window present content? Next we will introduce UIView;

3. UIView

1. What is View?

(1) view: a rectangle area on the screen. Use UIView in iOS to represent a view

(2) In general, all kinds of UI controls belong to the view.

(3) Different controls represent different types of views. All the content that can be viewed in iOS is view or its subclass.

2. How to Create a view?

(1) To create a view, follow these steps:

① Open up space and initialize the view (the view location and size are given during initialization)

② Set the view (for example, the background color)

③ Add the view to the window for display

④ Release view object

(2) view creation code:

UIView * blueView = [[UIView alloc] initWithFrame: CGRectMake (100,100,120,100)];

BlueView. backgroundColor = [UIColor blueColor];

[Self. window addSubview: blueView];

[BlueView release];

3. What is Frame?

(1) frame is an important attribute of view and the key to view layout. It determines the size and position of view.

4. How to fully control the size and position of the view? Next we will introduce the iOS coordinate system;

5. iOS coordinate system:

(1) iOS provides a plane coordinate system for layout. The upper left corner is the origin of the coordinate system.

(2) horizontal to the right: the positive direction of x.

(3) vertical downward: the positive direction of y.

(4) The coordinate system is not based on pixels, but on points.

6. What does Frame contain?

(1) frame is a struct, which contains two parts: origin and size.

(2) origin is also a struct, which contains two parts: x and y.

(3) size is also a struct, which contains two parts: width and height.

(4) The origin and size of the frame are relative to the parent view.

(5) The CGRectMake () function helps us quickly construct a CGRect variable.

7. What is Center?

(1) center is also an important attribute of view.

(2) The center is a struct, which contains two parts: x and y.

(3) The center is closely related to the frame.

(4) center. x = frame. origin. x + frame. size. width/2;

Center. y = frame. origin. y + frame. size. height/2;

8. What is bounds?

(1) bounds (bounds) is also an important attribute of view and is used to define its own boundary.

(2) It is a CGRect struct variable like a frame.

(3) When a view is set to bounds, it regards itself as a container and defines its own boundary size and the initial coordinates in the upper left corner.

(4) When a subview is added to this view, the frame is calculated based on the origin () specified by bounds, rather than the upper left corner.

9. There are subtle relationships between bounds and frame and center (For details, refer ):

　　

　　

　　

10. Add a view

(1) addSubview of UIView: you can add a subview. For all subviews of the same view, the added subview will cover the added subview.

(2) UIView provides other methods for adding views (see the table below );

　　　　

11. management view level

(1) In addition to adding views, UIView also provides methods for managing view levels (see the table below ).

　　

12. Important view attributes

(1) As the BaseClass of other UI controls, UIView provides many attributes (see the table below ):

　　

Iv. UILabel

1. What is UILabel?

(1) UILabel (Label): a control that displays text. In the App, UILabel is the most frequently used control.

(2) UILabel is a sub-class of UIView. As a sub-class, UILabel extends the text display function. UILabel is a view that can display text.

2. How to Use UILabel?

(1) The procedure for creating a UILabel is similar to that for creating a UIView.

① Open up space and initialize (if this class has an initialization method, use your own; otherwise, use the parent class ).

② Set attributes related to text control.

③ Add it to the parent view for display.

④ Release.

(2) view creation code:

UILabel * userNameLabel = [[UILabel alloc] initWithFrame: CGRectMake (30,100,100, 30)];

UserNameLabel. text = @ "username ";

[ContainerView addSubview: userNameLabel];

[UserNameLabel release];

3. How to Control text display?

(1) UILabel is mainly used to display a piece of text. Therefore, many APIs related to the displayed text are provided (see the table below)

4. Section

(1) UIView is the base class of all visual controls.

(2) UILabel is a view with specific appearance and functions.

(3) UILabel focuses on text presentation.

V. Summary

(1) The App uses a window to present the content. A program generally creates only one window.

(2) All elements seen in the App are UIView and its sub-classes.

(3) As the BaseClass of all visual controls, UIView provides many attributes and methods. Display Effect control (frame, alpha, etc.), view addition and removal (addSubview:), view level adjustment (bringSubviewToFront:), etc.

(4) UILabel is a specific view with its own focus

6. the next article will continuously update related knowledge point exercises;

Email: dingding3w@126.com