SFRoundProgressCounterView 带有进度显示的倒计时视图

https://github.com/simpliflow/SFRoundProgressCounterView

A custom UIView with a rounded progress bar and a counter in the center of the circle. Supports multiple time intervals (in milliseconds), start/stop/resuming counter, set custom color, etc. (see example project)

一个自定义的UIView,里面有一个圆形的进度条以及中央的一个计数器。支持多种时间格式(支持毫秒),开始,结束,恢复操作,以及自定义颜色。

   

Setup(开始)

Installing with CocoaPods

用CocoaPods安装

If you're unfamiliar with CocoaPods you can check out this tutorial here.

  1. In Terminal navigate to the root of your project.
  2. Run 'touch Podfile' to create the Podfile.
  3. Open the Podfile using 'open -e Podfile'
  4. Add the pod SFRoundProgressCounterView to your Podfile.

    platform :ios, '7.0'
    pod 'SFRoundProgressCounterView'
  5. Run pod install.

  6. Open your app's .xcworkspace file to launch Xcode and start using the control!

Usage(使用)

  1. Either create SFRoundProgressCounterView by dragging UIView from storyboard and change implementing class or create it programmatically 创建SFRoundProgressCounterView
  2. Create an outlet (if create via storyboard) 创建 outlet
  3. Set up time intervals 设置时间间隔

    self.sfProgressCounterView.delegate = self;
    NSNumber* interval = [NSNumber numberWithLong:5000.0];
    self.sfProgressCounterView.intervals = @[interval];
    // you could also define multiple intervals
    //self.sfProgressCounterView.intervals = @[interval, interval, interval];
  4. Counter interaction 设置计数器交互

    [self.sfProgressCounterView start];
    [self.sfProgressCounterView stop];
    [self.sfProgressCounterView resume];
    [self.sfProgressCounterView reset];
  5. Appearance Settings 外观样式设置

    // thickness of outer circle
    self.sfProgressCounterView.outerCircleThickness = [NSNumber numberWithFloat:3.0]; // thickness of inner circle
    self.sfProgressCounterView.innerCircleThickness = [NSNumber numberWithFloat:1.0]; // track color of outer circle
    self.sfProgressCounterView.innerTrackColor = [UIColor redColor]; // track color of inner circle
    self.sfProgressCounterView.outerTrackColor = [UIColor blackColor]; // distance between two circles (if multiple intervals)
    self.sfProgressCounterView.circleDistance = [NSNumber numberWithFloat:6.0]; // set color of outer progress circles
    self.sfProgressCounterView.outerProgressColor = color; // set color of inner progress circle
    self.sfProgressCounterView.innerProgressColor = color; // set color of counter label
    self.sfProgressCounterView.labelColor = color;

Delegate Methods(代理方法)

    - (void)countdownDidEnd:(SFRoundProgressCounterView*)progressCounterView;
- (void)intervalDidEnd:(SFRoundProgressCounterView*)progressCounterView WithIntervalPosition:(int)position;
- (void)counter:(SFRoundProgressCounterView *)progressCounterView didReachValue:(unsigned long long)value;

Author(s)

Simpliflow GmbH

Thomas Winkler

[翻译] SFRoundProgressCounterView 带有进度显示的倒计时视图的更多相关文章

  1. [翻译] MCProgressView 使用自定义图片做进度显示

    MCProgressView 使用自定义图片做进度显示 https://github.com/Baglan/MCProgressView Progress bar view with custom i ...

  2. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  3. 初识html5 File API实现带有进度提示的文件上传

    Html5终于解决了上传文件的同时显示文件上传进度的老问题.现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipar ...

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

    Xamarin iOS教程之进度条和滚动视图 Xamarin iOS 进度条 进度条可以看到每一项任务现在的状态.例如在下载的应用程序中有进度条,用户可以很方便的看到当前程序下载了多少,还剩下多少.Q ...

  5. silverlight漂亮的文件上传进度显示原理及示例

    silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园  2009/11/27 13:37:11 阅读 1219  次 概述:在网站根目录web.config里配 ...

  6. Retrofit2文件上传下载及其进度显示

    序 前面一篇文章介绍了Retrofit2的基本使用,这篇文章接着介绍使用Retrofit2实现文件上传和文件下载,以及上传下载过程中如何实现进度的显示. 文件上传 定义接口 1 2 3 @Multip ...

  7. [cocos2d]场景切换以及切换进度显示

    本文主要分两个部分叙述,第一是场景切换,第二是场景切换的进度显示. 一.场景切换 参考learn-iphone-and-ipad-cocos2d-game-development 第五章内容 coco ...

  8. Python多线程同步命令行模拟进度显示

    最近在一个Python(3.5)的小项目中需要用到多线程加快处理速度,同时需要显示进度,于是查了些资料找到几个实现方法:线程池的map-reduce和Queue结合线程的实现.这里简单的实例介绍一下Q ...

  9. nginx上传模块nginx_upload_module和nginx_uploadprogress_module模块进度显示,如何传递GET参数等。

    ownload:http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gzconfigure and make : . ...

随机推荐

  1. linux 下vim文件乱码 cat文件正常处理方法

    linux 下vim文件乱码 cat文件正常处理方法 服务器支持中文字符集,cat和其他查看文件命令现在正常,vim还是出现了中文乱码问题, 1.查看文件编码格式 vim 文件 :set fileen ...

  2. IOS - Safari中click点击事件无效

    做web移动端页面时,安卓端一点问题也没,发现在ios真机上点击事件无效,发现Safari下只有默认可点击的元素才click点击事件,像span div等元素是不具有点击事件的. 解决问题四种方式: ...

  3. React学习笔记2017-12-31

    课程:https://coding.imooc.com/class/chapter/150.html 第一章:介绍 第二章:知识储备 React开发环境 1.安装Nodejs 2.安装Visual S ...

  4. JavaScript的类型体系

    一:总体的类型系 基本类型:数字类型(number),字符串类型(string),布尔类型(boolean); 复合类型:对象(对象,函数,数组等); 无类型:null(有定义),undefined( ...

  5. spring源码分析 contextConfigLocation属性的位置

    <context-param> <param-name>contextConfigLocation</param-name> <param-value> ...

  6. ubuntu 安装qq 及解决安装完搜狗输入法不显示键盘的方法

    安装qq: https://zhuanlan.zhihu.com/p/27549700 解决搜狗输入法不显示的问题: http://blog.csdn.net/crystal_zero/article ...

  7. TP5视频教程课程内容

    <TP5 视频教程课程内容> 一.ThinkPHP5TP5 官网基础教程, 官网手册作为参考,讲解TP5的使用方法.理解TP的用途 二.TP5大型项目实战及底层源码分析用TP5 做大型电商 ...

  8. FastReport.Net使用:[38]关系的使用

    打印所有成绩 1. 数据源准备 接下来我们需要打印学生成绩,而成绩表中无姓名,我们通过建立Realtion关系来打印数据. 2. 创建Relation关系 在数据视图上的动作下拉菜单中选择“新建关系” ...

  9. FastReport.Net使用:[27]样式使用

    样式设置与使用 1.打开样式设置界面,通过 报表->样式 来打开. 2.样式设置包含:边框,填充,字体和文本颜色.假如不需要某项设置,可将其选择框去掉. 3.设置好样式后,将标题的style设置 ...

  10. 51nod1624 取余最长路 前缀和 + set

    由于只有3行,因此只会会换行2次,假设$x, y$分别为这两次的换行点 那么答案为$S[1][x] +S[2][y] - S[2][x - 1] + S[3][n] - S[3][y - 1]$ 其中 ...