iOS开发UI篇—Quartz2D(自定义UIImageView控件)
一、实现思路
Quartz2D最大的用途在于自定义View(自定义UI控件)，当系统的View不能满足我们使用需求的时候，自定义View。
使用Quartz2D自定义View，可以从模仿系统的ImageView的使用开始。
需求驱动开发：模仿系统的imageview的使用过程
1.创建
2.设置图片
3.设置frame
4.把创建的自定义的view添加到界面上（在自定义的View中，需要一个image属性接收image图片参数->5)。
5.添加一个image属性(接下来，拿到image之后，应该把拿到的这个image给渲染出来。怎么渲染？自定义的view怎么把图片显示出来？->把图片给画出来，所以需要重写自定义View的drawRect:方法)。
6.重写自定义View的drawRect:方法，在该方法内部画出图形。
二、代码实现
系统自带的ImageView的使用
//
// YYViewController.m
// 02-自定义UIimageview
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYViewController.h"
@interface YYViewController ()
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//系统的UIImageview的使用
// 1.创建一个UIImageView
UIImageView *iv=[[UIImageView alloc]init];
// 2.设置图片
iv.image=[UIImage imageNamed:@"me"];
// 3.设置frame
iv.frame=CGRectMake(100, 100, 100, 100);
// 4.把创建的自定义的view添加到界面上
[self.view addSubview:iv];
}
@end
实现效果：
使用Quartz2D自定义View，代码如下：
新建一个自定义的类，让其继承自UIView,YYimageView.h文件代码如下：
1 // 2 // YYimageView.h 3 // 02-自定义UIimageview 4 // 5 // Created by apple on 14-6-22. 6 // Copyright (c) 2014年 itcase. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h> 10 11 @interface YYimageView : UIView 12 @property(nonatomic,strong)UIImage *image; 13 @end
在自定义类的实现中，重写DrawRect:方法绘制并渲染图形。YYimageView.m文件代码如下：
1 //
2 // YYimageView.m
3 // 02-自定义UIimageview
4 //
5 // Created by apple on 14-6-22.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYimageView.h"
10
11 @implementation YYimageView
12
13 //重写drawRect:方法
14 - (void)drawRect:(CGRect)rect
15 {
16 [self.image drawInRect:rect];
17 }
18
19 @end
在主控制器中，模仿系统自带的UIImageView的使用过程，实现同样的效果。
1 //
2 // YYViewController.m
3 // 02-自定义UIimageview
4 //
5 // Created by apple on 14-6-22.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYViewController.h"
10 #import "YYimageView.h"
11
12 @interface YYViewController ()
13
14 @end
15
16 @implementation YYViewController
17
18 - (void)viewDidLoad
19 {
20 [super viewDidLoad];
21
22 // //系统的UIImageview的使用
23 //// 1.创建一个UIImageView
24 // UIImageView *iv=[[UIImageView alloc]init];
25 //// 2.设置图片
26 // iv.image=[UIImage imageNamed:@"me"];
27 //// 3.设置frame
28 // iv.frame=CGRectMake(100, 100, 100, 100);
29 //// 4.把创建的自定义的view添加到界面上
30 // [self.view addSubview:iv];
31
32
33 //自定义UIImageView
34 //1.创建
35 //2.设置图片
36 //3.设置frame
37 //4.把创建的自定义的view添加到界面上
38 YYimageView *yyiv=[[YYimageView alloc]init];
39 yyiv.image=[UIImage imageNamed:@"me"];
40 yyiv.frame=CGRectMake(100, 100, 100, 100);
41 [self.view addSubview:yyiv];
42
43 }
44 @end
三、完善
存在的问题？
在界面上，添加一个按钮，要求点击按钮，能够实现图片的切换。
1 //
2 // YYViewController.m
3 // 02-自定义UIimageview
4 //
5 // Created by apple on 14-6-22.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYViewController.h"
10 #import "YYimageView.h"
11
12 @interface YYViewController ()
13 @property(nonatomic,strong)UIImageView *imageView;
14 @end
15
16 @implementation YYViewController
17
18 - (void)viewDidLoad
19 {
20 [super viewDidLoad];
21
22 //系统的UIImageview的使用
23 // 1.创建一个UIImageView
24 UIImageView *iv=[[UIImageView alloc]init];
25 // 2.设置图片
26 iv.image=[UIImage imageNamed:@"me"];
27 // 3.设置frame
28 iv.frame=CGRectMake(100, 100, 100, 100);
29 // 4.把创建的自定义的view添加到界面上
30 [self.view addSubview:iv];
31 self.imageView=iv;
32
33
34 //自定义UIImageView
35 //1.创建
36 //2.设置图片
37 //3.设置frame
38 //4.把创建的自定义的view添加到界面上
39 // YYimageView *yyiv=[[YYimageView alloc]init];
40 // yyiv.image=[UIImage imageNamed:@"me"];
41 // yyiv.frame=CGRectMake(100, 100, 100, 100);
42 // [self.view addSubview:yyiv];
43
44 //添加一个button按钮，当点击button按钮的时候，切换图片
45 UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(100, 300, 100, 50)];
46 [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
47 [btn setTitle:@"点击切换" forState:UIControlStateNormal];
48 [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
49 [self.view addSubview:btn];
50
51 }
52
53 -(void)btnClick
54 {
55 UIImage *image=[UIImage imageNamed:@"psb.jpeg"];
56 self.imageView.image=image;
57 }
58 @end
点击按钮后，实现图片的切换。
说明：系统的UIimage可以替换。而自定义imageview不会变换，因为自定义的view要想换图片，需要重新绘制并渲染一次图片。所以在拿到替换图片的时候，需要重新绘制一次图片，重写setimage方法。
完善后的代码如下：
主控制器中，YYViewController.m文件的代码：
1 //
2 // YYViewController.m
3 // 02-自定义UIimageview
4 //
5 // Created by apple on 14-6-22.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYViewController.h"
10 #import "YYimageView.h"
11
12 @interface YYViewController ()
13 @property(nonatomic,strong)UIImageView *imageView;
14 @property(nonatomic,strong)YYimageView *yyimageView;
15 @end
16
17 @implementation YYViewController
18
19 - (void)viewDidLoad
20 {
21 [super viewDidLoad];
22
23 // //系统的UIImageview的使用
24 //// 1.创建一个UIImageView
25 // UIImageView *iv=[[UIImageView alloc]init];
26 //// 2.设置图片
27 // iv.image=[UIImage imageNamed:@"me"];
28 //// 3.设置frame
29 // iv.frame=CGRectMake(100, 100, 100, 100);
30 //// 4.把创建的自定义的view添加到界面上
31 // [self.view addSubview:iv];
32 // self.imageView=iv;
33
34
35 //自定义UIImageView
36 //1.创建
37 //2.设置图片
38 //3.设置frame
39 //4.把创建的自定义的view添加到界面上
40 YYimageView *yyiv=[[YYimageView alloc]init];
41 yyiv.image=[UIImage imageNamed:@"me"];
42 yyiv.frame=CGRectMake(100, 100, 100, 100);
43 [self.view addSubview:yyiv];
44 self.yyimageView=yyiv;
45
46 //添加一个button按钮，当点击button按钮的时候，切换图片
47 UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(100, 300, 100, 50)];
48 [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
49 [btn setTitle:@"点击切换" forState:UIControlStateNormal];
50 [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
51 [self.view addSubview:btn];
52
53 }
54
55 -(void)btnClick
56 {
57 NSLog(@"按钮被点击了");
58 UIImage *image=[UIImage imageNamed:@"psb.jpeg"];
59 // self.imageView.image=image;
60 self.yyimageView.image=image;
61 }
62 @end
YYimageView.m文件的代码：
1 //
2 // YYimageView.m
3 // 02-自定义UIimageview
4 //
5 // Created by apple on 14-6-22.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYimageView.h"
10
11 @implementation YYimageView
12
13 //重写drawRect:方法
14 - (void)drawRect:(CGRect)rect
15 {
16 [self.image drawInRect:rect];
17 }
18
19 //重写set方法
20 -(void)setImage:(UIImage *)image
21 {
22 _image=image;
23 [self setNeedsDisplay];
24 }
25 @end
