Several Basic knowledge points about view-iOS development

Generally, I do not use interface builder to draw interfaces, but use pureCodeInstead of installing B, I just switched from VI to xcode. I am not used to interface builder. Of course, I will also use it if needed. The existence of a thing is not absolutely good or bad, but the existence of Time and Space determines its value.

(I forgot to talk about it. My environment is xcode4.2)

First, you must understand several basic concepts.

1) Three structs: cgpoint, cgsize, and cgrect

1. cgpoint

 

1. /* Points .*/
2.  
3. Struct cgpoint {
4. Cgfloat X;
5. Cgfloat y;
6. };
7. Typedef struct cgpoint;

You must have understood this and will not explain it again. 2. cgsize

1. /* Sizes .*/
2.  
3. Struct cgsize {
4. Cgfloat width;
5. Cgfloat height;
6. };
7. Typedef struct cgsize;

Copy code

Not explained.
3. cgrect

1. /* Rectangles .*/
2.  
3. Struct cgrect {
4. Cgpoint origin; // The offset is relative to the parent window.
5. Cgsize size;
6. };
7. Typedef struct cgrect;

It is also not explained.
The three struct types are in the same header file: cggeometry. h
(2) Several Methods
1. cgrectmake

1. Cg_inline cgrect
2. Cgrectmake (cgfloat X, cgfloat y, cgfloat width, cgfloat height)
3. {
4. Cgrect rect;
5. Rect. Origin. x = x; rect. Origin. Y = y;
6. Rect. Size. width = width; rect. Size. Height = height;
7. Return rect;
8. }

Copy code

yes, this method is to make a rect and determine the origin (start point, in the upper left corner), the width and height can be used to draw a rect (rectangle) function with a fixed position and size. This function is declared as an inline function because it is relatively small, the second reason is that we need a certain degree of efficiency when drawing the interface. This function is still hidden in the header file: cggeometry. h 3) Basic interface elements: window and view) to display content on the screen, you must first create a window to carry content. To create a window, you need a border (frame ), the underlying structure containing the border information is cgrect. Each object that can display itself on the screen has a border that defines its display area. However, many high-level view classes automatically calculate this information. Other classes are set through an initwithframe initialization method during view initialization. Let's get to know another class: uiscreen. The uiscreen class represents the screen. Through this class, we can obtain the desired stuff.

1. Cgrect screenbounds = [[uiscreen mainscreen] bounds]; // A rect with the status bar is returned.
2. Cgrect viewbounds = [[uiscreen mainscreen] applicationframe]; // rect that does not contain the status bar
3. // Both screenbounds and viewbounds are relative to the device screen.
4. // Therefore, screenbounds. Origin. x = 0.0; screenbounds. oringin. Y = 0.0;
5. Screenbounds. Size. width = 320; screenbounds. Size. Height = 480 (or other resolutions are different)
6. // So screenbounds. origin. X == 0.0; screenbounds. oringin. y = 20.0; (because the height of the status bar is 20 pixels) screenbounds. size. width = 320; screenbounds. size. height = 480

Under uiview, let's take a look at the uiview class. This class inherits from uiresponder. When we look at this name, we know that it is the canvas for display. If we say that we compare window to a frame. The size of the canvas is determined by the painter. With the canvas, we can apply it as needed. I will paste a lot of simple things in the library. If there are too many things to paste it out, it is not very good. Let's see it in the library file. This class is in uiview. h. Next we will first learn some basic things, and other things will be launched later.

1. Uiview * myview = [[uiview alloc] initwithframe: cgrectmake (0.0, 0.0, 200.0, 400.0)]; // a canvas is created to define the position relative to the parent window, and the size.

We can add this canvas to other canvases. The specific method will be described later. We can also draw other interesting things on this canvas, which will be explained in detail later. Uiwindowuiwindow inherits from uiview. This may be a logical obstacle. How can I inherit a picture frame from the canvas? Do not go too far to the tip of the horn. Isn't the frame in the same shape as the canvas? Take a canvas and use some methods to strengthen it. Can it be used as a frame? This is why a view can be directly added to another view. Take a look at the system initialization process (in application didfinishlauchingwitexceptions ):

