封装一个UILabel圆形边框显示进度
封装了一个UILabel并让它显示圆形的边框,UILabel上面显示百份比,而边框则用Animation绘制到整个圆占指定百分比的点。
这只是我个人想的继承一个UILabel实现的,用到两个CAShapeLayer,第一个Layer的作用是画出灰色的背影圆圈,第二个Layer位置放置在第一个Layer的上面,并设置为红色描绘颜色并描绘到插定的位置,之后实现相应的动画效果即可。
import UIKit class kCircleLabel: UILabel { var percent:Double! convenience init(percent per:Double,frame:CGRect) {
self.init(frame: frame)
self.percent = per
createCircle()
} override init(frame: CGRect) {
super.init(frame: frame)
} required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
} func createCircle() {
self.textAlignment = NSTextAlignment.Center
self.text = "\(percent * 100 )%" //第一个圆形Layer,边框为灰色的
let circleLayer:CAShapeLayer = CAShapeLayer()
circleLayer.lineWidth = 8
//清除填充的颜色
circleLayer.fillColor = UIColor.clearColor().CGColor
//边框的颜色
circleLayer.strokeColor = UIColor.init(red: CGFloat(220.0 / 255.0 ), green: CGFloat(220.0 / 255.0), blue: CGFloat(220.0 / 255.0), alpha: 1.0).CGColor //用贝塞尔曲线画出一个圆
let circlePath:UIBezierPath = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height)) circleLayer.path = circlePath.CGPath
self.layer.addSublayer(circleLayer) //第二个只描绘到特定位置的弧Layer
let arcLayer:CAShapeLayer = CAShapeLayer() //画出特定的弧
let arcPath:UIBezierPath = UIBezierPath(arcCenter: CGPoint(x: self.frame.size.width / 2, y: self.frame.size.height / 2), radius: self.frame.size.width / 2, startAngle: 0.0, endAngle: CGFloat(360 * percent / 180 * M_PI), clockwise: true) arcLayer.path = arcPath.CGPath
arcLayer.lineWidth = 8
//清除填充的颜色
arcLayer.fillColor = UIColor.clearColor().CGColor
arcLayer.strokeColor = UIColor.redColor().CGColor //弧Layer的动画
let arcAnimation:CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
arcAnimation.fromValue = 0.0
arcAnimation.toValue = 1.0
arcAnimation.duration = 1.5
arcAnimation.removedOnCompletion = false
arcAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) //这是从大到小的动画,适用于整个Layer
let scaleAnimation:CABasicAnimation = CABasicAnimation(keyPath: "transform.scale")
scaleAnimation.fromValue = 5.0
scaleAnimation.toValue = 1.0
scaleAnimation.duration = 0.5 arcLayer.addAnimation(arcAnimation, forKey: nil) /*let animationGroup:CAAnimationGroup = CAAnimationGroup()
animationGroup.duration = 1.0
animationGroup.animations = [ arcAnimation, scaleAnimation]*/ self.layer.insertSublayer(arcLayer, above : circleLayer)
self.layer.addAnimation(scaleAnimation, forKey: nil) } // Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
//override func drawRect(rect: CGRect) {
// Drawing code
//} }
调用时:
let circleLabel = kCircleLabel(percent: 0.52, frame: CGRect(x: (self.view.bounds.width - 100.0) / 2, y: 260, width: 100.0, height: 100.0))
self.view.addSubview(circleLabel)
要实现这个效果的关键是要学会怎么使用贝塞尔曲线,并给Layer设置Path。
封装一个UILabel圆形边框显示进度的更多相关文章
- 一个UILabel不同部分显示不同颜色
我们直接来看效果图吧: 需求:就是表格cell里面的状态Label,前面的"状态:"是黑色,后面的状态值是红色,他们在同一个Label上,怎么做呢? 解答:真的是会者不难,难者不会 ...
- UISlider显示进度(并且实现图片缩放)
图片展示效果如下: 其他没什么好说的,直接上代码: RootView.h: #import <UIKit/UIKit.h> @interface RootView : UIView @pr ...
- 简易封装一个带有占位文字的TextView
在实际iOS应用开发中我们经常会用到类似于下图所示的界面,即带有占位文字的文本框:
- iOS开发之自己封装一个progressHUD控件
看了几个轻量级的progress view 我觉得KVNProgress做的最漂亮吧 突然我想为什么我自己不封装一个控件 然后我研究了一下KVNProgress KVN简单的界面是由storyboar ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- 使用libcurl开源库和Duilib做的下载文件并显示进度条的小工具
转载:http://blog.csdn.net/mfcing/article/details/43603525 转载:http://blog.csdn.net/infoworld/article/de ...
- [Android] 给图像加入相框、圆形圆角显示图片、图像合成知识
前一篇文章讲述了Android触屏setOnTouchListener实现突破缩放.移动.绘制和加入水印,继续我的"随手拍"项目完毕给图片加入相框.圆形圆角显示图片和图像合 ...
- 手把手从零开始---封装一个vue视频播放器组件
现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...
- 【Winform】使用BackgroundWorker控制进度条显示进度
许多开发者看见一些软件有进度条显示进度,自己想弄,项目建好后发现并没有自己想象中的那么简单...看了网上很多教程后,写了一个小Demo供网友们参考~~,Demo的网址:http://pan.baidu ...
随机推荐
- ORACLE升级的一些事
一.SQL> @?/rdbms/admin/catupgrd.sql 说明:? 代表 ORACLE_HOME,在Linux中可能以 $ORACLE_HOME表示. @ 表示执行脚本 参考: ht ...
- 使用PPT绘制96孔板
什么?96孔板就是Ctrl+C然后再Ctrl+V? 那你用PPT给我画一个384孔板吧……(学生物的应该都知道这货吧?示意图不少用吧?) 还不够麻烦?那就试试基因芯片吧…… 疯掉了有木有? 那么,看看 ...
- Oracle EBS的BIP报表中显示特殊字体
http://oracleseeker.com/2009/08/25/font_mapping_setup_for_special_character_print_in_oracle_ebs_bip/ ...
- 手机端使用rem适配
最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...
- Swift 3.0 令人兴奋,但Objective-C也有小改进--Objective-C的类属性
由于Swift 3.0 出了太多令人兴奋的新特性,人们很容易忽略 Objective-C中的小改动.或许你会觉得苹果提及Objective-C 很可能是为了提高和Swift互操作性(译者注:互操作性主 ...
- ASP.NET MVC 4源码分析之如何定位控制器
利用少有的空余时间,详细的浏览了下ASP.NET MVC 4的源代码.照着之前的步伐继续前进(虽然博客园已经存在很多大牛对MVC源码分析的博客,但是从个人出发,还是希望自己能够摸索出这些).首先有一个 ...
- C++11 并发指南系列
本系列文章主要介绍 C++11 并发编程,计划分为 9 章介绍 C++11 的并发和多线程编程,分别如下: C++11 并发指南一(C++11 多线程初探)(本章计划 1-2 篇,已完成 1 篇) C ...
- [DOS] Net Use
Please use following command for regist a login user. net use \\server\folder [password] /user:[use ...
- windows本地自动集成代码+SSH服务器配置
在windows环境下使用Jenkins自动集成代码 描述: 局域网电脑A是本地服务器,安全win7系统,安装了Jenkins:现在想让A成为测试服务器,需要隔一段时间从SVN里同步出最新的代码,供客 ...
- atitit 提升数据库死锁处理总结
atitit 提升数据库死锁处理总结 正常的来说,锁上都是自动的..不用官.. 正常来讲,insert时不需要加rowlock,就默认是rowlock了, #-----锁的自动转换原理.(正常的不用理 ...