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

最新文章

  1. Lind.DDD敏捷领域驱动框架~介绍
  2. 在ASP.NET MVC5应用程序中快速接入QQ和新浪微博OAuth
  3. unity中全屏背景图缩放
  4. C8051 SMBus 原理
  5. SQL - 语法收集
  6. IOS--UITextFiled的使用方法
  7. 0-20ma 0-5V,0-10V ,0-15V ,0-20V,0-30V模拟量(范围可以定制)多功能采集模块,支持1路继电器输出,2路Di输入,8路Ai输入,可电脑控制,支持485 modbus rtu协议。端口参数可以配置保存,支持定制修改。
  8. Thinkphp入门 五 —模型 (49)
  9. eclispe中安装hibernate插件
  10. canvas图表(3) - 饼图
  11. kibana6.2.4版本更新x-pack认证
  12. Go基础系列:指定goroutine的执行顺序
  13. 【BZOJ3613】[HEOI2014]南园满地堆轻絮(贪心)
  14. 关于&lt;T&gt; T[] toArray(T[] a) 方法
  15. Mysql 函数使用记录(一)——DATEDIFF、CONCAT
  16. 关于微信支付接口,curl错误代码58
  17. python全栈 流程控制;while 循环 格式化输出 运算符 及编码
  18. C++中的public、protected 及 private 用法
  19. BZOJ2832 : 宅男小C
  20. oracle12c中新能优化新特性之热度图和自动数据优化

热门文章

  1. 三种renderman规范引擎的dice对比
  2. linux一些目录功能
  3. Shader 简明入门教程
  4. 图片上传本地预览。兼容IE7+
  5. Delphi调用REST
  6. Java web 之表单验证
  7. uart串口的调试学习
  8. C语言 文件操作6--文件打开方式详解
  9. JPA project Change Event Handler问题解决[转]
  10. JAVA 字符串编码总结
  11. 尽量不要用select into 复制表
  12. 动态库DLL加载方式-静态加载和动态加载
  13. poj3094---对字符串的处理
  14. 关于WHERE后面不能放聚合函数(如SUM(...))的解决办法
  15. 打包Egret游戏为Chrome extension
  16. javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方)
  17. javaScript之实战 页面筛选功能
  18. WCF无.SVC文件服务激活,及不添加服务引用调用WCF
  19. drf 生成接口文档
  20. Java List 生成 树