11-UIKit（Storyboard、View的基本概念、繪製圖形、UIBezierPath）

目錄：

1. Storyboard

2. Views

3. View的基本概念介紹

4. 繪製圖形

5. UIBezierPath

回到頂部

1. Storyboard

 

      1.1 靜態表視圖

           1）Section能夠增長、刪除、修改頭腳文字

           2）Cell能夠增長、刪除、調整類型、修改文字、修改輔助視圖類型

           3)  自定義accessoryView:

                 將須要作輔助視圖的控件拖拽到VC下的小黑條

                 選擇Cell，第6個檢查器,連線accessoryView到小黑條上的控件

           4）自定義Cell  

                 拖拽一個Cell或選擇一個已有的Cell

                 檢查器4中將Style設置爲Custom

                 拖拽須要的控件到Cell中

           5) 調整TableView的高度

                 選擇場景， 檢查器4  Size-->freeForm

                 從左側選擇TableView, 檢查器5  View-->Height 修改此值

           6) 增長Cell

                 從右側對象庫中拖拽一個Cell到TableView

           7) 頭視圖

                 tableView.tableHeaderView

                 直接拖拽一個視圖到表頭

           8) 複製Cell

                 Command+C Command+V

           9) 跳轉

                 選中你要從哪一個Cell跳轉

                 直接拉線到新的場景

           10）須要增長自定義Cell中的控件代碼時，須要再定義一個類

                 1>定義TableViewController類，繼承UITableViewController

                 2>刪除datasource和delegate協議規定的全部相關方法,不然不會顯示靜態的Cell

                 3>選擇場景，在檢查器3綁定類

                 4>增長Cell中的控件須要的代碼(鏈接屬性，定義方法)

      1.2 動態表視圖

           1) 系統Cell原型

                 拖拽一個TableViewController後，選擇Cell原型，在Style中選擇一種系統樣式(總共有4種)

                 給原型起名字： identifier屬性

                 在代碼中dequeue時，使用起的名字便可，保證必定會成功建立Cell對象

           2) 自定義Cell原型

                 1>建立時和系統原型作法同樣，可是Style選擇Custom

                 2>定義一個Cell類，在檢查器3中綁定這個類

                 3>根據實際須要拖拽自定義的控件到類中造成屬性

                 4>給自定義的Cell起名, identifier屬性

                 5>建立TableViewController類， 將場景綁定到此類

                 6>在TableViewController中就能夠dequeue自定義的Cell用了

           3) 混合Cell原型

                 在一個TableView中存在多個Cell原型， 這些原型能夠是系統原型，也能夠是自定義原型

      自定義Cell在Storyboard中僅限於當前TableView使用，若是在其餘TableView中重用的話，就須要拷貝。

      有時候，一個自定義的Cell但願在多個場景中使用，那麼就將此Cell單獨定義成xib文件。

 

回到頂部

2. Views

      繪製   quartz 2D

           底層圖形繪製技術，功能強大，難以掌握，不是面向對象，所有都是C語言API

      貼圖  美化

      手勢

      變形

      佈局

      動畫

回到頂部

3. View的基本概念介紹

      3.1 view層主要負責

                 根據Controller的配置，提供顯示界面

                 負責和用戶交互

      3.2 圖型和圖像

           顯示器

                 上面有不少顯像晶體，每個晶體能夠顯示三種顏色(紅綠藍)

                 三種顏色的亮度不一樣，會合成各類不一樣的顏色

                 有1280x800個顯像晶體，顯示器支持的像素1280x800

 

       像素： 一張圖片的像素3200x2000

                 這張圖片有3200x2000個顏色信息

 

                 R   0~255     1Byte    100

                 G  0~255     1Byte    150

                 B   0~255     1Byte    200

          

                 3200x2000x3Byte

 

      圖像劃分:

                 位圖(bitmap), 點陣圖

                            能夠用一個二維數組來保存數據

                            RGB組成每個點

                            有本身的分辨率， 放大後就能看到點

                            這種圖通常會進行壓縮: png(無損壓縮),jpg(有損壓縮),gif,bmp(不壓縮)

 

                 矢量圖

                      通常是幾何圖形， 曲線，直線，圓，半徑， 陰影

                      能夠用代碼寫出這種圖

                      放大和縮小不會失真

                      quartz 2D

 

回到頂部

4. 繪製圖形

      4.1 繪製代碼寫在View中

                 Controller      ---->   viewDidLoad

                 View             ---->   drawRect

                 須要本身寫視圖類，覆蓋drawRect方法，在此方法中進制繪製

      4.2 繪製的基本步驟:

            1) 獲取畫布

            1.5) 保存上下文狀態

            2) 勾勒

            3) 着色

            3.5）恢復上下文狀態

 1     // 1.獲取畫布
 2 
 3     CGContextRef context = UIGraphicsGetCurrentContext();
 4 
 5     CGContextSaveGState(context); // 保存目前上下文狀態
 6 
 7    
 8 
 9     // 2.勾勒
