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. Mysql聚合函数count(*) 的性能分析

    你首先要明确的是,在不同的 MySQL 引擎中,count(*) 有不同的实现方式. MyISAM 引擎把一个表的总行数存在了磁盘上,因此执行 count(*) 的时候会直接返回这个数,效率很高: 而 ...

  2. 如何去除decimal后面的零?

    如何去除decimal后面的零? 1.260000m.ToString("G29") 不显示科学记数法? decimal.Parse("0.0000001",S ...

  3. Scrapy 增加随机请求头 user_agent

    原文: 为什么要增加随机请求头:更好地伪装浏览器,防止被 Ban. 如何在每次请求时,更换不同的 user_agent,Scrapy 使用 Middleware 即可 Spider 中间件 (Midd ...

  4. python生成器 协程

    生成器 参考文章:  协程   gevent 生成器进阶 看个例子: def gg(): n='' i=0 while True: n=yield i #通过send传入到n if not n: pa ...

  5. 解决 VUE 微信 IOS 路由跳转问题

    watch: { "$route"(){ if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) { location.hre ...

  6. jquery和原生js-ajax

    form表单 $('#submit').click(function(){ $('#form').serialize(); //会根据input里面的name,把数据序列化成字符串:eg:name=y ...

  7. Knockout介绍

    Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...

  8. Knockout简介

    1 Knockout简介 (Introduction) Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化. Knockout有如下4大重要概念: 声明式 ...

  9. logstash收集java日志,多行合并成一行

    使用codec的multiline插件实现多行匹配,这是一个可以将多行进行合并的插件,而且可以使用what指定将匹配到的行与前面的行合并还是和后面的行合并. 1.java日志收集测试 input { ...

  10. Xamarin.Forms XAML的辅助功能Code Snippet

    Xamarin.Forms XAML的辅助功能Code Snippet   在Visual Studio中,使用Code Snippet(代码片段)功能可以减少基础代码的编写量,如常见的标签.循环语句 ...