目录：
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步)
-(void)setValue:(CGFloat)value{
_value = value;
// 刷新界面， 向view发消息：setNeedDisplay， 系统会去调用drawRect方法进行界面的重新显示。
[self setNeedsDisplay];
}
// M_PI π
// M_PI_2 π/2
// M_PI_4 π/4
// M_2_PI π/5
// M_1_PI π/10
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat width = self.bounds.size.width;
CGFloat height = self.bounds.size.height;
CGFloat minVal = width > height ? height : width;
CGFloat radius = minVal / - ;
[path addArcWithCenter:CGPointMake(width / , height / ) radius:radius startAngle:M_PI_2 * endAngle:M_PI_2 * + M_PI * * self.value clockwise:YES];
[path moveToPoint:CGPointMake(width / , )];
[path addLineToPoint:CGPointMake(width / , height)];
[path moveToPoint:CGPointMake(, height / )];
[path addLineToPoint:CGPointMake(width, height / )];
path.lineWidth = ;
path.lineCapStyle = kCGLineJoinRound;
[[UIColor blackColor] setStroke];
[path stroke];
CGContextRestoreGState(context);
}
2. 绘制曲线
贝塞尔曲线:
起点， 终点， 控制点1， 控制点2
用程序画图标…
- (void)drawRect:(CGRect)rect
{
// Drawing code
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
UIBezierPath *path = [UIBezierPath bezierPath];
// 起点
[path moveToPoint:CGPointMake(, )];
// addCurveToPoint终点 controlPoint1控制点1 controlPoint2控制点2
[path addCurveToPoint:CGPointMake(, ) controlPoint1:CGPointMake(, ) controlPoint2:CGPointMake(, )];
// 起点是20, 120 终点60, 220 控制点1:60, 120 控制点2：20, 220
[path addCurveToPoint:CGPointMake(, ) controlPoint1:CGPointMake(, ) controlPoint2:CGPointMake(, )];
[[UIColor redColor] setStroke];
path.lineWidth = ;
[path stroke];
CGContextRestoreGState(context);
}
3. 绘制文字
将字符串直接画到视图中
- (void)drawRect:(CGRect)rect
{
// Drawing code
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
NSString *str1 = @"hello world...";
NSDictionary *attributes = @{NSFontAttributeName: [UIFont systemFontOfSize:],NSForegroundColorAttributeName:[UIColor redColor]};
// 使用坐标绘制字符串，不好的地方是如果字符串超过屏幕宽度就看不到了
[str1 drawAtPoint:CGPointMake(, ) withAttributes:attributes];
NSString *str2 = @"hello world...hello world...hello world...hello world...";
// 使用rect绘制字符串，可以解决上面的问题，不过宽度和高度是写死的，如果高度写死那么如果字符串超出这个高度就也看不见了
[str2 drawInRect:CGRectMake(, , , ) withAttributes:attributes];
NSString *str3 = @"内容未知。。。内容未知。。。内容未知。。。内容未知。。。内容未知。。。";
// 使用有弹性的rect绘制字符串，解决以上问题，高度是系统根据字符串计算的，options要使用LineFragmentOrigin
CGRect size = [str3 boundingRectWithSize:CGSizeMake(, ) options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil];
size.origin.x = ;
size.origin.y = ;
// NSLog(@"%lf,%lf",size.size.width,size.size.height);
[str3 drawInRect:size withAttributes:attributes];
CGContextRestoreGState(context);
}
搜索：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
- (void)viewDidLoad
{
[super viewDidLoad];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *image = [UIImage imageNamed:@"ToolViewEmotion"];
UIImage *imageHL = [UIImage imageNamed:@"ToolViewEmotionHL"];
[button setImage:image forState:UIControlStateNormal];
[button setImage:imageHL forState:UIControlStateHighlighted];
button.frame = CGRectMake(, , , );
[self.view addSubview:button];
}
2>美工提供图片时：
xxxxx.png
xxxxx@2x.png
xxxxxHL.png
xxxxxHL@2x.png 高亮
xxxxxxSelected.png
xxxxxxSelected@2x.png 被选中
4.4 NavigationBar贴图
self.navigationController
.navigationBar
setBackgroundImage:xxx
- (void)viewDidLoad
{
[super viewDidLoad];
UIImage *image = [UIImage imageNamed:@"navigation_bar.png"];
// 通过9切片技术切image
UIImage *resizableImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(, , , ) resizingMode:UIImageResizingModeStretch];
// 给navigationBar贴图
[self.navigationController.navigationBar setBackgroundImage:resizableImage forBarMetrics:UIBarMetricsDefault];
}
4.5 9切片技术(9 Slice)
把一张图切成9份，不同份进行不同的拉伸，以保持最初的设计。
可以用于消息框、新闻栏、栏目框...
程序代码实现
基本原则：
四个角不变
上下两边横向伸缩
左右两边纵向伸缩
中间横向纵向伸缩
模式：
Stretch : 伸缩
Tile : 复制
用工具Xcode5切
只支持Xcode5和iOS7
- (void)viewDidLoad
{
[super viewDidLoad];
UIImage *image = [UIImage imageNamed:@"delete_btn.png"];
// 9切片技术
UIImage *resizingImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(, , , ) resizingMode:UIImageResizingModeStretch];// 拉伸
[self.button setBackgroundImage:resizingImage forState:UIControlStateNormal];
}
作业:
1. 绘制聊天气泡， 根据作业1资源
TRMessageView
-NSString *text;
气泡需要保持右上角离屏幕固定
2. 美化一个控件：UISlide
自己查文档