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步)

 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

           自己查文档

posted @ 2014-01-19 20:59  回读(IOS)  阅读(947)  评论(0)  编辑  收藏  举报