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. spring-cloud-sleuth+zipkin追踪服务实现(二)

    1. 简述 在上一节<spring-cloud-sleuth+zipkin追踪服务实现(一)>中,我们使用microservice-zipkin-server.microservice-z ...

  2. Redis 启动与授权

    启动 Redis $redis-server 检查Redis是否在工作? $redis-cli 这将打开一个Redis提示,如下图所示: redis 127.0.0.1:6379> 上面的提示1 ...

  3. python存取数据进阶技巧-pickle,array模块

    我们在存/取数据时,没有必要存成文本形式,多试试二进制形式,文本只是骗骗眼睛的,要更快和更高效 1.数组形式 如果我们需要一个之包含数字的列表,那就试试array.array,注意,不是numpy模块 ...

  4. Web前端开发最佳实践(3):前端代码和资源的压缩与合并

    一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...

  5. LeetCode 118. 杨辉三角

    118. 杨辉三角 给定一个非负整数numRows,生成杨辉三角的前numRows行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例 输入: 5 输出: [ [1], [1,1], [1,2 ...

  6. cocos2dx各个版本下载地址

    https://code.google.com/archive/p/cocos2d-x/downloads?page=1 各种工具包括 NDK 8 https://github.com/fusijie ...

  7. RecyclerView悬浮标题

    效果图:        1.顶部会悬浮章的部分 2.第二章上滑会推挤第一章 3.第二章下拉会带出第一章 4.并不是所有时候都有悬浮部分(为什么这条标红,因为市面上几乎所有的悬浮都是必须存在且在顶部,害 ...

  8. App启动广告

    需求: App启动的时候获得广告图片链接,如果已经存在,判断是否和本地的相同,不相同才去下载到本地. 流程图: 这些都在广告页的前一个页面操作(logo页或者Application) import a ...

  9. 【Python初级】由生成杨辉三角代码所思考的一些问题

    杨辉三角定义如下: 1 / \ 1 1 / \ / \ 1 2 1 / \ / \ / \ 1 3 3 1 / \ / \ / \ / \ 1 4 6 4 1 / \ / \ / \ / \ / \ ...

  10. 【codeforces.com/gym/100240 J】

    http://codeforces.com/gym/100240 J [分析] 这题我搞了好久才搞出样例的11.76....[期望没学好 然后好不容易弄成分数形式.然后我‘+’没打..[于是爆0... ...