iOS开发UI篇—Quartz2D简单使用(三)

iOS开发UI篇—Quartz2D简单使用(三)

一、通过slider控制圆的缩放

1.实现过程

新建一个项目,新建一个继承自UIview的类,并和storyboard中自定义的view进行关联。

界面搭建,如图:

代码示例:

YYViewController.m文件

//
//  YYViewController.m
//  04-对圆进行缩放
//
//  Created by apple on 14-6-11.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYview.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet YYview *circleView;
- (IBAction)valueChange:(UISlider *)sender;

@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}


- (IBAction)valueChange:(UISlider *)sender {
    //当值改变的时候,把值传递给view,改变圆的半径
    NSLog(@"%f",sender.value);
    //把sender的值传递给自定义view,设置圆的半径
    self.circleView.radius=sender.value;
}
@end

YYview.h文件

//
//  YYview.h
//  04-对圆进行缩放
//
//  Created by apple on 14-6-11.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YYview : UIView
//提供一个属性来接收外界传入的半径
@property(nonatomic,assign)float radius;
@end

YYview.m文件

//
//  YYview.m
//  04-对圆进行缩放
//
//  Created by apple on 14-6-11.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYview.h"

@implementation YYview
//自定义view中的圆不显示
//重写set方法,为半径赋值
-(void)setRadius:(float)radius
{
    _radius=radius;
    //通知自定义的view重新绘制图形
    [self setNeedsDisplay];
}

//如果view是从xib或storyboard中创建出来的会先调用awakefromnib方法
- (void)awakeFromNib
{
    //在这里为圆的半径设定一个初始的值
    self.radius = 20;
}

- (void)drawRect:(CGRect)rect
{
    //1.获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //2.绘图
    //在自定义的view中画一个圆
    CGContextAddArc(ctx, 100, 100, self.radius, 0, 2*M_PI, 0);
    //设置圆的填充颜色
    [[UIColor grayColor]set];
    
    //3.渲染
//    CGContextStrokePath(ctx);
    CGContextFillPath(ctx);
}


@end

效果:

 

2.注意点

drawRect:方法不能由我们自己手动调用,只能由系统来调用。
drawRect:调用的时机:当第一次显示或者一个重绘事件发生时调用。
setNeedsDisplay方法:重新绘制,调用这个方法就会通知自定义的view重新绘制画面,调用drawRect:。
提示:当一个view从xib或storyboard创建出来时,会调用awakefromnib方法。
3.补充
可以通过slider的value属性监听值的改变,当然也可以指定value的取值范围(这里设定为0~100)。
二、刷帧效果
说明:把雪花状的图片绘制到view上,实现图片在视图中下落的效果。
1.实现代码:
//
//  YYview.m
//  05-刷帧动画
//
//  Created by apple on 14-6-11.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYview.h"

//私有扩展
@interface YYview  ()
@property(nonatomic,assign)float imageY;

@end
@implementation YYview


-(id)initWithCoder:(NSCoder *)aDecoder
{
    //请注意这里一定要先初始化父类的构造方法
    if (self=[super initWithCoder:aDecoder]) {
        NSLog(@"initWithCoder:");
        
        //NSTimer一般用于定时的更新一些非界面上的数据,告诉多久调用一次
        //使用定时器,使用该定时器会出现卡顿的现象
//        [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];
        
        // CADisplayLink刷帧,默认每秒刷新60次
        //该定时器创建之后,默认是不会执行的,需要把它加载到消息循环中
       CADisplayLink *display= [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImage)];
        [display addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
     
    }
    return self;
}

-(void)updateImage
{
    //调用该方法重绘画面
    [self setNeedsDisplay];
}
-(void)awakeFromNib
{
    NSLog(@"awakeFromNib");
}

- (void)drawRect:(CGRect)rect
{
    //把图片绘制到view上

    //每次调用该方法对画面进行重绘时,imageY的值就+5
    self.imageY+=5;
      //判断,当雪花超出屏幕的时候,让图片从头开始降落
    if (self.imageY>rect.size.height) {
        self.imageY=0;
    }
    UIImage *image=[UIImage imageNamed:@"snow"];
    [image drawAtPoint:CGPointMake(0, self.imageY)];

    UIImage *image2=[UIImage imageNamed:@"me"];
    [image2 drawAtPoint:CGPointMake(80, self.imageY)];
    
}

@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:self selector:@selector(updateImage)];

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

  说明: CADisplayLink刷帧,默认每秒刷新60次。该定时器创建之后,默认是不会执行的,需要把它加载到消息循环中

 

posted on 2016-06-03 17:18  快乐加油站789  阅读(99)  评论(0编辑  收藏  举报

导航