[翻译] SFRoundProgressCounterView 带有进度显示的倒计时视图

简介:

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

目录
相关文章
|
8月前
|
C# C++
C# 自定义时间进度条
本文作者通过参考leslie_xin的一篇文章,成功创建了一个自定义的WinForms控件——时间进度条,该控件带有时间刻度和多种可定制的属性,如颜色、时间间隔等。作者在控件中加入了开始和结束时间,以及自适应的时间刻度间隔。控件能根据设置显示时间标签,并提供了事件处理,如值改变时的触发。代码中包含了计算时间刻度、绘制刻度线和时间标签的逻辑。作者强调了避免循环调用事件、使用OnXXX()形式的事件处理函数以及注意自定义控件中的属性和事件设计。
178 7
|
6月前
|
安全 BI UED
分享一个在 WinForm 桌面程序中使用进度条展示报表处理进度的例子,提升用户体验
分享一个在 WinForm 桌面程序中使用进度条展示报表处理进度的例子,提升用户体验
|
9月前
|
搜索推荐
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。(一)
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。
|
Windows
通过代码的方式获取当前活动窗口的标题
通过代码的方式获取当前活动窗口的标题
409 4
倒计时功能制作
今天制作一个商城项目距离抢购还剩多长时间的一个小功能 首先要知道这个倒计时是不断的变化的,所以需要用到定时器来自动变化(setInterval),有三个标签存放时分秒,再利用innerHTML将计算出来的时间放入三个标签内,第一次执行也是间隔毫秒数,因此刷新页面会有空白,我们最好采取封装函数的方式,这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题。
LabVIEW显示控件中内容过长设置自动滚动条
本篇博文分享程序设计时一个细节小技巧,在LabVIEW显示控件中内容过长设置自动滚动条。
|
JavaScript 前端开发 UED
【组件封装】显示实时时间和星期几·附文字特效
【组件封装】显示实时时间和星期几·附文字特效
【组件封装】显示实时时间和星期几·附文字特效
|
前端开发
前端工作总结108-修改新增按钮显示逻辑
前端工作总结108-修改新增按钮显示逻辑
128 0
前端工作总结108-修改新增按钮显示逻辑
C#编程-13:ProgressBar制作时间进度倒计时
C#编程-13:ProgressBar制作时间进度倒计时
266 0
C#编程-13:ProgressBar制作时间进度倒计时
|
JavaScript 前端开发
倒计时跳转和获取实时时间
本文内容如题,自己做的一个demo,倒计时和获取实时时间在许多场景都用的到,所以还算蛮实用的,需要的朋友可以做个参考。 代码解析:html代码 <body onload="startTime()"> <div class="box"> <div class="time">请等待<span id="dd">6</span>秒</div> <!--设置时间长一点,不然一直跳转很烦--> ![](aaa.png) <div class="id-box"> <div id="time"></div>
310 0
倒计时跳转和获取实时时间