有關View的幾個基礎知識點-IOS開發

我一般情況下不會使用interface builder去畫介面，而是用純程式碼去建立介面，不是裝B，而是剛從vi轉到xcode不久，不太習慣interface builder而已。當然如果需要我也會使用它。一個東西的存在沒有絕對的好與壞，只是存在時間與空間決定了它的價值。

(忘了講了，我的環境是xcode4.2)

首先要弄懂幾個基本的概念。

一）三個結構體：CGPoint、CGSize、CGRect

1.  CGPoint

 

1. /* Points. */
2.  
3. struct CGPoint {
4.   CGFloat x;
5.   CGFloat y;
6. };
7. typedef struct CGPoint CGPoint;

看到這個想必你已經懂了，不再解釋。2.  CGSize

1. /* Sizes. */
2.  
3. struct CGSize {
4.   CGFloat width;
5.   CGFloat height;
6. };
7. typedef struct CGSize CGSize;

複製代碼

不解釋。
3.CGRect

1. /* Rectangles. */
2.  
3. struct CGRect {
4.   CGPoint origin;//位移是相對父視窗的
5.   CGSize size;
6. };
7. typedef struct CGRect CGRect;

同樣 不解釋。
這三個結構體均在一個標頭檔裡：CGGeometry.h
二）幾個方法
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. }

複製代碼

沒錯，這個方法就是make一個rect，定好origin（起點，左上方），寬與高，就可以畫出一個位置與大小確定的rect（矩形）這個函數被聲明為內嵌函式，一是因為它比較小，二是因為在畫介面時我們要求一定的效率。這個函數還是藏在剛剛那個標頭檔裡面：CGGeometry.h三）幾個基本介面元素：window（視窗）、視圖（view）要在螢幕上顯示內容首先要建立一個視窗承載內容，要建立一個視窗，需要一個邊框（frame），含有邊框資訊的底層 結構就CGRect。每個能夠在螢幕上顯示自己的對象都有一個邊框，定義了他的顯示地區，不過許多高層的視圖類會自動計算這一資訊。其他的那些類則在視圖初始化時通過一個initWithFrame的初始化方法來設定。再來認識一個類：UIScreen。UIScreen類代表了螢幕，通過這個類我們可以擷取一些想要的東東。

1. CGrect screenBounds = [ [UIScreen mainScreen]bounds];//返回的是帶有狀態列的Rect
2. CGRect viewBounds = [ [UIScreen mainScreen]applicationFrame];//不包含狀態列的Rect
3. //screenBounds 與 viewBounds 均是相對於裝置螢幕來說的
4. //所以 screenBounds.origin.x== 0.0 ;   screenBounds.oringin.y = 0.0;   
5. screenBounds.size.width == 320;  screenBounds.size.height == 480(或者其他解析度有所差異)
6. //所以 screenBounds.origin.x== 0.0 ;   screenBounds.oringin.y = 20.0;(因為狀態列的高度是20像素)   screenBounds.size.width == 320;  screenBounds.size.height == 480

UIView下面來認識一下UIView類，這個類繼承自UIResponder,看這個名字我們就知道它是負責顯示的畫布，如果說把window比作畫框的話。我們就是不斷地在畫框上移除、更換或者疊加畫布，或者在畫布上疊加其他畫布，大小當然 由繪畫者來決定了。有了畫布，我們就可以在上面任意施為了。很多簡單的東西我會把庫裡面的內容貼出來，如果東西太多貼出來就不太好，朋友們自己去庫檔案裡面看吧。這個類在UIView.h裡面。下面我們先學習一些基礎的東西，其他的東東會在以後慢慢展開。

1. UIView* myView =[[ UIView alloc]initWithFrame:CGRectMake(0.0,0.0,200.0,400.0)];//這裡建立了一塊畫布，定義了相對於父視窗的位置， 以及大小。

我們可以把這塊畫布加到其他畫布上，具體方法後面會講到。我們還可以在這塊畫布上畫上其它好玩的東東，具體情形後面會一一講解。UIWindowUIWindow繼承自UIView，關於這一點可能有點邏輯障礙，畫框怎麼繼承自畫布呢？不要過於去專牛角尖，畫框的形狀不就是跟畫布一樣嗎？拿一塊畫布然後用一些方法把它加強，是不是可以當一個畫框用呢？這也是為什麼 一個view可以直接加到另一個view上去的原因了。看一下系統的初始化過程（在application didFinishLauchingWithOptions裡面）：

