基于Quartz 2D自定义加载进度视图

        今天开始自己第一篇简书随笔文章,和iOS学习者共同分享自己在iOS开发中的一些学习经验。以前压根就没有写过什么博客文章之类的,但最近两天突然闪过一个念头:自已以往没事的身后也学习很多iOS相关的技术,有些东西虽然写过了,但一直放在那里,从来没有进行过系统的整理,事件久了很多东西也有些淡忘,所以就在想,干脆把自己以往写的一些东西拿出来和大家分享一下。自己也能温习一下以往所学的东西。

      第一天,先从一个简单的小demo开始,自定义加载进度视图。可能没有好好研究过那些进度的加载视图,没有研究过Quartz 2D的iOS开发者,会认为类似那种微信图片加载的圆形进度显示图是一种什么很高大上的东西。其实不然,这种效果的实现非常简单,压根就不需要多少代码就能实现。其原理是基于Quartz 2D绘图引擎,先简单说下Quartz 2D这个绘图引擎,它支持跨平台。当然我所说的夸平台并不是说横夸各种平台,只是指iOS和OSX之间。

Quartz 2D的一些功能:

1.绘制图形

2.绘制文字

3.绘制\生成图像

4.读取\生成PDF

5.截图 裁剪图片

6.自定义UI控件

       其实Quartz 2D的功能很强大,有很多东西都是基于它来实现的。如裁剪图片、涂鸦\画板、手势解锁、报表(折线图 饼状图 柱状图)等等,它还能做得事情远远不止于此。在app程序性能优化方面同样扮演着很重要的角色。当然,在绘制报表方面更建议大家使用一些第三方,如果想自己基于Quartz 2D绘制报表,实现起来还是很麻烦的一件事。关于Quartz 2D它的一些强大功能,今天就简单说这些,之前写过很多与它相关的小demo,如表格性能优化,手势解锁,绘制饼图,后期如果有时间,就会拿出来和大家共享。

      步入今天的主题。首先来看下实现的效果图。


     相关注释我会写在具体的代码中,另外以后没写一篇博客,会尽可能的附带上源码,具体的源码路径会放置在文章的末尾处。毕竟看源码才是最爽的事情。

1.ZWProgressView.h文件中

#import@interface ZWProgressView : UIView

@property(nonatomic,assign)CGFloat progress;

@end

2.ZWProgressView.m文件中

#import "ZWProgressView.h"

@interface ZWProgressView ()

@property(nonatomic,strong)UILabel *textLabel;

@end

@implementation ZWProgressView

- (instancetype)initWithFrame:(CGRect)frame{

      if (self == [super initWithFrame:frame]) {

             [self addSubview:self.textLabel];

       }

       return self;

}

- (void)setProgress:(CGFloat)progress{

           _progress = progress;

            self.textLabel.text = [NSString stringWithFormat:@"%.2f%%",progress * 100];

          //手动调用这个方法,系统是不会生成和View相关联的上下文。

         //只有系统调用drawRect方法时,才会生成和view相关联的上下文

          [self drawRect:self.bounds];

             //********************这个地方要额外注意*******************

          //只有系统调用drawRect方法时,才会生成和view相关联的上下文

          [self setNeedsDisplay];

}

- (void)drawRect:(CGRect)rect {

        //画弧

        CGPoint center = CGPointMake(rect.size.width/2, rect.size.height/2);

        CGFloat radius = rect.size.width * 0.5 - 10;

       CGFloat startA = -M_PI_2 ;

       CGFloat endA = -M_PI_2 + self.progress * M_PI * 2;

        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center            radius:radius startAngle:startA endAngle:endA clockwise:YES];

          [[UIColor greenColor] set];

        path.lineWidth = 5;

        [path stroke];

}

- (UILabel *)textLabel{

       if (_textLabel == nil) {

              _textLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 150, 30)]; 

             _textLabel.textAlignment = NSTextAlignmentCenter;

              _textLabel.text = self.textLabel.text = @"0.00%";

               _textLabel.center = self.center; 

     }

       return _textLabel;

}

3.外部的调用。ViewController.m文件

#import "ViewController.h"

#import "ZWProgressView.h"

@interface ViewController ()

@property(nonatomic,strong)UISlider *slider;

@property(nonatomic,strong)ZWProgressView *zwProgressView;

@property (nonatomic,strong)UILabel *textLabel;

@end

@implementation ViewController

- (void)viewDidLoad {

          [super viewDidLoad];

          [self.view addSubview:self.zwProgressView];

          [self.view addSubview:self.slider];

}

- (ZWProgressView *)zwProgressView{

       if (_zwProgressView == nil) {

              _zwProgressView = [[ZWProgressView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];

              _zwProgressView.center = self.view.center;  

             [_zwProgressView addSubview:self.textLabel];

             _zwProgressView.backgroundColor = [UIColor lightGrayColor];

      }

     return _zwProgressView;

}

- (UISlider *)slider{

          if (_slider == nil) {

                 _slider = [[UISlider alloc]initWithFrame:CGRectMake(self.view.frame.size.width /2 - 100, CGRectGetMaxY(_zwProgressView.frame) + 20, 200, 50)];

               [_slider addTarget:self action:@selector(valueChange:) forControlEvents:UIControlEventValueChanged];

           }

           return _slider;

}

- (void)valueChange:(UISlider *)sender {

          NSLog(@"%f",sender.value);

         //两个%代表一个%

        self.zwProgressView.progress = sender.value;

}

@end

     我就说了,这个并不是什么很高大上的东西,简单的一些代码就足够实现了。

      最后附上源码下载地址(本人的github小号,以后专门用于和大家技术交流,不仅仅局限于iOS技术,H5、基于MUI框架的混合App开发等等):https://github.com/ZhengYaWei1992/ZWProgressView

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,045评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,114评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,120评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,902评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,828评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,132评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,590评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,258评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,408评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,335评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,385评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,068评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,660评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,747评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,967评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,406评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,970评论 2 341

推荐阅读更多精彩内容