目录：
1. View绘制
1.1 做出自己的视图对象
TRCell : UITableViewCell : UIView
UIButton UILabel UITextField UIImageView …
进度条
1.2 视图对象根据数据显示
1> 视图对象显示属性
这种属性一般与业务逻辑无关，只属性于显示
2> 重绘
当视图对象的显示属性发生改变，则必须重绘视图，重绘视图的一般做法：
覆盖属性的setter方法
完成setter方法中的正常赋值等操作
向当前视图对象发setNeedsDisplay消息请求重绘
1.3 视图对象绘制时的顺序
1> 铺背景色
2> 调用drawRect方法
3> 绘制子视图(子视图重复此3步)
1 -(void)setValue:(CGFloat)value{ 2 3 _value = value; 4 5 // 刷新界面， 向view发消息：setNeedDisplay， 系统会去调用drawRect方法进行界面的重新显示。 6 7 [self setNeedsDisplay]; 8 9 } 10 11 // M_PI π 12 13 // M_PI_2 π/2 14 15 // M_PI_4 π/4 16 17 // M_2_PI π/5 18 19 // M_1_PI π/10 20 21 // Only override drawRect: if you perform custom drawing. 22 23 // An empty implementation adversely affects performance during animation. 24 25 - (void)drawRect:(CGRect)rect 26 27 { 28 29 // Drawing code 30 31 [super drawRect:rect]; 32 33 CGContextRef context = UIGraphicsGetCurrentContext(); 34 35 CGContextSaveGState(context); 36 37 38 39 UIBezierPath *path = [UIBezierPath bezierPath]; 40 41 CGFloat width = self.bounds.size.width; 42 43 CGFloat height = self.bounds.size.height; 44 45 CGFloat minVal = width > height ? height : width; 46 47 CGFloat radius = minVal / 2 - 10; 48 49 [path addArcWithCenter:CGPointMake(width / 2, height / 2) radius:radius startAngle:M_PI_2 * 3 endAngle:M_PI_2 * 3 + M_PI * 2 * self.value clockwise:YES]; 50 51 [path moveToPoint:CGPointMake(width / 2, 0)]; 52 53 [path addLineToPoint:CGPointMake(width / 2, height)]; 54 55 [path moveToPoint:CGPointMake(0, height / 2)]; 56 57 [path addLineToPoint:CGPointMake(width, height / 2)]; 58 59 path.lineWidth = 1; 60 61 path.lineCapStyle = kCGLineJoinRound; 62 63 [[UIColor blackColor] setStroke]; 64 65 [path stroke]; 66 67 68 69 CGContextRestoreGState(context); 70 71 }
2. 绘制曲线
贝塞尔曲线:
起点， 终点， 控制点1， 控制点2
用程序画图标…
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 15 UIBezierPath *path = [UIBezierPath bezierPath]; 16 17 // 起点 18 19 [path moveToPoint:CGPointMake(60, 20)]; 20 21 // addCurveToPoint终点 controlPoint1控制点1 controlPoint2控制点2 22 23 [path addCurveToPoint:CGPointMake(20, 120) controlPoint1:CGPointMake(20, 20) controlPoint2:CGPointMake(60, 120)]; 24 25 // 起点是20, 120 终点60, 220 控制点1:60, 120 控制点2：20, 220 26 27 [path addCurveToPoint:CGPointMake(60, 220) controlPoint1:CGPointMake(60, 120) controlPoint2:CGPointMake(20, 220)]; 28 29 [[UIColor redColor] setStroke]; 30 31 path.lineWidth = 3; 32 33 [path stroke]; 34 35 36 CGContextRestoreGState(context); 37 38 }
3. 绘制文字
将字符串直接画到视图中
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 NSString *str1 = @"hello world..."; 14 15 NSDictionary *attributes = @{NSFontAttributeName: [UIFont systemFontOfSize:30],NSForegroundColorAttributeName:[UIColor redColor]}; 16 17 // 使用坐标绘制字符串，不好的地方是如果字符串超过屏幕宽度就看不到了 18 19 [str1 drawAtPoint:CGPointMake(10, 20) withAttributes:attributes]; 20 21 NSString *str2 = @"hello world...hello world...hello world...hello world..."; 22 23 // 使用rect绘制字符串，可以解决上面的问题，不过宽度和高度是写死的，如果高度写死那么如果字符串超出这个高度就也看不见了 24 25 [str2 drawInRect:CGRectMake(10, 50, 300, 100) withAttributes:attributes]; 26 27 NSString *str3 = @"内容未知。。。内容未知。。。内容未知。。。内容未知。。。内容未知。。。"; 28 29 // 使用有弹性的rect绘制字符串，解决以上问题，高度是系统根据字符串计算的，options要使用LineFragmentOrigin 30 31 CGRect size = [str3 boundingRectWithSize:CGSizeMake(200, 600) options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil]; 32 33 size.origin.x = 10; 34 35 size.origin.y = 200; 36 37 // NSLog(@"%lf,%lf",size.size.width,size.size.height); 38 39 [str3 drawInRect:size withAttributes:attributes]; 40 41 CGContextRestoreGState(context); 42 43 }
搜索：ios Quartz 2D可参考更多资料
4 贴图
4.1 基本概念
ios设备从显示设备上分两类，retina（视网膜）屏幕（看不见像素点）1个点4个像素，非retina，1个点1个像素
设备 像素 点
iphone3Gs(非retina) 320x480 320x480
iphone4/4s(retina) 640x960 320x480
iphone5/5s/5c(retina) 640x1130 320x568
ipad1,2,MIN1非retina 1024x768 1024x768
new ipad,Air,retain 2048x1536 1024x768
4.2 加载图片
wecome1@2x.jpg
wecome1.jpg
根据设备优先选择wecome1@2x.jpg，没找到就使用wecome1.jpg
[UIImage imageName:@"Wecome1.jpg"];
if(当前设备是retina){
if（存在wecome1@2x.jpg） return wecome1@2x.jpg
else return wecome1.jpg
}else{
return wecome1.jpg
}
作为程序员，需要将Wecome1.jpg, wecome1@2x.jpg导入到项目中，写程序时，可以不用理会wecome1@2x.jpg
4.3给控件贴图
按钮的贴图
1> 控件的状态：
normal 正常
highlighted 高亮
disabled 不可用状态
selected 被选中状态
代码/Storyboard
1 - (void)viewDidLoad 2 3 { 4 5 [super viewDidLoad]; 6 7 UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; 8 9 UIImage *image = [UIImage imageNamed:@"ToolViewEmotion"]; 10 11 UIImage *imageHL = [UIImage imageNamed:@"ToolViewEmotionHL"]; 12 13 [button setImage:image forState:UIControlStateNormal]; 14 15 [button setImage:imageHL forState:UIControlStateHighlighted]; 16 17 button.frame = CGRectMake(30, 100, 35, 35); 18 19 [self.view addSubview:button]; 20 21 }
2>美工提供图片时：
xxxxx.png
xxxxx@2x.png
xxxxxHL.png
xxxxxHL@2x.png 高亮
xxxxxxSelected.png
xxxxxxSelected@2x.png 被选中
4.4 NavigationBar贴图
self.navigationController
.navigationBar
setBackgroundImage:xxx
1 - (void)viewDidLoad 2 3 { 4 5 [super viewDidLoad]; 6 7 UIImage *image = [UIImage imageNamed:@"navigation_bar.png"]; 8 9 // 通过9切片技术切image 10 11 UIImage *resizableImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10) resizingMode:UIImageResizingModeStretch]; 12 13 // 给navigationBar贴图 14 15 [self.navigationController.navigationBar setBackgroundImage:resizableImage forBarMetrics:UIBarMetricsDefault]; 16 17 }
4.5 9切片技术(9 Slice)
把一张图切成9份，不同份进行不同的拉伸，以保持最初的设计。
可以用于消息框、新闻栏、栏目框...
程序代码实现
基本原则：
四个角不变
上下两边横向伸缩
左右两边纵向伸缩
中间横向纵向伸缩
模式：
Stretch : 伸缩
Tile : 复制
用工具Xcode5切
只支持Xcode5和iOS7
1 - (void)viewDidLoad 2 3 { 4 5 [super viewDidLoad]; 6 7 UIImage *image = [UIImage imageNamed:@"delete_btn.png"]; 8 9 // 9切片技术 10 11 UIImage *resizingImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(11, 11, 11, 11) resizingMode:UIImageResizingModeStretch];// 拉伸 12 13 [self.button setBackgroundImage:resizingImage forState:UIControlStateNormal]; 14 15 }
作业:
1. 绘制聊天气泡， 根据作业1资源
TRMessageView
-NSString *text;
气泡需要保持右上角离屏幕固定
2. 美化一个控件：UISlide
自己查文档