//
// CCProgressView.h
// Demo
//
// Created by leao on 2017/8/7.
// Copyright © 2017年 zaodao. All rights reserved.
// #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, CCProgressViewStyle) {
CCProgressViewStyleCircle, // 圆形进度条
CCProgressViewStyleBar, // 条形进度条
CCProgressViewStyleDefault = CCProgressViewStyleCircle,
}; @interface CCProgressView : UIView
@property(nonatomic, assign, setter=setProgress:) CGFloat progress; // 0.0 ~ 1.0 @property(nonatomic, assign) CCProgressViewStyle progressViewStyle; // 进度条style
@property(nonatomic, strong) UIColor *trackTintColor; // 进度条背景色
@property(nonatomic, strong) UIColor *progressTintColor; // 进度条颜色
@property(nonatomic, strong) UIColor *progressFullTintColor; // 进度完成时progressTint的颜色
@property(nonatomic, assign) CGFloat lineWidth; // 绘制progress宽度 default: 10
@property(nonatomic, assign) CGFloat trackerWidth; // 绘制progress宽度 default: 10 // CCProgressViewStyleCircle 有效
@property(nonatomic, strong) UIColor *fillColor; // 中心颜色
@property(nonatomic, assign) BOOL clockwise; // 是否是顺时针 default: YES
@property(nonatomic, assign) CGFloat startAngle; // 进度条开始angle, default: -M_PI/2.0
@property (nonatomic, strong) UIButton *centerBtn; // 记录进度的Label
@property (nonatomic, strong) UIColor *labelbackgroundColor; // Label的背景色 默认clearColor
@property (nonatomic, strong) UIColor *textColor; // Label的字体颜色 默认黑色
@property (nonatomic, strong) UIFont *textFont; // Label的字体大小 默认15 - (void)setProgress:(CGFloat)progress;
- (void)setProgress:(CGFloat)progress animated:(BOOL)animated;
@end
//
// CCProgressView.m
// Demo
//
// Created by leao on 2017/8/7.
// Copyright © 2017年 zaodao. All rights reserved.
// #import "CCProgressView.h"
#import <pop/POP.h>
#import <objc/runtime.h>
#import <ReactiveCocoa/ReactiveCocoa.h> #define kCCProgressFillColor [UIColor clearColor]
#define kCCProgressTintColor RGBCOLOR(214, 88, 45)
#define kCCTrackTintColor RGBCOLOR(243, 212, 187)
#define PROGRESS_WIDTH self.frame.size.width
#define PROGRESS_HEIGHT self.frame.size.height #define kAnimTimeInterval 2 @interface CCProgressView () @property(nonatomic, strong) CAShapeLayer *trackLayer;
@property(nonatomic, strong) CAShapeLayer *progressLayer; @end
@implementation CCProgressView - (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self initSubviews];
}
return self;
} - (instancetype)init
{
self = [super init];
if (self) {
[self initSubviews];
}
return self;
} #pragma mark - private
- (void)initSubviews
{
_progressViewStyle = CCProgressViewStyleDefault;
_progressTintColor = kCCProgressTintColor;
_trackTintColor = kCCTrackTintColor;
_lineWidth = ;
_trackerWidth = ; _fillColor = kCCProgressFillColor;
_clockwise = YES;
_startAngle = - M_PI / 2.0; self.backgroundColor = [UIColor clearColor]; self.trackLayer = [CAShapeLayer layer];
self.trackLayer.lineCap = kCALineCapButt;
self.trackLayer.lineJoin = kCALineCapButt;
self.trackLayer.lineWidth = _lineWidth;
self.trackLayer.fillColor = nil;
self.trackLayer.strokeColor = _trackTintColor.CGColor;
self.trackLayer.frame = self.bounds;
[self.layer addSublayer:self.trackLayer]; self.progressLayer = [CAShapeLayer layer];
self.progressLayer.lineCap = kCALineCapButt;
self.progressLayer.lineJoin = kCALineCapButt;
self.progressLayer.lineWidth = _trackerWidth;
self.progressLayer.fillColor = _fillColor.CGColor;
self.progressLayer.strokeColor = _progressTintColor.CGColor;
self.progressLayer.frame = self.bounds;
[self.layer addSublayer:self.progressLayer]; self.progressLayer.strokeEnd = 0.0; [self addSubview:self.centerBtn];
} - (void)layoutSubviews
{
[super layoutSubviews]; [self updateLayerPath];
} #pragma mark - private - (UIButton *)centerBtn
{
if(!_centerBtn)
{
_centerBtn = [[UIButton alloc] initWithFrame:CGRectMake(, , PROGRESS_WIDTH - , PROGRESS_HEIGHT - )];
_centerBtn.center = CGPointMake(PROGRESS_WIDTH/, PROGRESS_HEIGHT/);
_centerBtn.titleLabel.textAlignment = NSTextAlignmentCenter;
_centerBtn.layer.cornerRadius = _centerBtn.width/;
_centerBtn.backgroundColor = RGBCOLOR(, , );
_centerBtn.titleLabel.adjustsFontSizeToFitWidth = YES;
_centerBtn.userInteractionEnabled = NO;
_centerBtn.layer.masksToBounds = YES;
}
return _centerBtn;
} - (void)updateLayerPath
{
if (_progressViewStyle == CCProgressViewStyleCircle) {
self.trackLayer.frame = self.bounds;
self.progressLayer.frame = self.bounds; CGFloat radius = CGRectGetWidth(self.frame) > CGRectGetHeight(self.frame) ?
(CGRectGetHeight(self.frame) - _lineWidth) / 2.0 : (CGRectGetWidth(self.frame) - _lineWidth) / 2.0;
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:self.progressLayer.position radius:radius startAngle:_startAngle endAngle:_clockwise ? _startAngle + * M_PI : _startAngle - * M_PI clockwise:_clockwise];
self.trackLayer.path = bezierPath.CGPath;
self.progressLayer.path = bezierPath.CGPath;
} else {
self.trackLayer.frame = CGRectMake(, (CGRectGetHeight(self.frame) - _lineWidth) / 2.0, CGRectGetWidth(self.frame), _lineWidth);
self.progressLayer.frame = self.trackLayer.frame; UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint:CGPointMake(, self.progressLayer.position.y)];
[bezierPath addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), self.progressLayer.position.y)];
self.trackLayer.path = bezierPath.CGPath;
self.progressLayer.path = bezierPath.CGPath;
}
} #pragma mark - setter
- (void)setTrackTintColor:(UIColor *)trackTintColor
{
_trackTintColor = trackTintColor;
self.trackLayer.strokeColor = trackTintColor.CGColor;
} - (void)setProgressTintColor:(UIColor *)progressTintColor
{
_progressTintColor = progressTintColor;
self.progressLayer.strokeColor = progressTintColor.CGColor;
} - (void)setProgressFullTintColor:(UIColor *)progressFullTintColor
{
_progressFullTintColor = progressFullTintColor;
if (self.progressLayer.strokeEnd >= 1.0) {
self.progressLayer.strokeEnd = 1.0;
self.progressLayer.strokeColor = _progressFullTintColor.CGColor;
}
} - (void)setLineWidth:(CGFloat)lineWidth
{
_lineWidth = lineWidth;
// self.trackLayer.lineWidth = lineWidth;
self.progressLayer.lineWidth = lineWidth;
if (_progressViewStyle != CCProgressViewStyleCircle) {
[self updateLayerPath];
}
} - (void)setTrackerWidth:(CGFloat)trackerWidth {
_trackerWidth = trackerWidth;
self.trackLayer.lineWidth = _trackerWidth;
if (_progressViewStyle != CCProgressViewStyleCircle) {
[self updateLayerPath];
}
} #pragma mark - setter (CCProgressViewStyleCircle)
- (void)setFillColor:(UIColor *)fillColor
{
_fillColor = fillColor;
self.progressLayer.fillColor = fillColor.CGColor;
} - (void)setClockwise:(BOOL)clockwise
{
_clockwise = clockwise;
[self updateLayerPath];
} - (void)setStartAngle:(CGFloat)startAngle
{
_startAngle = startAngle;
[self updateLayerPath];
} - (void)setProgress:(CGFloat)progress
{
[self setProgress:progress animated:NO];
} - (void)setProgress:(CGFloat)progress animated:(BOOL)animated
{
if (animated) { // 这里的动画可以直接使用CABasicAnimation
POPBasicAnimation *basicAnim = [POPBasicAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
if (basicAnim) {
basicAnim.duration = kAnimTimeInterval;
basicAnim.toValue = @(progress);
} else {
basicAnim = [POPBasicAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
basicAnim.fromValue = @(self.progressLayer.strokeEnd);
basicAnim.toValue = @(progress);
basicAnim.duration = * kAnimTimeInterval;
basicAnim.removedOnCompletion = YES;
}
@weakify(self);
basicAnim.completionBlock = ^(POPAnimation *anim, BOOL finished) {
@strongify(self);
POPPropertyAnimation *basicAnim = (POPPropertyAnimation *)anim;
self.progressLayer.strokeEnd = [basicAnim.toValue doubleValue];
if (self.progressLayer.strokeEnd >= 1.0 && _progressFullTintColor) {
self.progressLayer.strokeEnd = 1.0;
self.progressLayer.strokeColor = _progressFullTintColor.CGColor;
}
};
[self.progressLayer pop_addAnimation:basicAnim forKey:kPOPShapeLayerStrokeEnd];
} else {
self.progressLayer.strokeEnd = progress;
if (self.progressLayer.strokeEnd >= 1.0 && _progressFullTintColor) {
self.progressLayer.strokeEnd = 1.0;
self.progressLayer.strokeColor = _progressFullTintColor.CGColor;
}
}
} @end

IOS 圆形进度条的更多相关文章

  1. [iOS]圆形进度条及计时功能

    平时用战网安全令的时候很喜欢圆形倒计时的效果,然后简单看了一下Android的圆形进度条,后来又写了一个IOS的.整体界面参照IOS系统的倒计时功能,顺便熟悉了UIPickerView的一些特性的实现 ...

  2. iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  3. iOS开发笔记-根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现

    最近同样是新App,设计稿里出现一种圆形进度条的设计,如下: 想了想,圆形进度条实现起来不难,但是其中显示百分比的文本确需要自适应,虽然可以使用时自己设定文本字体的大小,但是这样显得很麻烦,也很low ...

  4. 移动端纯CSS3制作圆形进度条所遇到的问题

    近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

  5. android 自定义控件——(四)圆形进度条

    ----------------------------------↓↓圆形进度条(源代码下有属性解释)↓↓---------------------------------------------- ...

  6. WPF 实现圆形进度条

    项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到迷途的小榔头给出的思路和部分代码,自己加以实现. 进度小于60显示红色,大于60则显示绿色.效果如下: 基本思路: ...

  7. html5 svg 圆形进度条

    html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  9. Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)

      Android 高手进阶(21)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...

随机推荐

  1. elastic-job详解(四):失效转移

    elastic-job中最关键的特性之一就是失效转移.配置了失效转移之后,如果在任务执行过程中有一个执行实例挂了,那么之前被分配到这个实例的任务(或者分片)会在下次任务执行之前被重新分配到其他正常节点 ...

  2. C#_02.10_基础一_.NET框架

    C#_02.10_基础一_.NET框架 一.概念: .NET框架是一个多语言组件开发和执行环境,它提供了一个跨语言的统一编程环境. 解读: 1..net框架是一个编程环境, 2.可以进行多语言的开发和 ...

  3. pygame-KidsCanCode系列jumpy-part18-背景滚动

    接上回继续,之前的游戏背景过于单调,今天加几朵白云的背景效果. 要点: 1. 白云要有大有小,尽量模拟出远近层次的效果. 2. 兔子向上跳时,(背景)白云也要相应的滚动,但是为了视觉效果,速度要低于档 ...

  4. 轻量级的Web框架——Nancy

    最近想找一个简单的.Net下的轻量级Web框架,作为用户的本地的一个WebServer,实现同浏览器程序的一些简单交互,并调用本地服务,实现类似浏览器插件的功能.它有如下几点要求: 简单,能快速账务, ...

  5. CSS魔法堂:那个被我们忽略的outline

    前言  在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性--outline,由于之前对其印象确实有些模糊,于是本文打算对其 ...

  6. OpenCV3 for python3 学习笔记3-----用OpenCV3处理图像一

    本文的内容都与图像处理有关,这时需要修改图像,比如要使用具有艺术性的滤镜.外插(extrapolate)某些部分.分割.粘贴或其他需要的操作. 1.不同色彩空间的的转换 OpenCV有数百种关于在不同 ...

  7. CentOs7 HP找回root密码

    linuxman本人尝试了两种方式修改密码,只有一种成功.现展示如下第一种:成功1. 在启动界面选择  centos linux, with linux***.x86_642. 按 e 键进入编辑模式 ...

  8. Nload(CentOS网速的实时监控)

    Nload(CentOS网速的实时监控)的安装和安装过程中的问题 I. 安装 Download the latest rpmforge-release rpm from wget ftp://ftp. ...

  9. slackware在vagrant中使用

    slackware以简洁干净的系统闻名于世,如果你想学习了解linux,那么slackware是一个很好的选择,其他linux不是不好,他们都太复杂了,复杂的你不知道从哪里开始. 所以,还是slack ...

  10. MySQL数据库的安装教程及相关问题

    MySQL数据库的安装教程及相关问题 2018-07-13 MySQL数据库的下载及安装教程 问题1:Authentication plugin 'caching_sha2_password' can ...