關於 UIView 的基礎知識

 

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

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

1.  CGPoint

 

1.     /* Points. */ 

2.      

3.     struct CGPoint { 

4.       CGFloat x; 

5.       CGFloat y; 

6.     }; 

7.     typedef struct CGPoint CGPoint; 

8.     

 

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比作畫框的話。我們就是不斷地在畫框上移除、更換或者疊加畫布，或者在畫布上疊加其他畫布，大小當然由繪畫者來決定了。有了畫布，我們就可以在上面任意施為了。

 

 

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

 

 

UIWindow

UIWindow繼承自UIView，關於這一點可能有點邏輯障礙，畫框怎麼繼承自畫布呢？不要過於去專牛角尖，畫框的形狀不就是跟畫布一樣嗎？拿一塊畫布然後用一些方法把它加強，是不是可以當一個畫框用呢？這也是為什麼一個view可以直接加到另一個view上去的原因了。

 

系統的初始化過程（applicationdidFinishLauchingWithOptions）：

 

1.     self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease]; 

2.     self.window.backgroundColor = [UIColor grayColor];//給window設置一個背景色 

3.     [self.window makeKeyAndVisible];//讓window顯示出來 

 

-------------------------------------------------------------------------------

代碼練習：

1）新建一個工程選擇EmptyApplication   名字為LLL 在applicationdidFinishLaunchingWithOptions裡面，你會發現系統已經建好一個畫框了，我們現在就用系統幫我們建好的畫框，你當然也可以自己建一個畫框，不過沒這個必要了，一個應用程序只能有一個畫框(UIWindow)。

 

 

1.     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 

2.     { 

3.         self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];//系統幫你建畫框 

4.        

5.         //自己測試一下 bounds與aplicationFrame的區別 

6.         CGRect bound = [[UIScreen mainScreen]bounds]; 

7.         NSLog(@"boundwidth:%f    boundheight:%f ",bound.size.width, bound.size.height); 

8.         NSLog(@"boundx:%f    boundy:%f ",bound.origin.x, bound.origin.y); 

9.          

10.        CGRect appBound = [[UIScreen mainScreen]applicationFrame]; 

11.        NSLog(@"appBoundwidth:%f appBoundheight:%f " 

12.               ,appBound.size.width,appBound.size.height); 

13.        NSLog(@"appBoundx:%f    appBoundy:%f ",appBound.origin.x, appBound.origin.y); 

14.     

15.        //畫第一塊畫布然塗成藍色，大小是320 X 100 

16.        CGRect CGone = CGRectMake(0.0, 0.0, 320, 100);//畫個矩形，初始化位置與大小 

17.        UIView *v_one = [[UIView alloc]initWithFrame:CGone];//初始化view 

18.        v_one.backgroundColor = [UIColor blueColor];// 塗成藍色 

19.        [self.window addSubview:v_one];//直接加到畫框上 

20.         

21.        //第二塊注意它的位置 

22.        CGRect CGtwo = CGRectMake(0.0, 100, 160, 100);//畫個矩形、初始化位置與大小 

23.        UIView *v_two = [[UIView alloc]initWithFrame:CGtwo];//初始化view 

24.        v_two.backgroundColor = [UIColor redColor];//塗成紅色 

25.        [self.window addSubview:v_two];//疊加到畫框 

26.        //第三塊注意他的位置 

27.        CGRect CGthree = CGRectMake(160, 100, 160, 100);// 

28.        UIView *v_three = [[UIView alloc]initWithFrame:CGthree];// 

29.        v_three.backgroundColor = [UIColor greenColor];// 

30.        [self.window addSubview:v_three];// 

31.        //第四塊注意它的位置 

32.        CGRect CGfour = CGRectMake(0.0, 260, 320, 200);// 

33.        UIView *v_four = [[UIView alloc]initWithFrame:CGfour];// 

34.        v_four.backgroundColor = [UIColor orangeColor];// 

35.        [self.window addSubview:v_four];// 

36.    //第五塊，計算一下它的位置，看看它的效果， 

37.    你可以讓試一下把這段代碼移到第一快初始化的上面試試，會有意想不到的效果 

38.        CGRect CGfive = CGRectMake(100, 150, 160, 200); 

39.        UIView *v_five = [[UIView alloc]initWithFrame:CGfive]; 

40.        v_five.backgroundColor = [UIColor yellowColor]; 

41.        [self.window addSubview:v_five]; 

42.        self.window.backgroundColor = [UIColor grayColor];// 

43.        [self.window makeKeyAndVisible];// 

44.    //最後記得release 

45.    [v_one  release]; 

46.    [v_two  release]; 

47.    [v_three  release]; 

48.    [v_four  release]; 

49.    [v_five  release]; 

50.        return YES; 

51.    } 

 

 

 

是不是看到五顏六色的塊了？你可以精確計算一下大小與位置，多幾種變化，類似與 CSS+ DIV 進行 網頁中的塊定位