iOS 自定义控件 progressView(环形进度条)

转帖:http://blog.csdn.net/xiangzhang321/article/details/42688133

之前做项目的时候有用到环形进度条,先是在网上找了一下第三方控件,发现好用是好用,就是东西太多了,有点复杂,还不如自己写一个简单点适合自己用的。

先把自定义控件的效果图贴出来。

   

其实我写的这个控件很简单。索性就直接把源码贴出来吧。

.h文件的内容就是一些声明

#import <UIKit/UIKit.h>

@interface ProgressView : UIView

//中心颜色

@property (strong, nonatomic)UIColor *centerColor;

//圆环背景色

@property (strong, nonatomic)UIColor *arcBackColor;

//圆环色

@property (strong, nonatomic)UIColor *arcFinishColor;

@property (strong, nonatomic)UIColor *arcUnfinishColor;

//百分比数值(0-1)

@property (assign, nonatomic)float percent;

//圆环宽度

@property (assign, nonatomic)float width;

@end

.m文件里就是具体实现了

#import "ProgressView.h"

@implementation ProgressView

- (id)initWithFrame:(CGRect)frame{

self = [super initWithFrame:frame];

if (self) {

self.backgroundColor = ClearColor;

_percent = 0;

_width = 0;

}

return self;

}

- (void)setPercent:(float)percent{

_percent = percent;

[self setNeedsDisplay];

}

- (void)drawRect:(CGRect)rect{

[self addArcBackColor];

[self drawArc];

[self addCenterBack];

[self addCenterLabel];

}

- (void)addArcBackColor{

CGColorRef color = (_arcBackColor == nil) ? [UIColorlightGrayColor].CGColor : _arcBackColor.CGColor;

CGContextRef contextRef = UIGraphicsGetCurrentContext();

CGSize viewSize = self.bounds.size;

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

// Draw the slices.

CGFloat radius = viewSize.width / 2;

CGContextBeginPath(contextRef);

CGContextMoveToPoint(contextRef, center.x, center.y);

CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI, 0);

CGContextSetFillColorWithColor(contextRef, color);

CGContextFillPath(contextRef);

}

- (void)drawArc{

if (_percent == 0 || _percent > 1) {

return;

}

if (_percent == 1) {

CGColorRef color = (_arcFinishColor == nil) ? [UIColorgreenColor].CGColor : _arcFinishColor.CGColor;

CGContextRef contextRef = UIGraphicsGetCurrentContext();

CGSize viewSize = self.bounds.size;

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

// Draw the slices.

CGFloat radius = viewSize.width / 2;

CGContextBeginPath(contextRef);

CGContextMoveToPoint(contextRef, center.x, center.y);

CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI, 0);

CGContextSetFillColorWithColor(contextRef, color);

CGContextFillPath(contextRef);

}else{

float endAngle = 2*M_PI*_percent;

CGColorRef color = (_arcUnfinishColor == nil) ? [UIColorblueColor].CGColor : _arcUnfinishColor.CGColor;

CGContextRef contextRef = UIGraphicsGetCurrentContext();

CGSize viewSize = self.bounds.size;

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

// Draw the slices.

CGFloat radius = viewSize.width / 2;

CGContextBeginPath(contextRef);

CGContextMoveToPoint(contextRef, center.x, center.y);

CGContextAddArc(contextRef, center.x, center.y, radius,0,endAngle, 0);

CGContextSetFillColorWithColor(contextRef, color);

CGContextFillPath(contextRef);

}

}

-(void)addCenterBack{

float width = (_width == 0) ? 5 : _width;

CGColorRef color = (_centerColor == nil) ? [UIColorwhiteColor].CGColor : _centerColor.CGColor;

CGContextRef contextRef = UIGraphicsGetCurrentContext();

CGSize viewSize = self.bounds.size;

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

// Draw the slices.

CGFloat radius = viewSize.width / 2 - width;

CGContextBeginPath(contextRef);

CGContextMoveToPoint(contextRef, center.x, center.y);

CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI, 0);

CGContextSetFillColorWithColor(contextRef, color);

CGContextFillPath(contextRef);

}

- (void)addCenterLabel{

NSString *percent = @"";

float fontSize = 14;

UIColor *arcColor = [UIColor blueColor];

if (_percent == 1) {

percent = @"100%";

fontSize = 14;

arcColor = (_arcFinishColor == nil) ? [UIColorgreenColor] : _arcFinishColor;

}else if(_percent < 1 && _percent >= 0){

fontSize = 13;

arcColor = (_arcUnfinishColor == nil) ? [UIColorblueColor] : _arcUnfinishColor;

percent = [NSStringstringWithFormat:@"%0.2f%%",_percent*100];

}

CGSize viewSize = self.bounds.size;

NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];

paragraph.alignment = NSTextAlignmentCenter;

