iOS 渐变色实现,渐变色圆环,圆环进度条
CAGradientLayer图层可以通过设置mask来给视图添加渐变效果 CAGradientLayer主要需要设置一下几个参数
colors:传入需要渐变的颜色 例如 self.gradientLayer.colors = @[(__bridge id)[UIColor orangeColor].CGColor,(__bridge id)[UIColor orangeColor].CGColor]; 需要注意的Color格式
startPoint:渐变开始的位置 self.gradientLayer.startPoint = CGPointMake(0, 0);
endPoint:渐变结束的位置 self.gradientLayer.endPoint = CGPointMake(1, 1);
我画一个坐标你立刻就明白了,中间是0.5
(0,0) -------- (1,0)
| |
| 0.5 |
| |
(0,1) -------- (1,1)
CAShapeLayer 可以传入UIBezierPath曲线,这样我们可以通过UIBezierPath绘制一个圆环,通过CAGradientLayer来实现渐变效果
fillColor:填充颜色
strokeColor:绘制颜色
lineWidth:线宽
path:绘图路径(CGPath)
关于用UIBezierPath画圆 圆环
UIBezierPath bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width0.5, self.bounds.size.height*0.5) radius:self.bounds.size.width/2 - 20 startAngle:0 endAngle:M_PI clockwise:YES];
这里需要注意传入的是弧度而不是角度 弧度转角度可以自行查阅资料
弧度在坐标系中的位置我这里大致画一下,方便观察开始角度和结束角度
-M_PI_2(M_PI+M_PI_2)
∧
|
|
|
|
M_PI---------|----------> 0
|
|
|
|
M_PI_2
//给圆环添加渐变效果
self.shapeLayer = [[CAShapeLayer alloc] init];
self.shapeLayer.frame = self.bounds;
self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
self.shapeLayer.lineWidth = 10.f;
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width*0.5, self.bounds.size.height*0.5) radius:self.bounds.size.width/2 - 20 startAngle:0 endAngle:M_PI clockwise:YES];
self.shapeLayer.path = bezierPath.CGPath;
//创建渐变层
self.gradientLayer = [[CAGradientLayer alloc] init];
self.gradientLayer.frame = self.bounds;
self.gradientLayer.colors = @[(__bridge id)[UIColor orangeColor].CGColor,(__bridge id)[UIColor orangeColor].CGColor];
self.gradientLayer.startPoint = CGPointMake(0, 0);
self.gradientLayer.endPoint = CGPointMake(1, 1);
self.gradientLayer.mask = self.shapeLayer;
[self.layer addSublayer:self.gradientLayer];
更多内容参见demo:https://github.com/qqcc1388/TYGradientRingDemo
转载请标注来源:http://www.cnblogs.com/qqcc1388/p/8670620.html
iOS 渐变色实现,渐变色圆环,圆环进度条的更多相关文章
- ios swift 实现饼状图进度条,swift环形进度条
ios swift 实现饼状图进度条 // // ProgressControl.swift // L02MyProgressControl // // Created by plter on 7/2 ...
- IOS中公布应用程序,进度条一直不走怎么处理
在IOS中公布应用程序非常是喜闻乐见. 近期1周.我更新了6次版本号.可是时不时的会卡住,进度条不走. 最后总结了几个原因. 1.在公布前你要确认自己的证书是否配置正确 2.DNS域名server有没 ...
- ios - 带动画圆形旋转的进度条
#import <UIKit/UIKit.h> @interface TJCircleProgressView : UIView /** * 图标 */ @property(nonatom ...
- iOS WKWebView添加网页加载进度条(转)
一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView ...
- vue实用组件——圆环百分比进度条
因为所在公司临近年底突然宣布Game Over,导致我等小码农又要踏上一个艰辛的求职道路了.才眨眼功夫,年就过完了,快乐的时光总是很匆忙呀. 开年的第一个面试,面试官问我会不会自己写一个圆环进图圈,这 ...
- iOS 自定义任意形状加载进度条(水波纹进度条)
1. 项目中要做类似下面的加载动画: 先给出安卓的实现方式 2.iOS的实现方式参考了下面两位的,感谢. 以任意底部图片为背景的加载动画 和 水波纹动画 最后附上自己的demo
- iOS UIWebView加载时添加进度条
标注:此框架仅适合UIWebView 对iOS8后新出的WKWebView不适用,当然,你可以尝试修改框架里的几个代理方法. 框架是:NJKWebViewProgress 导入头文件 #import ...
- iOS UIWebView加载时添加进度条01
标注:此框架仅适合UIWebView 对iOS8后新出的WKWebView不适用,当然,你可以尝试修改框架里的几个代理方法. 框架是:NJKWebViewProgress 导入头文件 #import ...
- H5 可堆叠的圆环进度条,支持任意数量子进度条
by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...
- iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
随机推荐
- Closest Binary Search Tree Value -- LeetCode
Given a non-empty binary search tree and a target value, find the value in the BST that is closest t ...
- kaptcha验证码
@Action("/validimg") public String validimg() throws Exception { genernateCaptchaImage(); ...
- 【微信】微信小程序 获取本次场景值
场景值: 代表从何处进入小程序的.代表小程序的入口场景值. 注意: 1>目前仅可以在 App 的 onlaunch 和 onshow 中获取上述场景值 获取场景值的方法: //在小程序的onLa ...
- ASP.NET 5基础之中间件
来源https://docs.asp.net/en/latest/fundamentals/middleware.html 一些可以整合进http请求管道的小的应用组件称做中间件.ASP.NET 5集 ...
- hdu1004(c++)
字符串统计问题,统计每个字符串的次数,输出出现次数最多的字符串 #include<iostream>#include<string>#include<algorithm& ...
- Android源码和内核源码的下载,编译和执行
笔者依据罗升阳老师的<Android 系统源码情景分析>一书,尝试下载,编译和执行Android源码和内核源码.但可能是软件源"被墙"或版本号更新的原因.期间遇到诸多问 ...
- 解决Mac安装M2Crypto提示无法找到openssl头文件问题
大概是这种问题 running build running build_py running build_ext building'M2Crypto.__m2crypto' extension swi ...
- Java程序IP v6与IP v4的设置
Java程序IP v6与IP v4的设置 //Prevent to get IPV6 address,this way only work in debug mode //But you can pa ...
- SSO单点登录系列4:cas-server登录页面自定义修改过程(jsp页面修改)
落雨 cas 单点登录 SSO单点登录系列4:cas-server登录页面自定义修改过程,全新DIY. 目标: 下面是正文: 打开cas的默认首页,映入眼帘的是满眼的中文and英文混杂体,作为一 ...
- ContentProvider之通过ContentResolver获取图像、视频、音频举例
MediaStore中定义了一系列的数据表格,通过ContentResolver提供的查询接口,我们能够得到各种须要的媒体信息.通过下面两个URI能够扫描设备外部和内部的媒体文件.Android系统提 ...