[翻译] 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

目录
相关文章
|
4月前
|
安全 BI UED
分享一个在 WinForm 桌面程序中使用进度条展示报表处理进度的例子,提升用户体验
分享一个在 WinForm 桌面程序中使用进度条展示报表处理进度的例子,提升用户体验
|
6月前
|
开发工具 git
大事件项目42---怎么区分,发布还是草稿,下拉菜单的触发时机
大事件项目42---怎么区分,发布还是草稿,下拉菜单的触发时机
|
7月前
|
Shell 开发工具 git
聊天功能演示系统发布后出现有些页面滚动与鼠标点击问题解决
聊天功能演示系统发布后出现有些页面滚动与鼠标点击问题解决
43 0
|
7月前
|
数据可视化
Visio绘制时间轴、日程安排图、时间进度图的方法
Visio绘制时间轴、日程安排图、时间进度图的方法
292 1
|
Windows
通过代码的方式获取当前活动窗口的标题
通过代码的方式获取当前活动窗口的标题
363 4
|
小程序 前端开发 JavaScript
微信小程序分类菜单激活状态跟随列表滚动自动切换
微信小程序分类菜单激活状态跟随列表滚动自动切换
169 0
微信小程序分类菜单激活状态跟随列表滚动自动切换
控制歌词滚动案例
控制歌词滚动案例
78 0
LabVIEW显示控件中内容过长设置自动滚动条
本篇博文分享程序设计时一个细节小技巧,在LabVIEW显示控件中内容过长设置自动滚动条。
滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)
滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)
|
前端开发
前端工作总结108-修改新增按钮显示逻辑
前端工作总结108-修改新增按钮显示逻辑
108 0
前端工作总结108-修改新增按钮显示逻辑