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);