目录:
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);