ios 画圆环进度条

#import <UIKit/UIKit.h>

@interface SNCircleProgressView : UIView
/**
 *  进度值0-1.0之间
 */
@property (nonatomic,assign)CGFloat progressValue;

/**
 *  边宽
 */
@property(nonatomic,assign) CGFloat progressStrokeWidth;

/**
 *  进度条颜色
 */
@property(nonatomic,strong)UIColor *progressColor;

/**
 *  进度条轨道颜色
 */
@property(nonatomic,strong)UIColor *progressTrackColor;

@end

#import "SNCircleProgressView.h"

@interface SNCircleProgressView ()
{

    CAShapeLayer *backGroundLayer; //背景图层
    CAShapeLayer *frontFillLayer;      //用来填充的图层
    UIBezierPath *backGroundBezierPath; //背景布赛尔曲线
    UIBezierPath *frontFillBezierPath;  //用来填充的布赛尔曲线

}
@end

@implementation SNCircleProgressView
@synthesize progressColor = _progressColor;
@synthesize progressTrackColor = _progressTrackColor;
@synthesize progressValue = _progressValue;
@synthesize progressStrokeWidth = _progressStrokeWidth;
- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder]) {
        [self setUp];
    }
    return self;
}
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        [self setUp];

    }
    return self;

}
/**
 *  初始化创建图层
 */
- (void)setUp
{
    //创建背景图层
    backGroundLayer = [CAShapeLayer layer];
    backGroundLayer.fillColor = nil;
    backGroundLayer.frame = self.bounds;

    //创建填充图层
    frontFillLayer = [CAShapeLayer layer];
    frontFillLayer.fillColor = nil;
    frontFillLayer.frame = self.bounds;

    [self.layer addSublayer:backGroundLayer];
    [self.layer addSublayer:frontFillLayer];
}

- (void)setProgressColor:(UIColor *)progressColor
{
    _progressColor = progressColor;
    frontFillLayer.strokeColor = progressColor.CGColor;
}
- (UIColor *)progressColor
{
    return _progressColor;
}
- (void)setProgressTrackColor:(UIColor *)progressTrackColor
{
    _progressTrackColor = progressTrackColor;
    backGroundLayer.strokeColor = progressTrackColor.CGColor;
    backGroundBezierPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle:0 endAngle:M_PI*2
                                                       clockwise:YES];
    backGroundLayer.path = backGroundBezierPath.CGPath;
}
- (UIColor *)progressTrackColor
{
    return _progressTrackColor;
}
- (void)setProgressValue:(CGFloat)progressValue
{
    _progressValue = progressValue;
    frontFillBezierPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle:-M_PI_4 endAngle:(2*M_PI)*progressValue-M_PI_4 clockwise:YES];
    frontFillLayer.path = frontFillBezierPath.CGPath;
}
- (CGFloat)progressValue
{
    return _progressValue;
}
- (void)setProgressStrokeWidth:(CGFloat)progressStrokeWidth
{
    _progressStrokeWidth = progressStrokeWidth;
    frontFillLayer.lineWidth = progressStrokeWidth;
    backGroundLayer.lineWidth = progressStrokeWidth;
}
- (CGFloat)progressStrokeWidth
{
    return _progressStrokeWidth;
}
@end
#import "ViewController.h"
#import "SNCircleProgressView.h"
@interface ViewController ()
{
  SNCircleProgressView *progressView;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    progressView = [[SNCircleProgressView alloc]initWithFrame:CGRectMake(40,80, 100, 100)];

    progressView.progressColor = [UIColor redColor];
    progressView.progressStrokeWidth = 5.f;
    progressView.progressTrackColor = [UIColor whiteColor];

    [self.view addSubview:progressView];

    [NSTimer scheduledTimerWithTimeInterval:1.f target:self selector:@selector(changeProgressValue) userInfo:nil repeats:YES];

}
- (void)changeProgressValue
{
    progressView.progressValue += 0.1;
    if (progressView.progressValue>=1.f) {
        progressView.progressValue = 0.1f;
    }
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

时间: 2024-07-30 13:25:37

ios 画圆环进度条的相关文章

用Raphael在网页中画圆环进度条

原文 :http://boytnt.blog.51cto.com/966121/1074215 条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆 放就不太好看了.随着css3的出现,圆环状的进度条开始用得越来越多,不过由于IE6/7/8不支持css3,我们只能换其它方法来实现.本文就采用 Raphael来画一个,这个组件对svg和vml进行了一个统一的封装,根据浏览器使用不同的技术实现绘制,因此IE也能用. 先上效果图: 效果还不错吧?代码其实也不复杂,抛砖引玉一下

两种CSS3圆环进度条详解

晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第一种:通过overflow溢出隐藏的方式: 这种方法好处在于容易理解,只需要一层一层的嵌套,即可得到效果,但是实现起来较为繁琐,HTML的结构也比较冗余. 先看HTML结构: <div class="circle-one"> <div class="circle

Xamarin iOS教程之进度条和滚动视图

Xamarin iOS教程之进度条和滚动视图 Xamarin iOS 进度条 进度条可以看到每一项任务现在的状态.例如在下载的应用程序中有进度条,用户可以很方便的看到当前程序下载了多少,还剩下多少.QQ音乐播放器中也使用到了进度条,它可以让用户看到当前音乐播放了多少,还剩多少等.在Xamarin.iOS中也提供实现进度条的类,即UIProgressView. [示例2-23]以下将实现进度条加载的效果.具体步骤如下: (1)创建一个Single View Application类型的工程,命名为

svg实现圆环进度条

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>圆环进度条</title> <style type="text/css"> circle{ -webkit-transition: stroke-dasharray .25s; transition: stroke-dasharray .25s; } </s

ProgressWheel:Android开源圆环进度条

这是一个自定义Android组件,用于代替标准进度条组件.实现各种进度条样式,包括圆环,扫描等. XML: 在你的attr.xml(res/value)中加入以下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <declare-styleable name="ProgressWheel"> <attr name="text"format="string"/> <attr name=&q

android自定义渐变圆环进度条

先看下效果: 分析:比较常见于扫描结果.进度条等场景 利用canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)绘制圆弧 Paint的一些属性定义粗细.颜色.样式等 LinearGradient实现颜色的线型渐变 同样的道理,可以画出长条进度条,扇图饼图等,感兴趣可以试下.. package com.liujing.progressviewdemo; /*** *

纯CSS3实现苹果iOS 7风格进度条

还记得iOS 7的“颠覆性”扁平化设计吗?其中的各种扁平化UI界面都让我们为之惊叹,其中的进度条更是让人喜欢 的不得了.今天就给大家分享一个用CSS3制作的iOS7进度条小教程,这是一款非常优秀的UI交互设计.下面就来看看演示效果以及实现方式吧! HTML结构代码 首先设计HTML的基本结构,大概如下: <div class="container"> <h1 class="text-center">iOS 7进度条</h1> &l

iOS 贝赛尔 圆形进度条

UIBezierPath *aPth = [UIBezierPath bezierPathWithArcCenter:CGPointMake(55, 65.f) radius:50.f startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES]; aPth.lineWidth = 5.0f; aPth.lineCapStyle = kCGLineCapRound; aPth.lineJoinStyle = kCGLineJoinRound; [[UICol

iOS-Quart2D 进度条

// // HMProgressView.h // 进度条 // // Created by YaguangZhu on 15/9/9. // Copyright (c) 2015年 YaguangZhu. All rights reserved. // #import <UIKit/UIKit.h> @interface HMProgressView : UIView @property(nonatomic,assign)CGFloat progress; @end // // HMProg