10 
11     CGContextMoveToPoint(context, 100, 100);
12 
13     CGContextAddLineToPoint(context, 100, 200);
14 
15     CGContextAddLineToPoint(context, 200, 100);
16 
17     CGContextAddLineToPoint(context, 100, 100);
18 
19    
20 
21     // 3.着色
22 
23     [[UIColor redColor] setFill]; // 設置填充顏色
24 
25     [[UIColor greenColor] setStroke]; // 設置描邊顏色
26 
27     CGContextDrawPath(context, kCGPathFillStroke);
28 
29    
30 
31     // 恢復狀態
32 
33     CGContextRestoreGState(context);

           [Demo3]

                 拖拽一個UIView到view裏，而後將UIView的類型設置成咱們本身的TRView類型。

 

           注意： drawRect方法永遠是自動調用的，程序員不能主動去調用drawRect方法。

                 若是須要刷新界面， 向view發消息：setNeedDisplay， 系統會去調用drawRect方法進行界面的從新顯示。

 

回到頂部

5. UIBezierPath

      5.1 Bezier  貝塞爾曲線

      5.2 幹什麼用

           用於包裝繪製的C語言API，使之成爲面向對象代碼

      5.3frame 和bounds初步

           frame 表明一個視圖的座標，此座標保存了相對於父視圖的位置

           bounds表明一個視圖自身的座標

           通常狀況下，bounds中的size和frame中的size相同，而bounds中的origin永遠爲0

      5.4 UIBezierPath中的三個屬性:

                 .lineWidth          線寬

                 .lineCapStyle   線終點的風格

                 .lineJoinStyle    兩條線鏈接的風格

 1     CGContextRef context = UIGraphicsGetCurrentContext();
 2 
 3     CGContextSaveGState(context);
 4 
 5    
 6 
 7     // 貝塞爾曲線
 8 
 9     UIBezierPath *path = [UIBezierPath bezierPath];
10 
11     [path moveToPoint:CGPointMake(100, 100)];
12 
13     [path addLineToPoint:CGPointMake(100, 200)];
14 
15     [path addLineToPoint:CGPointMake(200, 100)];
16 
17     [path addLineToPoint:CGPointMake(100, 100)];
18 
19    
20 
21     [[UIColor redColor] setFill];
22 
23     [[UIColor greenColor] setStroke];
24 
25     [path fill];
26 
27     [path stroke];
28 
29    
30 
31     CGContextRestoreGState(context);

      5.5 畫弧線

 

 1 - (void)drawRect:(CGRect)rect
 2 
 3 {
 4 
 5     // Drawing code
 6 
 7     [super drawRect:rect];
 8 
 9     CGContextRef context = UIGraphicsGetCurrentContext();
10 
11     CGContextSaveGState(context);
12 
13 
14     UIBezierPath *path = [UIBezierPath bezierPath];
15 
16     [path moveToPoint:CGPointMake(10, 10)];
17 
18     [path addLineToPoint:CGPointMake(10, self.bounds.size.height - 10)];
19 
20     [path addLineToPoint:CGPointMake(self.bounds.size.width - 10, 10)];
21 
22     //[path closePath];
23 
24 
25     [[UIColor redColor] setFill];
26 
27     [[UIColor blueColor] setStroke];
28 
29     path.lineWidth = 10;
30 
31     path.lineJoinStyle = kCGLineJoinRound;
32 
33     path.lineCapStyle = kCGLineCapRound;
34 
35 
36     [path fill];
37 
38     [path stroke];
39 
40     CGContextRestoreGState(context);
41 }

 

 

做業：

      1. 畫一個圓角矩形

           四個圓角的半徑必須同樣

 1     // 圓角巨型
 2 
 3     [super drawRect:rect];
 4 
 5     CGContextRef context = UIGraphicsGetCurrentContext();
 6 
 7     CGContextSaveGState(context);
 8 
 9     UIBezierPath *path = [UIBezierPath bezierPath];
10 
11     [path addArcWithCenter:CGPointMake(105, 105) radius:5 startAngle:M_PI endAngle:M_PI * 1.5 clockwise:YES];
12 
13     [path moveToPoint:CGPointMake(105, 100)];
14 
15     [path addLineToPoint:CGPointMake(195, 100)];
16 
17     [path addArcWithCenter:CGPointMake(195, 105) radius:5 startAngle:M_PI *1.5 endAngle:M_PI * 2 clockwise:YES];
18 
19     [path addLineToPoint:CGPointMake(200, 155)];
20 
21     [path addArcWithCenter:CGPointMake(195, 155) radius:5 startAngle:0 endAngle:M_PI_2 clockwise:YES];
22 
23     [path addLineToPoint:CGPointMake(105, 160)];
24 
25     [path addArcWithCenter:CGPointMake(105, 155) radius:5 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
26 
27     [path addLineToPoint:CGPointMake(100, 105)];
28 
29     [[UIColor redColor] setStroke];
30 
31     [path stroke];
32 
33     CGContextRestoreGState(context);