iOS开发UI篇—Quartz2D(自定义UIImageView控件)
一、实现思路
Quartz2D最大的用途在于自定义View(自定义UI控件)，当系统的View不能满足我们使用需求的时候，自定义View。使用Quartz2D自定义View，可以从模仿系统的ImageView的使用开始。需求驱动开发：模仿系统的imageview的使用过程1.创建2.设置图片3.设置frame4.把创建的自定义的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