1. Self. Window = [[[uiwindow alloc] initwithframe: [[uiscreen mainscreen] bounds] autorelease];
2. Self. Window. backgroundcolor = [uicolor graycolor]; // set a background color for the window.
3. [Self. Window makekeyandvisible]; // display the window

Copy code

Practical drills: I will use a comprehensive example to summarize my learning achievements and thoroughly understand what I have learned. I think that since I have chosen to write code, I need to understand the principle, otherwise, you may not know why.ProgramPersonnel. 1) create a new project and select the empty application name lw1.
2) In application didfinishlaunchingwithoptions, you will find that the system has already built a frame. Now we will use the system to help us build a frame. Of course you can also create a frame by yourself, but it's not necessary. I forgot to mention that an application can only have one frame.

2. -(Bool) Application :( uiapplication *) Application didfinishlaunchingwitexceptions :( nsdictionary *) launchoptions
4. {
6. Self. Window = [[[uiwindow alloc] initwithframe: [[uiscreen mainscreen] bounds] autorelease]; // The system helps you create a frame.
8. // Override point for customization after application launch.
12. // Test the difference between bounds and aplicationframe.
14. Cgrect bound = [[uiscreen mainscreen] bounds];
16. Nslog (@ "boundwidth: % F boundheight: % F", bound. Size. Width, bound. Size. Height );
18. Nslog (@ "boundx: % F boundy: % F", bound. Origin. X, bound. Origin. y );
22. Cgrect appbound = [[uiscreen mainscreen] applicationframe];
24. Nslog (@ "appboundwidth: % F appboundheight: % F"
26. , Appbound. Size. Width, appbound. Size. Height );
28. Nslog (@ "appboundx: % F appboundy: % F", appbound. Origin. X, appbound. Origin. y );
30.  
32. // Paint the first canvas in blue. The size is 320x100.
34. Cgrect cgone = cgrectmake (0.0, 0.0, 320,100); // draw a rectangle and initialize the position and size.
36. Uiview * v_one = [[uiview alloc] initwithframe: cgone]; // initialize the view
38. V_one.backgroundcolor = [uicolor bluecolor]; // blue
40. [Self. Window addsubview: v_one]; // directly add it to the frame.
44. // Pay attention to its location in the second part.
46. Cgrect cgtwo = cgrectmake (0.0, 100,160,100); // draw a rectangle, initial position, and size.
48. Uiview * v_two = [[uiview alloc] initwithframe: cgtwo]; // initialize the view
50. V_two.backgroundcolor = [uicolor redcolor]; // red
52. [Self. Window addsubview: v_two]; // overlay the image to the frame.
54. // Pay attention to the third part.
56. Cgrect cgthree = cgrectmake (160,100,160,100 );//
58. Uiview * v_three = [[uiview alloc] initwithframe: cgthree]; //
60. V_three.backgroundcolor = [uicolor greencolor]; //
62. [Self. Window addsubview: v_three]; //
64. // Block 4 pay attention to its location
66. Cgrect cgfour = cgrectmake (0.0, 260,320,200 );//
68. Uiview * v_four = [[uiview alloc] initwithframe: cgfour]; //
70. V_four.backgroundcolor = [uicolor orangecolor]; //
72. [Self. Window addsubview: v_four]; //
74. // The fifth part. Calculate its position and check its effect,
76. You can try to move the code above the first initialization, with unexpected results.
78. Cgrect cgfive = cgrectmake (100,150,160,200 );
80. Uiview * v_five = [[uiview alloc] initwithframe: cgfive];
82. V_five.backgroundcolor = [uicolor yellowcolor];
84. [Self. Window addsubview: v_five];
86. Self. Window. backgroundcolor = [uicolor graycolor]; //
88. [Self. Window makekeyandvisible]; //
90. // Remember release
92. [V_one release];
94. [V_two release];
96. [V_three release];
98. [V_four release];
100. [V_five release];
102. Return yes;
104. }

do you see colorful blocks? Haha, is it a sense of accomplishment? It is really not worth a sense of accomplishment. You can accurately calculate the size and position. There are several changes, as if it was time to go back to Div + CSS. It is really interesting, the disadvantage of this program is that we failed to mark the color block on each color block