iOS开发UI篇—Quartz2D(自定义UIImageView控件)

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(, , , );
//    4.把创建的自定义的view添加到界面上
    [self.view addSubview:iv];
}
@end

实现效果：

使用Quartz2D自定义View，代码如下：

新建一个自定义的类，让其继承自UIView,YYimageView.h文件代码如下：

 //
 //  YYimageView.h
 //  02-自定义UIimageview
 //
 //  Created by apple on 14-6-22.
 //  Copyright (c) 2014年 itcase. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @interface YYimageView : UIView
 @property(nonatomic,strong)UIImage *image;
 @end

　　在自定义类的实现中，重写DrawRect:方法绘制并渲染图形。YYimageView.m文件代码如下：

 //
 //  YYimageView.m
 //  02-自定义UIimageview
 //
 //  Created by apple on 14-6-22.
 //  Copyright (c) 2014年 itcase. All rights reserved.
 //

 #import "YYimageView.h"

 @implementation YYimageView

 //重写drawRect:方法
 - (void)drawRect:(CGRect)rect
 {
     [self.image drawInRect:rect];
 }

 @end

在主控制器中，模仿系统自带的UIImageView的使用过程，实现同样的效果。

 //
 //  YYViewController.m
 //  02-自定义UIimageview
 //
 //  Created by apple on 14-6-22.
 //  Copyright (c) 2014年 itcase. All rights reserved.
 //

 #import "YYViewController.h"
 #import "YYimageView.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];

     //自定义UIImageView
     //1.创建
     //2.设置图片
     //3.设置frame
     //4.把创建的自定义的view添加到界面上
     YYimageView *yyiv=[[YYimageView alloc]init];
     yyiv.image=[UIImage imageNamed:@"me"];
     yyiv.frame=CGRectMake(, , , );
     [self.view addSubview:yyiv];

 }
 @end

三、完善

存在的问题？

在界面上，添加一个按钮，要求点击按钮，能够实现图片的切换。

 //
 //  YYViewController.m
 //  02-自定义UIimageview
 //
 //  Created by apple on 14-6-22.
 //  Copyright (c) 2014年 itcase. All rights reserved.
 //

 #import "YYViewController.h"
 #import "YYimageView.h"

 @interface YYViewController ()
 @property(nonatomic,strong)UIImageView *imageView;
 @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(, , , );
 //    4.把创建的自定义的view添加到界面上
     [self.view addSubview:iv];
     self.imageView=iv;

     //自定义UIImageView
     //1.创建
     //2.设置图片
     //3.设置frame
     //4.把创建的自定义的view添加到界面上
 //    YYimageView *yyiv=[[YYimageView alloc]init];
 //    yyiv.image=[UIImage imageNamed:@"me"];
 //    yyiv.frame=CGRectMake(100, 100, 100, 100);
 //    [self.view addSubview:yyiv];

     //添加一个button按钮，当点击button按钮的时候，切换图片
     UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(, , , )];
     [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
     [btn setTitle:@"点击切换" forState:UIControlStateNormal];
     [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
     [self.view addSubview:btn];

 }

 -(void)btnClick
 {
     UIImage *image=[UIImage imageNamed:@"psb.jpeg"];
     self.imageView.image=image;
 }
 @end

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

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

完善后的代码如下：

主控制器中，YYViewController.m文件的代码：

 //
 //  YYViewController.m
 //  02-自定义UIimageview
 //
 //  Created by apple on 14-6-22.
 //  Copyright (c) 2014年 itcase. All rights reserved.
 //

 #import "YYViewController.h"
 #import "YYimageView.h"

 @interface YYViewController ()
 @property(nonatomic,strong)UIImageView *imageView;
 @property(nonatomic,strong)YYimageView *yyimageView;
 @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];
 //    self.imageView=iv;

     //自定义UIImageView
     //1.创建
     //2.设置图片
     //3.设置frame
     //4.把创建的自定义的view添加到界面上
     YYimageView *yyiv=[[YYimageView alloc]init];
     yyiv.image=[UIImage imageNamed:@"me"];
     yyiv.frame=CGRectMake(, , , );
     [self.view addSubview:yyiv];
     self.yyimageView=yyiv;

     //添加一个button按钮，当点击button按钮的时候，切换图片
     UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(, , , )];
     [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
     [btn setTitle:@"点击切换" forState:UIControlStateNormal];
     [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
     [self.view addSubview:btn];

 }

 -(void)btnClick
 {
     NSLog(@"按钮被点击了");
     UIImage *image=[UIImage imageNamed:@"psb.jpeg"];
 //    self.imageView.image=image;
     self.yyimageView.image=image;
 }
 @end

YYimageView.m文件的代码：

 //
 //  YYimageView.m
 //  02-自定义UIimageview
 //
 //  Created by apple on 14-6-22.
 //  Copyright (c) 2014年 itcase. All rights reserved.
 //

 #import "YYimageView.h"

 @implementation YYimageView

 //重写drawRect:方法
 - (void)drawRect:(CGRect)rect
 {
     [self.image drawInRect:rect];
 }

 //重写set方法
20 -(void)setImage:(UIImage *)image
21 {
22     _image=image;
23     [self setNeedsDisplay];
24 }
 @end