iOS开发UI篇—Quartz2D简单使用(三)
2015-10-27 16:52
495 查看
一、通过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.实现代码:
实现效果
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次。该定时器创建之后,默认是不会执行的,需要把它加载到消息循环中
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次。该定时器创建之后,默认是不会执行的,需要把它加载到消息循环中
相关文章推荐
- DuiVision开发教程(15)-DUI文本控制基础类
- 【NGUI】监听按钮除OnClick外其他事件的方法,附简易改编的UIButton类
- 斯坦福大学公开课 iOS应用开发教程学习笔记(第七课)UIToolbar、iPad 和iPhone的通用程序
- Uiautomator 快速调试
- deque双端队列&&UVa210 Concurrency Simulator(并行程序模拟)的理解与解析
- Uicc之ICCFileHandler(转)
- iOS开发UI篇—Quartz2D使用(图片剪切)
- Carrier frequency 和 EARFCN的关系
- 032.NSValue NSNumber 包装类
- MQTT学习笔记-让Mosquitto支持Websocket
- 虚幻4 build.cs文件里面的每个字符串List的意义
- 浅谈NGUI的NGUITools类
- 【mongdb报错】Failed global initialization: BadValue Invalid or no user locale set.
- MQTT学习笔记-Mosquitto的安装与启动
- LeetCode 95: Unique Binary Search Trees II
- UIScrollView 和自动布局结合
- No resource found that matches the given name (at 'layout_toLeftOf' with value '@id/tx_search_friend
- LeetCode 96: Unique Binary Search Trees
- Java:字符串缓冲区StringBuffer和StringBuilder的使用
- npm WARN install Refusing to install vue-router as a dependency of itself