iOS開發UI篇—Quartz2D簡單使用（三）

 

1、經過slider控制圓的縮放

1.實現過程

新建一個項目，新建一個繼承自UIview的類，並和storyboard中自定義的view進行關聯。

界面搭建，如圖：

代碼示例：

YYViewController.m文件

 1 //
 2 //  YYViewController.m
 3 //  04-對圓進行縮放
 4 //
 5 //  Created by apple on 14-6-11.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "YYview.h"
11 
12 @interface YYViewController ()
13 @property (weak, nonatomic) IBOutlet YYview *circleView;
14 - (IBAction)valueChange:(UISlider *)sender;
15 
16 @end
17 
18 @implementation YYViewController
19 
20 - (void)viewDidLoad
21 {
22     [super viewDidLoad];
23     // Do any additional setup after loading the view, typically from a nib.
24 }
25 
26 
27 - (IBAction)valueChange:(UISlider *)sender {
28     //當值改變的時候，把值傳遞給view,改變圓的半徑
29     NSLog(@"%f",sender.value);
30     //把sender的值傳遞給自定義view，設置圓的半徑
31     self.circleView.radius=sender.value;
32 }
33 @end

YYview.h文件

 1 //
 2 //  YYview.h
 3 //  04-對圓進行縮放
 4 //
 5 //  Created by apple on 14-6-11.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 
11 @interface YYview : UIView
12 //提供一個屬性來接收外界傳入的半徑
13 @property(nonatomic,assign)float radius;
14 @end

YYview.m文件

 1 //
 2 //  YYview.m
 3 //  04-對圓進行縮放
 4 //
 5 //  Created by apple on 14-6-11.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYview.h"
10 
11 @implementation YYview
12 //自定義view中的圓不顯示
13 //重寫set方法，爲半徑賦值
14 -(void)setRadius:(float)radius
15 {
16     _radius=radius;
17     //通知自定義的view從新繪製圖形
18     [self setNeedsDisplay];
19 }
20 
21 //若是view是從xib或storyboard中建立出來的會先調用awakefromnib方法
22 - (void)awakeFromNib
23 {
24     //在這裏爲圓的半徑設定一個初始的值
25     self.radius = 20;
26 }
27 
28 - (void)drawRect:(CGRect)rect
29 {
30     //1.獲取圖形上下文
31     CGContextRef ctx=UIGraphicsGetCurrentContext();
32     //2.繪圖
33     //在自定義的view中畫一個圓
34     CGContextAddArc(ctx, 100, 100, self.radius, 0, 2*M_PI, 0);
35     //設置圓的填充顏色
36     [[UIColor grayColor]set];
37     
38     //3.渲染
39 //    CGContextStrokePath(ctx);
40     CGContextFillPath(ctx);
41 }
42 
43 
44 @end

效果：

       

2.注意點：

drawRect:方法不能由咱們本身手動調用，只能由系統來調用。

drawRect:調用的時機：當第一次顯示或者一個重繪事件發生時調用。

setNeedsDisplay方法：從新繪製，調用這個方法就會通知自定義的view從新繪製畫面，調用drawRect:。

提示：當一個view從xib或storyboard建立出來時，會調用awakefromnib方法。

3.補充

能夠經過slider的value屬性監聽值的改變，固然也能夠指定value的取值範圍（這裏設定爲0~100）。

2、刷幀效果

說明：把雪花狀的圖片繪製到view上，實現圖片在視圖中下落的效果。

1.實現代碼：

 1 //
 2 //  YYview.m
 3 //  05-刷幀動畫
 4 //
 5 //  Created by apple on 14-6-11.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYview.h"
10 
11 //私有擴展
12 @interface YYview  ()
13 @property(nonatomic,assign)float imageY;
14 
15 @end
16 @implementation YYview
17 
18 
19 -(id)initWithCoder:(NSCoder *)aDecoder
20 {
21     //請注意這裏必定要先初始化父類的構造方法
22     if (self=[super initWithCoder:aDecoder]) {
23         NSLog(@"initWithCoder:");
24         
25         //NSTimer通常用於定時的更新一些非界面上的數據,告訴多久調用一次
26         //使用定時器,使用該定時器會出現卡頓的現象
27 //        [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];
28         
29         // CADisplayLink刷幀，默認每秒刷新60次
30         //該定時器建立以後，默認是不會執行的，須要把它加載到消息循環中
31        CADisplayLink *display= [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImage)];
32         [display addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
33      
34     }
35     return self;
36 }
37 
38 -(void)updateImage
39 {
40     //調用該方法重繪畫面
41     [self setNeedsDisplay];
42 }
43 -(void)awakeFromNib
44 {
45     NSLog(@"awakeFromNib");
46 }
47 
48 - (void)drawRect:(CGRect)rect
49 {
50     //把圖片繪製到view上
51 
52     //每次調用該方法對畫面進行重繪時，imageY的值就+5
53     self.imageY+=5;
54       //判斷，當雪花超出屏幕的時候，讓圖片從頭開始降落
55     if (self.imageY>rect.size.height) {
56         self.imageY=0;
57     }
58     UIImage *image=[UIImage imageNamed:@"snow"];
59     [image drawAtPoint:CGPointMake(0, self.imageY)];
60 
61     UIImage *image2=[UIImage imageNamed:@"me"];
62     [image2 drawAtPoint:CGPointMake(80, self.imageY)];
63     
64 }
65 
66 @end

實現效果

         

2.重要說明

（1）下面兩個方法的調用順序

-(void)awakeFromNib

-(id)initWithCoder:(NSCoder *)aDecoder

提示：若是view是從xib或storyboard中建立能夠調用awakefromnib方法，歸檔。從文件建立view，其實會先調用initwithcoder這個方法。xib和storyboard也是文件。

上面兩個方法，-(id)initWithCoder:(NSCoder *)aDecoder會先調用。實現該方法須要實現NSCoding協議，因爲建立的UIView默認就已經實現了該協議。

能夠進入到頭文件查看：

運行新建的程序，經過打印能夠驗證上面兩個方法的調用順序。

（2）兩個定時器

第一個：

[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];

說明： NSTimer通常用於定時的更新一些非界面上的數據,告訴多久調用一次

第二個：

        CADisplayLink *display= [CADisplayLink displayLinkWithTarget:selfselector:@selector(updateImage)];

        [display addToRunLoop:[NSRunLoopmainRunLoop] forMode:NSDefaultRunLoopMode];

　　說明： CADisplayLink刷幀，默認每秒刷新60次。該定時器建立以後，默認是不會執行的，須要把它加載到消息循環中