12-UIKit（View绘制、绘制曲线、绘制文字、贴图）

目录：

1. View绘制

2. 绘制曲线

3. 绘制文字

4. 贴图

回到顶部

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

自己查文档