iOS开发UI篇 - Quartz 2D简单使用

简介: iOS开发UI篇 - Quartz 2D简单使用

一. 通过slider控制圆的缩放


1. 实现过程


新建一个项目,新建一个继承自UIView的类,并和storyboard中自定义的view进行关联。


界面搭建,如图:


代码示例:


ViewController.m 文件

//
//  ViewController.m
//  TestQuartz 2D
//
//  Created by taobaichi on 2017/3/23.
//  Copyright © 2017年 MaChao. All rights reserved.
//
#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
#import "newView.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet newView *circleView;
- (IBAction)valueChange:(UISlider *)sender;
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
- (IBAction)valueChange:(UISlider *)sender {
    //当值改变的时候,把值传递给view,改变圆的半径
    NSLog(@"---value---:%lf",sender.value);
    //把sender的值传递给自定义view,设置圆的半径
    self.circleView.radius = sender.value;
}
@end


newView.h文件

//
//  newView.h
//  TestQuartz 2D
//
//  Created by taobaichi on 2017/3/23.
//  Copyright © 2017年 MaChao. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface newView : UIView
@property(nonatomic, assign) float radius;
@end


newView.m 文件

//
//  newView.m
//  TestQuartz 2D
//
//  Created by taobaichi on 2017/3/23.
//  Copyright © 2017年 MaChao. All rights reserved.
//
#import "newView.h"
@interface newView ()
@property (nonatomic, assign)float imageY;
@end
@implementation newView
//自定义view中的圆不显示
//重写set方法,为半径赋值
-(void)setRadius:(float)radius
{
    _radius = radius;
    //通知自定义的view重新绘制
    [self setNeedsDisplay];
}
//如果view是从xib或storyboard中创建出来的会先调用awakeFromNib方法
-(void)awakeFromNib
{
    [super awakeFromNib];
    self.radius = 20;
}
-(void)drawRect:(CGRect)rect
{
    //获取图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //绘图
    //在自定义的view中画一个圆
    CGContextAddArc(context, 100, 100, self.radius, 0, 2 * M_PI, 0);
    //设置圆的填充颜色
    [[UIColor grayColor] set];
    //渲染
    CGContextFillPath(context);
}
@end

效果:


image.png

112008392957446.png


image.png


112009323741064.png

注意点:
drawRect:方法不能由我们自己手动调用,只能由系统来调用
drawRect:调用的时机:当第一次显示或者一个重绘事件发生时调用
setNeedsDisplay方法:重新绘制,调用这个方法就会通知自定义的view重新绘制画面,调用`drawRect`
提示:当一个view从xib或storyboard创建出来时,会调用awakeFromNib方法


补充:


image.png

112011223118909.png

可以通过slider的value属性监听值得改变,当然也可以指定value的取值范围(这里设定为0 ~ 100)


二.刷帧效果


说明:把雪花状的图片绘制到view上,实现图片中下落的效果


1. 实现代码

//
//  newView.m
//  TestQuartz 2D
//
//  Created by taobaichi on 2017/3/23.
//  Copyright © 2017年 MaChao. All rights reserved.
//
#import "newView.h"
@interface newView ()
@property (nonatomic, assign)float imageY;
@end
@implementation newView
-(id)initWithCoder:(NSCoder *)aDecoder
{
    //请注意这里一定要先初始化父类的构造方法
    if (self = [super initWithCoder:aDecoder]) {
        NSLog(@"initWithCoder: ");
        //NSTimer一般用于定时的更新一些非界面上的数据,告诉多久调用一次
        //使用定时器,使用该定时器会出现卡顿现象
        //[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];
        //ACDisplayLink刷帧,默认每秒刷新60次
        //该定时器创建之后,默认是不会执行的,需要把它加载到消息循环中
        CADisplayLink * display = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImage)];
        [display addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
    }
    return self;
}
-(void)updateImage
{
    //使用该方法重绘画面
    [self setNeedsDisplay];
}
-(void)awakeFromNib
{
    [super awakeFromNib];
    NSLog(@"awakeFromNib");
}
-(void)drawRect:(CGRect)rect
{
    //把图片绘制到view上
    //每次调用该方法对画面进行重绘,imageY的值就+5
    self.imageY += 5;
    //当雪花超出屏幕的时候,让图片从头开始降落
    if (self.imageY > rect.size.height) {
        self.imageY = 0;
    }
    UIImage * image = [UIImage imageNamed:@"snow"];
    [image drawAtPoint:CGPointMake(0, self.imageY)];
    UIImage * image2 = [UIImage imageNamed:@"me"];
    [image2 drawAtPoint:CGPointMake(80, self.imageY + 20)];
}
@end


实现效果:


image.png

112015196088547.png


image.png

112015590611761.png


2. 重要说明


  • 下面两个方法的调用顺序

-(void)awakeFromNib
-(id)initWithCoder:(NSCoder *)aDecoder


提示:如果view是从xibstoryboard中创建可以调用awakeFromNib方法归档,从文件创建view,其实会先调用initWithCoder这个方法,xibstoryboard也是文件


上面两个方法,-(id)initWithCoder:(NSCoder *)aDecoder会先调用,实现该方法需要实现NSCoding协议,由于创建的UIView默认就已经实现了该协议。


可以进入到头文件查看:

NS_CLASS_AVAILABLE_IOS(2_0) @interface UIView : UIResponder <NSCoding, UIAppearance, UIAppearanceContainer, UIDynamicItem, UITraitEnvironment, UICoordinateSpace, UIFocusItem, CALayerDelegate>


运行新建的程序,通过打印可以验证上面两个方法的调用顺序

2017-03-23 18:24:28.560 TestQuartz 2D[9196:314708] initWithCoder: 
2017-03-23 18:24:28.561 TestQuartz 2D[9196:314708] awakeFromNib


两个定时器


  • 第一个:

[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];
说明:`NSTimer`一般用于定时的更新一些非界面上的数据,告诉多久调用一次,


  • 第二个:

CADisplayLink * display = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImage)];
        [display addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];


说明: CADisplayLink刷帧,默认每秒刷新60次,该定时器创建之后,默认是不会执行的,需要把它加载到消息循环中


相关文章
|
4天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
23 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
143 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
|
2月前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
90 11
|
2月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
1432 1
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
2月前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
145 66
|
2月前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
173 3
|
2月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
2月前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
3月前
|
存储 前端开发 Swift
探索iOS开发:从新手到专家的旅程
本文将带您领略iOS开发的奇妙之旅,从基础概念的理解到高级技巧的掌握,逐步深入iOS的世界。文章不仅分享技术知识,还鼓励读者在编程之路上保持好奇心和创新精神,实现个人成长与技术突破。

热门文章

最新文章

  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 3
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 4
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
  • 5
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
  • 6
    UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
  • 7
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    移动端UI名词 - AxureMost
  • 9
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 10
    unity判断鼠标在不在UI上