封装一个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。

时间: 2024-10-17 05:12:44

封装一个UILabel圆形边框显示进度的相关文章

一个UILabel不同部分显示不同颜色

我们直接来看效果图吧: 需求:就是表格cell里面的状态Label,前面的"状态:"是黑色,后面的状态值是红色,他们在同一个Label上,怎么做呢? 解答:真的是会者不难,难者不会啊,使用富文本,轻松搞定. 费话不多说,直接上代码: 1 // 根据状态值合成富文本 2 - (NSMutableAttributedString *)getStateString:(NSString *)state{ 3 4 // 合成后的字符串 5 NSString *fullStr = [NSStrin

winform 加载窗体时弹出另一个窗体并显示进度条的源码

winform 加载窗体时弹出另一个窗体并显示进度条的源码 //frmA: 源窗体 //------------------------------------------ //引用 using System.Threading; BackgroundWorker worker; public frmA() { InitializeComponent(); worker = new BackgroundWorker(); worker.DoWork += new DoWorkEventHandl

用java程序把本地的一个文件拷贝到hdfs上并显示进度

把程序打成jar包放到Linux上 转到目录下执行命令 hadoop jar mapreducer.jar /home/clq/export/java/count.jar  hdfs://ubuntu:9000/out06/count/ 上面一个是本地文件,一个是上传hdfs位置 成功后出现:打印出来,你所要打印的字符. package com.clq.hdfs; import java.io.BufferedInputStream; import java.io.FileInputStream

UISlider显示进度

图片展示效果如下: 其他没什么好说的,直接上代码: RootView.h: 1 #import <UIKit/UIKit.h> 2 3 @interface RootView : UIView 4 @property (nonatomic, strong) UISlider *slider; 5 @property (nonatomic, strong) UILabel *label; 6 7 @end RootView.m: 1 #import "RootView.h"

[Android] 给图像添加相框、圆形圆角显示图片、图像合成知识

    前一篇文章讲述了Android触屏setOnTouchListener实现突破缩放.移动.绘制和添加水印,继续我的"随手拍"项目完成给图片添加相框.圆形圆角显示图片和图像合成的功能介绍.希望文章对大家有所帮助. 一. 打开图片和显示assets文件中图片 首先,对XML中activity_main.xml进行布局,通过使用RelativeLayout相对布局完成(XML代码后面附).然后,在Mainctivity.java中public class MainActivity e

[Android] 给图像加入相框、圆形圆角显示图片、图像合成知识

    前一篇文章讲述了Android触屏setOnTouchListener实现突破缩放.移动.绘制和加入水印,继续我的"随手拍"项目完毕给图片加入相框.圆形圆角显示图片和图像合成的功能介绍.希望文章对大家有所帮助. 一. 打开图片和显示assets文件里图片 首先,对XML中activity_main.xml进行布局,通过使用RelativeLayout相对布局完毕(XML代码后面附).然后,在Mainctivity.java中public class MainActivity e

html点击圆形扩散显示界面特效

html点击圆形扩散显示界面特效 开场白 效果 用到的核心代码 思考 探索 源码 兼容性问题 开场白 经常看到某些app有点击扩散的特效,有些当做扩散显示界面,有些扩散改变主题颜色,想在网页上实现一下,所以就有了这个. 效果 不想听逼逼的直接去源码 用到的核心代码 css的样式 overflow:hidden;/*隐藏超出部分*/ position:fixed;/*用于悬浮*/ jquery的动画 $("#id").animate() 思考 先创建一个圆形div和一个按钮: <d

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

【原创】用JAVA实现大文件上传及显示进度信息

用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 一. 大文件上传基础描述: 各种WEB框架中,对于浏览器上传文件的请求,都有自己的处理对象负责对Http MultiPart协议内容进行解析,并供开发人员调用请求的表单内容. 比如: Spring 框架中使用类似CommonsMultipartFile对象处理表二进制文件信息. 而.NET 中使用HtmlInputFile/ HttpPostedFile对象处理二进制文件信息. 优点:使用框架内置对象可以很方便的