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

前言

进度条相信我们大家都不陌生,往往我们很多时候需要使用到圆形进度条。这篇文章给大家分享了利用iOS如何快速实现环形进度条,下面来一起看看。

一:先制作一个不带颜色渐变的进度条

自定义一个cycleView,在.m 中实现drawRect方法

- (void)drawRect:(CGRect)rect {

  CGContextRef ctx = UIGraphicsGetCurrentContext();//获取上下文

  CGPoint center = CGPointMake(100, 100); //设置圆心位置
  CGFloat radius = 90; //设置半径
  CGFloat startA = - M_PI_2; //圆起点位置
  CGFloat endA = -M_PI_2 + M_PI * 2 * _progress; //圆终点位置

  UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];

  CGContextSetLineWidth(ctx, 10); //设置线条宽度
  [[UIColor blueColor] setStroke]; //设置描边颜色

  CGContextAddPath(ctx, path.CGPath); //把路径添加到上下文

  CGContextStrokePath(ctx); //渲染

}

因为drawRect方法只是在视图刚刚出现的时候执行一次,所以我们需要使用

[self setNeedsDisplay];

这个方法来进行重新绘制,

在控制器里面加一个slider,滑动slider来控制进度变化

- (void)drawProgress:(CGFloat )progress
{
  _progress = progress;
  [self setNeedsDisplay];
}

看一下效果

如果进度条不需要加渐变色,那么这儿几行代码就完成了。

下面来实现一下带有渐变色的进度条,原理很简单,刚刚画的是一条默认是黑色的线条,我们把黑色替换成一条渐变色的线条就可以了。

环形渐变色线条的制作:

第一步

使用CAShapeLayer绘制出渐变层,应为它只能指定两个点之间进行渐变,所以这里需要两个CAShapeLayer,左边一个和右边一个,看一下效果图

代码实现

//生成渐变色
  CALayer *gradientLayer = [CALayer layer];

  //左侧渐变色
  CAGradientLayer *leftLayer = [CAGradientLayer layer];
  leftLayer.frame = CGRectMake(0, 0, self.bounds.size.width / 2, self.bounds.size.height);  // 分段设置渐变色
  leftLayer.locations = @[@0.3, @0.9, @1];
  leftLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor];
  [gradientLayer addSublayer:leftLayer];

  //右侧渐变色
  CAGradientLayer *rightLayer = [CAGradientLayer layer];
  rightLayer.frame = CGRectMake(self.bounds.size.width / 2, 0, self.bounds.size.width / 2, self.bounds.size.height);
  rightLayer.locations = @[@0.3, @0.9, @1];
  rightLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor redColor].CGColor];
  [gradientLayer addSublayer:rightLayer];

这个渐变层只是一个中间变量,是不能显示出来的,我这里只是演示一下,现在我们已经拿到了渐变层gradientLayer。

第二步

我们需要制作一个环形路径

先看一下效果:

代码实现:

CGPoint center = CGPointMake(100, 100);
  CGFloat radius = 90;
  CGFloat startA = - M_PI_2; //设置进度条起点位置
  CGFloat endA = -M_PI_2 + M_PI * 2 * _progress; //设置进度条终点位置

  //获取环形路径(画一个圆形,填充色透明,设置线框宽度为10,这样就获得了一个环形)
  _progressLayer = [CAShapeLayer layer];//创建一个track shape layer
  _progressLayer.frame = self.bounds;
  _progressLayer.fillColor = [[UIColor clearColor] CGColor]; //填充色为无色
  _progressLayer.strokeColor = [[UIColor redColor] CGColor]; //指定path的渲染颜色,这里可以设置任意不透明颜色
  _progressLayer.opacity = 1; //背景颜色的透明度
  _progressLayer.lineCap = kCALineCapRound;//指定线的边缘是圆的
  _progressLayer.lineWidth = 10;//线的宽度
  UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];//上面说明过了用来构建圆形
  _progressLayer.path =[path CGPath]; //把path传递給layer,然后layer会处理相应的渲染,整个逻辑和CoreGraph是一致的。
  [self.layer addSublayer:_progressLayer];

第三步,也是最后一步了

用我们在第二步生成的环形路径去截取第一步生成的渐变层

[gradientLayer setMask:_progressLayer]; //用progressLayer来截取渐变层
self.layer addSublayer:gradientLayer];

截取的layer层就是我们最后需要的,看一看我们最后截取后得到的

到这里,我们已经完成了99%了,最后一步,根据自己的需要让它显示多少的比例就完成了。比例的控制在第二部的progress属性,比例在0-1之间,看一看最后的效果。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习和工作能带来一定的帮助,如果有疑问大家可以留言交流。

时间: 2016-10-07

Android仿IOS ViewPager滑动进度条

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

IOS实现简单的进度条功能

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

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

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

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

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

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

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

canvas实现环形进度条效果

昨下午睡着了,晚上打开手机才发现朋友给我发了一个QQ消息,问我这个怎么实现? 这里就选canvas来简单写一下 先上代码,然后在说一说需要注意的点: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas环形进度条</title> <style> body{ background-color:#000; text-align:

JS实现环形进度条(从0到100%)效果

最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束.动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半. 如图 代码如下 demo.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

Android实现环形进度条

一个通俗易懂的环形进度条,可以定制颜色角度,监听进度. 定义一个attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CircleProgressView"> <!--画笔宽度--> <attr name="progress_width" format=&q

Android Shape属性创建环形进度条

1,实现效果 2,实现代码: [1] shape_drawable.xml 文件 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="20dp" android:shape="ring" an

iOS自带动画效果的实例代码

 1.普通动画: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:2]; frame.origin.x += 150; [img setFrame:frame]; [UIView commitAnimations]; 2.连续动画(一系列图像): NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"myImage1.p

Android实现带数字的圆形进度条(自定义进度条)

开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧. 先看界面效果: 主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码: package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.g

Android中制作进度框和环形进度条的简单实例分享

进度框 import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; import java.util.Random; public class ObliqueProgressbar ext

Android环形进度条(安卓默认形式)实例代码

Android开发中,有很多的功能在实际应用中都起了很大的作用,比如android进度条的实现方式,下面给大家介绍Android环形进度条(安卓默认形式),具体内容如下所示: .xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_widt

canvas绘制环形进度条

效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.