NSDictionary *attributes = [NSDictionarydictionaryWithObjectsAndKeys:[UIFontboldSystemFontOfSize:fontSize],NSFontAttributeName,arcColor,NSForegroundColorAttributeName,[UIColorclearColor],NSBackgroundColorAttributeName,paragraph,NSParagraphStyleAttributeName,nil];

[percent drawInRect:CGRectMake(5, (viewSize.height-fontSize)/2, viewSize.width-10, fontSize)withAttributes:attributes];

}

@end

具体的调用就是

ProgressView *progress = [[ProgressViewalloc]initWithFrame:CGRectMake(detil.width-65, 10, 60, 60)];

progress.arcFinishColor = COLOR_STRING(@"#75AB33");

progress.arcUnfinishColor = COLOR_STRING(@"#0D6FAE");

progress.arcBackColor = COLOR_STRING(@"#EAEAEA");

progress.percent = 1;

[detil addSubview:progress];

时间: 2024-10-20 17:03:37

iOS 自定义控件 progressView(环形进度条)的相关文章

仿MIUI音量变化环形进度条实现

Android中使用环形进度条的业务场景其实蛮多的,比如下载文件的时候使用环形进度条,会给用户眼前一亮的感觉:再比如我大爱的MIUI系统,它的音量进度条就是使用环形进度条,尽显小米"为发烧而生"的宗旨.今天就为大家揭开那些高大上设计背后的故事,让我们也来实现如此酷炫的效果. 其实环形进度条只是一个稍稍复杂点的自定义控件,看过前段时间<Android自定义控件>系列的同学,理解起来会更加容易.还没看过的同学,出门右转,查看历史消息,再回头看今天的内容,会更加容易上手. 一.定

Qt编写自定义控件14-环形进度条

前言 环形进度条,用来展示当前进度,为了满足大屏UI的需要特意定制,以前有个叫圆环进度条,不能满足项目需要,只能重新定做,以前的进度间距不能自适应分辨率,而且当前进度对应的反的进度不能单独设置颜色,即当前进度90%,剩余的10%也需要设置成不同的颜色,还有一个重要的功能是,能够指定多个警戒值,一旦超过或者小于该值,则当前进度自动切换到预先设定的警戒值颜色,而不需要用户自己去判断警戒值去设置警戒颜色,用户只需要传入当前值即可,这个功能非常实用,还可以设置警戒判断的标准是超过值还是小于值报警.个人感

页面效果:圆形进度条 环形进度条

环形进度条(1.5秒之内倒计时) 效果做的比较粗糙,就是css的 clip属性,先切右边一半,再切左边一半.根据三角函数计算y高度 http://www.w3school.com.cn/cssref/pr_pos_clip.asp css的clip属性 <script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script> <script type="text/java

HTML5 Canvas绘制环形进度条

最近比较迷恋canvas,加之做了一个个人网站,有用到环形进度条,记录下来. canvas中没有直接绘制圆的方法,但有一个绘制弧线的context.arc方法, 下面讲下用该方法如何绘制出图片效果. arc()方法介绍 context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参数说明: x: 圆的中心的 x 坐标 y: 圆的中心的 y 坐标 r: 圆的半径 sAngle: 起始角,以弧度计.(弧的圆形的三点钟位置是 0 度) eAngle: 结束角,

利用jQuery和CSS实现环形进度条

html代码 1 <div class="circle" style="left:0"> 2 <div class="pie_left"><div class="left"></div></div> 3 <div class="pie_right"><div class="right"></div&

HTML5 canvas绘制倒计时+环形进度条

需求: 1.页面在进入时后台会提供一个固定时间和固定百分比,例如:18小时16分30秒,25%2.页面要求在进入时,有环形进度条从0推进到25%的效果,进度条旁的显示进度的黄色方块要始终保持跟随进度条最前方如图3.环形进度条中间计时器,要从获取到 具体时间后开始倒计时 设计图: JS代码如下: //补零function setDigit(num, n){ var str=''+num; if(str.length<n) { str='0'+str; } return str;}//设定时间fun

自定义环形进度条

自定义环形进度条 效果图: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 package com.qiao.circleprogress_forexample; import android.app.Activity; impo

图解CSS3制作圆环形进度条的实例教程

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: .circleprogress{        width: 160px;        height: 160px;        border:20px solid red;        border-radius: 50

Swift - 环形进度条(UIActivityIndicatorView)的用法

Swift中,除了条形进度条外,还有环形进度条,效果图如下: 1,环形进度条的基本属性 (1)Style: Large White:比较大的白色环形进度条 White:白色环形进度条 Gray:灰色环形进度条 (2)Color: 设置环形进度条的颜色 (3)Behavior: Animating:勾选后环形进度条开始转动 Hides When Stopped:勾选后当环形进度条停止转动时自动隐藏 2,使用样例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1