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.获取画布

     CGContextRef context = UIGraphicsGetCurrentContext();

     CGContextSaveGState(context); // 保存目前上下文状态

     // 2.勾勒

     CGContextMoveToPoint(context, , );

     CGContextAddLineToPoint(context, , );

     CGContextAddLineToPoint(context, , );

     CGContextAddLineToPoint(context, , );

     // 3.着色

     [[UIColor redColor] setFill]; // 设置填充颜色

     [[UIColor greenColor] setStroke]; // 设置描边颜色

     CGContextDrawPath(context, kCGPathFillStroke);

     // 恢复状态

     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    两条线连接的风格

     CGContextRef context = UIGraphicsGetCurrentContext();

     CGContextSaveGState(context);

     // 贝塞尔曲线

     UIBezierPath *path = [UIBezierPath bezierPath];

     [path moveToPoint:CGPointMake(, )];

     [path addLineToPoint:CGPointMake(, )];

     [path addLineToPoint:CGPointMake(, )];

     [path addLineToPoint:CGPointMake(, )];

     [[UIColor redColor] setFill];

     [[UIColor greenColor] setStroke];

     [path fill];

     [path stroke];

     CGContextRestoreGState(context);

5.5 画弧线

 - (void)drawRect:(CGRect)rect

 {

     // Drawing code

     [super drawRect:rect];

     CGContextRef context = UIGraphicsGetCurrentContext();

     CGContextSaveGState(context);

     UIBezierPath *path = [UIBezierPath bezierPath];

     [path moveToPoint:CGPointMake(, )];

     [path addLineToPoint:CGPointMake(, self.bounds.size.height - )];

     [path addLineToPoint:CGPointMake(self.bounds.size.width - , )];

     //[path closePath];

     [[UIColor redColor] setFill];

     [[UIColor blueColor] setStroke];

     path.lineWidth = ;

     path.lineJoinStyle = kCGLineJoinRound;

     path.lineCapStyle = kCGLineCapRound;

     [path fill];

     [path stroke];

     CGContextRestoreGState(context);
 }

作业：

1. 画一个圆角矩形

四个圆角的半径必须一样

     // 圆角巨型

     [super drawRect:rect];

     CGContextRef context = UIGraphicsGetCurrentContext();

     CGContextSaveGState(context);

     UIBezierPath *path = [UIBezierPath bezierPath];

     [path addArcWithCenter:CGPointMake(, ) radius: startAngle:M_PI endAngle:M_PI * 1.5 clockwise:YES];

     [path moveToPoint:CGPointMake(, )];

     [path addLineToPoint:CGPointMake(, )];

     [path addArcWithCenter:CGPointMake(, ) radius: startAngle:M_PI *1.5 endAngle:M_PI *  clockwise:YES];

     [path addLineToPoint:CGPointMake(, )];

     [path addArcWithCenter:CGPointMake(, ) radius: startAngle: endAngle:M_PI_2 clockwise:YES];

     [path addLineToPoint:CGPointMake(, )];

     [path addArcWithCenter:CGPointMake(, ) radius: startAngle:M_PI_2 endAngle:M_PI clockwise:YES];

     [path addLineToPoint:CGPointMake(, )];

     [[UIColor redColor] setStroke];

     [path stroke];

     CGContextRestoreGState(context);