1. self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
2. self.window.backgroundColor = [UIColor grayColor];//給window設定一個背景色
3. [self.window makeKeyAndVisible];//讓window顯示出來

複製代碼

實戰演練：沒結束我會用一個綜合的 例子來總結我的學習成果，徹底理解所學，我覺得既然選擇寫代碼，就要理解原理，否則只知其然不知其所以然是不能做一個好的程式員的。1）建立一個工程選擇Empty Application   名字為LW1
2)在application didFinishLaunchingWithOptions裡面，你會發現系統已經建好一個畫框了，我們現在就用系統幫我們建好的畫框，你當然也可以自己建一個畫框，不過沒這個必要了，忘了講了，一個應用程式只能有一個畫框。

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
2. {
3.     self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];//系統幫你建畫框
4.     // Override point for customization after application launch.
5.   
6.     //自己測試一下 bounds與aplicationFrame的區別
7.     CGRect bound = [[UIScreen mainScreen]bounds];
8.     NSLog(@"boundwidth:%f    boundheight:%f ",bound.size.width, bound.size.height);
9.     NSLog(@"boundx:%f    boundy:%f ",bound.origin.x, bound.origin.y);
10.     
11.     CGRect appBound = [[UIScreen mainScreen]applicationFrame];
12.     NSLog(@"appBoundwidth:%f appBoundheight:%f "
13.            ,appBound.size.width,appBound.size.height);
14.     NSLog(@"appBoundx:%f    appBoundy:%f ",appBound.origin.x, appBound.origin.y);
15.  
16.     //畫第一塊畫布然塗成藍色，大小是320 X 100
17.     CGRect CGone = CGRectMake(0.0, 0.0, 320, 100);//畫個矩形，初始化位置與大小
18.     UIView *v_one = [[UIView alloc]initWithFrame:CGone];//初始化view
19.     v_one.backgroundColor = [UIColor blueColor];// 塗成藍色
20.     [self.window addSubview:v_one];//直接加到畫框上
21.     
22.     //第二塊注意它的位置
23.     CGRect CGtwo = CGRectMake(0.0, 100, 160, 100);//畫個矩形、初始化位置與大小
24.     UIView *v_two = [[UIView alloc]initWithFrame:CGtwo];//初始化view
25.     v_two.backgroundColor = [UIColor redColor];//塗成紅色
26.     [self.window addSubview:v_two];//疊加到畫框
27.     //第三塊注意他的位置
28.     CGRect CGthree = CGRectMake(160, 100, 160, 100);//
29.     UIView *v_three = [[UIView alloc]initWithFrame:CGthree];//
30.     v_three.backgroundColor = [UIColor greenColor];//
31.     [self.window addSubview:v_three];//
32.     //第四塊注意它的位置
33.     CGRect CGfour = CGRectMake(0.0, 260, 320, 200);//
34.     UIView *v_four = [[UIView alloc]initWithFrame:CGfour];//
35.     v_four.backgroundColor = [UIColor orangeColor];//
36.     [self.window addSubview:v_four];//
37. //第五塊，計算一下它的位置，看看它的效果，
38. 你可以讓試一下把這段代碼移到第一快初始化的上面試試，會有意想不到的效果
39.     CGRect CGfive = CGRectMake(100, 150, 160, 200);
40.     UIView *v_five = [[UIView alloc]initWithFrame:CGfive];
41.     v_five.backgroundColor = [UIColor yellowColor];
42.     [self.window addSubview:v_five];
43.     self.window.backgroundColor = [UIColor grayColor];//
44.     [self.window makeKeyAndVisible];//
45. //最後記得release
46. [v_one  release];
47. [v_two  release];
48. [v_three  release];
49. [v_four  release];
50. [v_five  release];
51.     return YES;
52. }

<ignore_js_op> <ignore_js_op>   

是不是看到五顏六色的塊了？哈哈，是不是很有成就感呢？確實不值得有啥成就感，你可以精確計算一下大小與位置，多幾種變化，彷彿回到當初DIV+CSS的時候了，確實很有趣，這個程式的不足之處在於我們未能在每個色塊上面標註色塊標記