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

简介: iOS开发UI篇—Quartz2D(自定义UIImageView控件) 一、实现思路 Quartz2D最大的用途在于自定义View(自定义UI控件),当系统的View不能满足我们使用需求的时候,自定义View。

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

 

目录
相关文章
|
6月前
|
测试技术 Swift iOS开发
探索iOS自动化测试:使用Swift编写UI测试
【8月更文挑战第31天】在软件开发的海洋中,自动化测试是保证船只不偏离航线的灯塔。本文将带领读者启航,深入探索iOS应用的自动化UI测试。我们将通过Swift语言,点亮代码的灯塔,照亮测试的道路。文章不仅会展示如何搭建测试环境,还会提供实用的代码示例,让理论知识在实践中生根发芽。无论你是新手还是有经验的开发者,这篇文章都将是你技能提升之旅的宝贵指南。
|
iOS开发
iOS 多个滚动控件嵌套Demo
iOS 多个滚动控件嵌套Demo
90 0
|
iOS开发
iOS 常用的 上下左右 拉刷新控件
iOS 常用的 上下左右 拉刷新控件
123 0
|
iOS开发
iOS短信验证码控件,自动输入回调两次解决办法
iOS短信验证码控件,自动输入回调两次解决办法
534 0
|
iOS开发
IOS的UITableView控件简单使用
IOS的UITableView控件简单使用
183 0
|
API iOS开发 Perl
iOS UIImageView文字头像,首字母缩略头像
iOS UIImageView文字头像,首字母缩略头像
iOS UIImageView文字头像,首字母缩略头像
|
iOS开发
iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
162 0
iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
|
安全 iOS开发
iOS小技能:下拉刷新控件的适配
1. 下拉顶部背景色设置: 往tableView的父控件添加拉伸背景视图 2. present 半屏适配 iOS13 modalPresentationStyle属性默认不是全屏样式`UIModalPresentationFullScreen`,而是半屏样式,需要根据需求手动设置。 present 半屏,会导致列表下拉刷新失效。
232 0
iOS小技能:下拉刷新控件的适配
|
iOS开发
iOS小技能:自动布局实现兄弟控件N等分且宽高比例是1:N(xib 上实现)
本文为 iOS视图约束专题的第三篇:xib上使用自动布局教程
208 0
|
iOS开发
iOS开发-加在透明视图上的控件会透明
iOS开发-加在透明视图上的控件会透明
158 0

热门文章

最新文章

  • 1
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
  • 2
    UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    移动端UI名词 - AxureMost
  • 5
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 6
    unity判断鼠标在不在UI上
  • 7
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 9
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 10
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    14
  • 2
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    28
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 4
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 5
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 6
    uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
    143
  • 7
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
    235
  • 8
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
    90
  • 9
    深入探索iOS开发中的SwiftUI框架
    145
  • 10
    ios样式开关按钮jQuery插件
    60