IOS实现简单的进度条功能

本文实例绘制了炫酷的下载进度条，分享给大家供大家参考，具体内容如下

一、实现思路
1、要实现绘图，通常需要自定义一个UIView的子类，重写父类的- (void)drawRect:(CGRect)rect方法，在该方法中实现绘图操作
2、若想显示下载进度，只需要实例化自定义子类的对象（若是storyboard中控件，只需修改控件的class属性为自定义子类的类名即可）

3、效果图所示的效果其实是绘制一个圆弧，动态的改变终点的位置，最终达到一个封闭的圆
4、中间的文字是一个UILabel控件，根据进度动态改变文字的现实
二、实现步骤
1、自定义一个UIView的子类

//提供一个成员属性，接收下载进度值
@property (nonatomic, assign) CGFloat progress;

2、重写成员属性progress的setter

//每次改变成员属性progress的值，就会调用它的setter
- (void)setProgress:(CGFloat)progress
{
  _progress = progress;
  //当下载进度改变时，手动调用重绘方法
  [self setNeedsDisplay];
}

3、重写- (void)drawRect:(CGRect)rect（核心）

- (void)drawRect:(CGRect)rect
{
  //设置圆弧的半径
  CGFloat radius = rect.size.width * 0.5;
  //设置圆弧的圆心
  CGPoint center = CGPointMake(radius, radius);
  //设置圆弧的开始的角度（弧度制）
  CGFloat startAngle = - M_PI_2;
  //设置圆弧的终止角度
  CGFloat endAngle = - M_PI_2 + 2 * M_PI * self.progress;
  //使用UIBezierPath类绘制圆弧
  UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 5 startAngle:startAngle endAngle:endAngle clockwise:YES];
  //将绘制的圆弧渲染到图层上（即显示出来）
  [path stroke];
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • iOS中使用NSProgress类来创建UI进度条的方法详解

    一.引言 在iOS7之前,系统一直没有提供一个完整的框架来描述任务进度相关的功能.这使得在开发中进行耗时任务进度的监听将什么麻烦,在iOS7之后,系统提供了NSProgress类来专门报告任务进度. 二.创建单任务进度监听器 单任务进度的监听是NSProgress最简单的一种运用场景,我们来用定时器模拟一个耗时任务,示例代码如下: @interface ViewController () { NSProgress * progress; } @end @implementation ViewCo

  • iOS快速实现环形渐变进度条

    iOS快速实现环形渐变进度条

    前言 进度条相信我们大家都不陌生,往往我们很多时候需要使用到圆形进度条.这篇文章给大家分享了利用iOS如何快速实现环形进度条,下面来一起看看. 一:先制作一个不带颜色渐变的进度条 自定义一个cycleView,在.m 中实现drawRect方法 - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext();//获取上下文 CGPoint center = CGPointMake(100, 100)

  • Android仿IOS ViewPager滑动进度条

    Android仿IOS ViewPager滑动进度条

    最近做项目,碰到如下的需求:ViewPager分页,如果是6页(包括6页)就用圆点,如果是6页以上就用进度条来切换.前面一种交互方法最常见,用小圆点来表示当前选中的页面,这些小圆点称为导航点,很多App都是这种实现方式.当用户第一次安装或升级应用时,都会利用导航页面告诉用户当前版本的主要亮点,一般情况下当行页面有三部分组成,背景图片,导航文字和滑动的原点,即下面的效果: 这里就不作详细的讲解,大家可以参考我以前写过的博客: ViewPager实现图片轮翻效果 今天来实现ViewPager进度条切

  • iOS 进度条、加载、安装动画的简单实现

    iOS 进度条、加载、安装动画的简单实现

    首先看一下效果图: 下面贴上代码: 控制器ViewController: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end /*** ---------------分割线--------------- ***/ #import "ViewController.h" #import "HWWaveView.h" #import "HWCircleVi

  • iOS实现带动画的环形进度条

    iOS实现带动画的环形进度条

    本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> @interface LoopProgressView : UIView @property (nonatomic, assign) CGFloat progress; @end .h文件 NSTimer的调用并非精确,可以自行百度 这里因为每0.01s启动一次定时器,所以要同步进度条和数字,就将self.

  • IOS实现简单的进度条功能

    IOS实现简单的进度条功能

    本文实例绘制了炫酷的下载进度条,分享给大家供大家参考,具体内容如下 一.实现思路 1.要实现绘图,通常需要自定义一个UIView的子类,重写父类的- (void)drawRect:(CGRect)rect方法,在该方法中实现绘图操作 2.若想显示下载进度,只需要实例化自定义子类的对象(若是storyboard中控件,只需修改控件的class属性为自定义子类的类名即可) 3.效果图所示的效果其实是绘制一个圆弧,动态的改变终点的位置,最终达到一个封闭的圆 4.中间的文字是一个UILabel控件,根据

  • js+HTML5 canvas 实现简单的加载条(进度条)功能示例

    js+HTML5 canvas 实现简单的加载条(进度条)功能示例

    本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title> </head> <body> <canv

  • python控制台中实现进度条功能

    python控制台中实现进度条功能

    我们大多数人都希望写一些简单的python脚本的同时都想能够在程序运行的过程中实现进度条的功能以便查看程序运行的速度或者进度.今天就和大家探讨这个问题:如何在python控制台中实现进度条功 进度条最主要的问题就是所有字符全部在同一行,而且可以修改. 然而当执行print语句的时候,python会在打印完这个语句的同时在结尾加上'\n',也就是换行,这就导致在控制台下一旦被print之后就无法再修改了.所以我们现在的输出就不能再使用print来完成了. 我们要使用的是来自sys库的sys.std

  • Python实现控制台中的进度条功能代码

    Python实现控制台中的进度条功能代码

    进度条最主要的问题就是所有字符全部在同一行,而且可以修改. 然而当执行print语句的时候,python会在打印完这个语句的同时在结尾加上'\n',也就是换行,这就导致在控制台下一旦被print之后就无法再修改了.所以我们现在的输出就不能再使用print来完成了. 我们要使用的是来自sys库的sys.stdout.write()函数,这个函数会在控制台输出这个字符串的同时不加上任何结尾,这就意味着这个输出还没有完全结束.通过sys.stdout.flush()函数可以把输出暂时打印在控制台中(造

  • Angular实现的进度条功能示例

    本文实例讲述了Angular实现的进度条功能.分享给大家供大家参考,具体如下: 项目里需要一个进度条,所以就在网上查找资料学习,看到了网友"雪狼"的代码分享,写的很高明,很精练,很厉害,原文中的代码如下: HTML部分: <div ng-class="{progress: true, 'progress-striped': vm.striped}"> <div ng-class="['progress-bar', vm.style]&qu

  • JavaScript实现简单动态进度条效果

    JavaScript实现简单动态进度条效果

    本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 1.效果 2.源码 <html> <head> <script type="text/javascript"> window.onload = function () { var myProgress = document.getElementById("myProgress"); var mySpan = document.getElementByI

  • vue页面加载时的进度条功能(实例代码)

    vue页面加载时的进度条功能(实例代码)

    先看一张图 如果我们的程序每次页面切换时,顶部也有一个进度条,那会让用户体验提升很大的. npropgress插件 github地址 简单用法 - Vue 项目为例(详细配置,点击上面的github地址查看文档) 最简单的使用方式:vue项目的每次路由切换时,都加载进度条 安装 npm install --save nprogress 引入 在路由配置文件中引入,写到路由加载前和加载后的两个钩子函数中 // 引入 import NProgress from 'nprogress'; import

  • golang 进度条功能实现示例

    最近在做一个需求,功能很简单,就是开发一个轻量级客户端,将一个指定文件中的内容通过 TCP 发送到服务器.由于该文件特别大,有可能到达100G的数量级,因此处理起来会比较慢,为了给用户提供比较友好的展示界面,因此,在其中加入了进度条显示功能. 在这里,说一下我在实现该进度条功能时的一些思路. 成果演示 先看一下最终的成品效果展示: 该进度条一共分三部分组成,第一部分是主体进度条,第二部分是百分比,第三部分是当前完成的数据和总数据的一个动态展示. 源码分析 由于是要在终端上打印出进度条的效果,因此

  • AngularJS实现进度条功能示例

    AngularJS实现进度条功能示例

    本文实例讲述了AngularJS实现进度条功能的方法.分享给大家供大家参考,具体如下: 一.功能描述: ① 通过select标签,可以为进度条选择不同的样式(颜色) ② 进度条的进度通过文本框里面的值改变(也可以快捷的选择几个特定的值) ③ 通过checkbox按钮,控制进度条上的文字是否显示 二.代码实现: <!DOCTYPE html> <html lang="en" ng-app='app'> <head> <meta charset=&

  • bootstrap+jQuery实现的动态进度条功能示例

    本文实例讲述了bootstrap+jQuery实现的动态进度条功能.分享给大家供大家参考,具体如下: 此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progress-bar从而实现基本的进度条. b.在外层<div>中加入class .progress-striped实现条纹进度条. c.在内层<div>加入class .progress-b

随机推荐