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:方法，在该方法内部画出图形。

二、代码实现

　使用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 : UIView12 @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 YYimageView12 13 //重写drawRect:方法14 - (void)drawRect:(CGRect)rect15 {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 @end15 16 @implementation YYViewController17 18 - (void)viewDidLoad19 {20     [super viewDidLoad];21     22 //    //系统的UIImageview的使用23 ////    1.创建一个UIImageView24 //    UIImageView *iv=[[UIImageView alloc]init];25 ////    2.设置图片26 //    iv.image=[UIImage imageNamed:@"me"];27 ////    3.设置frame28 //    iv.frame=CGRectMake(100, 100, 100, 100);29 ////    4.把创建的自定义的view添加到界面上30 //    [self.view addSubview:iv];31     33     //自定义UIImageView34     //1.创建35     //2.设置图片36     //3.设置frame37     //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 @end15 16 @implementation YYViewController17 18 - (void)viewDidLoad19 {20     [super viewDidLoad];21     22     //系统的UIImageview的使用23 //    1.创建一个UIImageView24     UIImageView *iv=[[UIImageView alloc]init];25 //    2.设置图片26     iv.image=[UIImage imageNamed:@"me"];27 //    3.设置frame28     iv.frame=CGRectMake(100, 100, 100, 100);29 //    4.把创建的自定义的view添加到界面上30     [self.view addSubview:iv];31     self.imageView=iv;32     33     34     //自定义UIImageView35     //1.创建36     //2.设置图片37     //3.设置frame38     //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)btnClick54 {55     UIImage *image=[UIImage imageNamed:@"psb.jpeg"];56     self.imageView.image=image;57 }58 @end

点击按钮后，实现图片的切换。

说明 : 我们发现系统的UIimage可以替换。而自定义imageview不会变换，因为自定义的view要想换图片，需要重新绘制并渲染一次图片。所以在拿到替换图片的时候，需要重新绘制一次图片，重写setimage方法。

而且我们没给自定义的imageVIew提供创建方法,所以添加对象方法  -(instancetype)initWithImage:(UIImage *)image

完善后的代码如下：

//  XMGImageView.h//  06-模仿系统UIImageView////  Created by xiaomage on 16/1/22.//  Copyright © 2016年 小码哥. All rights reserved.//#import <UIKit/UIKit.h>@interface XMGImageView : UIView@property (nonatomic, strong) UIImage *image;- (instancetype)initWithImage:(UIImage *)image;@end

////  XMGImageView.m//  06-模仿系统UIImageView(了解)////  Created by xiaomage on 16/1/22.//  Copyright © 2016年 小码哥. All rights reserved.//#import "XMGImageView.h"@implementation XMGImageView- (instancetype)initWithImage:(UIImage *)image {    if (self = [super init]) {        //确定当前ImageView的尺寸大小        self.frame = CGRectMake(0, 0, image.size.width, image.size.height);        _image = image;    }    return self;}-(void)setImage:(UIImage *)image {    _image = image;    //重绘    [self setNeedsDisplay];}- (void)drawRect:(CGRect)rect {    // Drawing code    [self.image drawInRect:rect];    }@end