【swift】圆形数据表示百分比

最新推荐文章于 2024-06-20 09:37:25 发布
最新推荐文章于 2024-06-20 09:37:25 发布
阅读量1.4k 收藏 2
点赞数 2
分类专栏： Swift 文章标签： swift 数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Emperor_huanzi/article/details/76636259
版权

这里写图片描述

swift 2.2

import UIKit

class ProgressView: UIView {
    /// 灰色线条的颜色
    var strokelineWidth:CGFloat = 10.0
    /// 中间字的大小
    var numbelFont = UIFont.systemFontOfSize(18)
    /// 中间字的颜色
    var numbelTextColor = UIColor.blackColor()
    /// 内部轨道颜色
    var interiorRailwayColor = UIColor.lightGrayColor()
    /// 外部轨道颜色
    var exteriorRailwayColor = UIColor.redColor()

    private var progressValue : CGFloat!
    private var progressFlag : CGFloat!
    var labelTimer : NSTimer?
    lazy var outLayer : CAShapeLayer! = {
        let Layer = CAShapeLayer()
        Layer.strokeColor = UIColor.lightGrayColor().CGColor
        Layer.fillColor = UIColor.clearColor().CGColor
        Layer.lineCap = kCALineCapRound
        self.layer.addSublayer(Layer)
        return Layer
    }()

    lazy var progressLayer : CAShapeLayer! = {
        let layerNew = CAShapeLayer()
        layerNew.fillColor = UIColor.clearColor().CGColor
        layerNew.strokeColor = UIColor.redColor().CGColor
        //progressLayer.lineCap = kCALineCapRound
        self.layer.addSublayer(layerNew)
        return layerNew
    }()

    lazy var numberLabel : UILabel! = {
        let numLabelNew = UILabel(frame: CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height))
        numLabelNew.center = CGPointMake(self.bounds.size.width / 2,self.bounds.size.height/2)
        numLabelNew.backgroundColor = UIColor.clearColor()
        numLabelNew.textAlignment = .Center
        self.addSubview(numLabelNew)
        return numLabelNew
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.whiteColor()
    }
    /**
     调整绘制图像

     - parameter progress: 90
     - parameter animate:  true or false
     */
    func circleWithProgress(progress: CGFloat,andIsAnimate animate : Bool){
        if(animate){
            progressFlag = 0
            progressValue = progress
            // 灰色轨道
            let path = UIBezierPath(arcCenter: CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2), radius: self.bounds.size.width / 2 - strokelineWidth / 2 - 5, startAngle: CGFloat(0) , endAngle: CGFloat( M_PI * 2) , clockwise: true)
            self.outLayer.path = path.CGPath
            self.outLayer.lineWidth = strokelineWidth
            self.outLayer.strokeColor = interiorRailwayColor.CGColor

            // run轨道
            let path1 = UIBezierPath(arcCenter: CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2), radius: self.bounds.size.width/2 - strokelineWidth / 2 - 2.5 , startAngle: -CGFloat(M_PI * 0.5) , endAngle: CGFloat(M_PI * 1.5) , clockwise: true)
            self.progressLayer.path = path1.CGPath
            self.progressLayer.lineWidth = strokelineWidth + 5
            self.progressLayer.strokeColor = exteriorRailwayColor.CGColor

            let pathAnima = CABasicAnimation(keyPath: "strokeEnd")
            pathAnima.duration = Double(progress / 100.0)
            pathAnima.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
            pathAnima.fromValue = NSNumber(float: 0)
            pathAnima.toValue = NSNumber(float: Float(progress / 100.0))
            pathAnima.fillMode = kCAFillModeForwards
            pathAnima.removedOnCompletion = false
            self.progressLayer.addAnimation(pathAnima, forKey: "strokeEndAnimation")

            self.numberLabel.font = numbelFont
            self.numberLabel.textColor = numbelTextColor
            if(progress > 0){
                labelTimer = NSTimer.scheduledTimerWithTimeInterval(0.01, target: self, selector: "nameLbChange", userInfo: nil, repeats: true)
            }

        }else{

            self.numberLabel.text = "\(Int(progress))%"
            self.numberLabel.font = numbelFont
            self.numberLabel.textColor = numbelTextColor
            let path = UIBezierPath(arcCenter: CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2), radius: self.bounds.size.width / 2 - strokelineWidth / 2 - 5, startAngle: CGFloat(0) , endAngle: CGFloat( M_PI * 2) , clockwise: true)
            self.outLayer.path = path.CGPath
            self.outLayer.lineWidth = strokelineWidth
            self.outLayer.strokeColor = interiorRailwayColor.CGColor
            let path1 = UIBezierPath(arcCenter: CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2), radius: self.bounds.size.width/2 - strokelineWidth / 2 - 2.5 , startAngle: -CGFloat(M_PI * 0.5) , endAngle: CGFloat(M_PI * 1.5) , clockwise: true)
            self.progressLayer.path = path1.CGPath
            self.progressLayer.lineWidth = strokelineWidth + 5
            self.progressLayer.strokeEnd = progress / 100.0
            self.progressLayer.strokeColor = exteriorRailwayColor.CGColor
        }
    }
    /**
     定时器走的方法
     */
    func nameLbChange(){
        if(progressFlag >= progressValue - 1){
            labelTimer!.invalidate()
            labelTimer = nil
        }
        progressFlag! += CGFloat(1.0)
        numberLabel.text = "\(Int(progressFlag))%"

    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

swift 3++

import UIKit

class CNCircleProgressView: UIView {
    /// 灰色线条的颜色
    var strokelineWidth:CGFloat = 10.0
    /// 中间字的大小
    var numbelFont = UIFont.systemFont(ofSize: 18)
    /// 中间字的颜色
    var numbelTextColor = UIColor.black
    /// 内部轨道颜色
    var interiorRailwayColor = UIColor.lightGray
    /// 外部轨道颜色
    var exteriorRailwayColor = UIColor.red
    /// label定时器
    var labelTimer : Timer?
    /// 总的进度
    private var progressValue : CGFloat!
    /// 累加的进度
    private var progressFlag : CGFloat!
    /// 轨道layer
    private lazy var interiorRailwayLayer : CAShapeLayer! = {
        let Layer = CAShapeLayer()
        Layer.strokeColor = UIColor.lightGray.cgColor
        Layer.fillColor = UIColor.clear.cgColor
        Layer.lineCap = kCALineCapRound
        self.layer.addSublayer(Layer)
        return Layer
    }()
    /// 加载轨道layer
    private lazy var exteriorRailwayLayer : CAShapeLayer! = {
        let layerNew = CAShapeLayer()
        layerNew.fillColor = UIColor.clear.cgColor
        layerNew.strokeColor = UIColor.red.cgColor
        //progressLayer.lineCap = kCALineCapRound
        self.layer.addSublayer(layerNew)
        return layerNew
    }()

    /// 中间显示数字
    private lazy var numberLabel : UILabel! = {
        let numLabelNew = UILabel(frame: CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height))
        numLabelNew.center = CGPoint(x: self.bounds.size.width / 2, y: self.bounds.size.height/2)
        numLabelNew.backgroundColor = UIColor.clear
        numLabelNew.textAlignment = .center
        self.addSubview(numLabelNew)
        return numLabelNew
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.white

    }

    /**
     调整绘制图像

     - parameter progress: 90
     - parameter animate:  true or false
     */
    func circleWithProgress(progress: CGFloat,andIsAnimate animate : Bool){
        if animate {
            progressFlag = 0
            progressValue = progress

            let path = UIBezierPath(arcCenter: CGPoint(x: self.bounds.size.width / 2, y: self.bounds.size.height/2), radius: self.bounds.size.width / 2 - strokelineWidth / 2 - 5, startAngle: CGFloat(0), endAngle: CGFloat(M_PI * 2), clockwise: true)
            self.interiorRailwayLayer.path = path.cgPath
            self.interiorRailwayLayer.lineWidth = strokelineWidth
            self.interiorRailwayLayer.strokeColor = interiorRailwayColor.cgColor

             let pathE = UIBezierPath(arcCenter: CGPoint(x: self.bounds.size.width / 2, y: self.bounds.size.height/2), radius: self.bounds.size.width / 2 - strokelineWidth / 2 - 2.5, startAngle: -CGFloat(M_PI * 0.5), endAngle: CGFloat(M_PI * 1.5), clockwise: true)
            self.exteriorRailwayLayer.path = pathE.cgPath
            self.exteriorRailwayLayer.lineWidth = strokelineWidth + 5
            self.exteriorRailwayLayer.strokeColor = exteriorRailwayColor.cgColor

            let pathAnima = CABasicAnimation(keyPath: "strokeEnd")
            pathAnima.duration = Double(progress / 100.0)
            pathAnima.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
            pathAnima.fromValue = NSNumber(value: 0)
            pathAnima.toValue = NSNumber(value: Float(progress / 100.0))
            pathAnima.fillMode = kCAFillModeForwards
            pathAnima.isRemovedOnCompletion = false
            self.exteriorRailwayLayer.add(pathAnima, forKey: "strokeEndAnimation")

            self.numberLabel.font = numbelFont
            self.numberLabel.textColor = numbelTextColor
            if progress > 0 {
                labelTimer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(CNCircleProgressView.nameLbChange), userInfo: nil, repeats: true)
            }
        }else{
            self.numberLabel.text = "\(Int(progress))%"
            self.numberLabel.font = numbelFont
            self.numberLabel.textColor = numbelTextColor

            let path = UIBezierPath(arcCenter: CGPoint(x: self.bounds.size.width / 2, y: self.bounds.size.height/2), radius: self.bounds.size.width / 2 - strokelineWidth / 2 - 5, startAngle: CGFloat(0), endAngle: CGFloat(M_PI * 2), clockwise: true)
            self.interiorRailwayLayer.path = path.cgPath
            self.interiorRailwayLayer.lineWidth = strokelineWidth
            self.interiorRailwayLayer.strokeColor = interiorRailwayColor.cgColor

            let pathE = UIBezierPath(arcCenter: CGPoint(x: self.bounds.size.width / 2, y: self.bounds.size.height/2), radius: self.bounds.size.width / 2 - strokelineWidth / 2 - 2.5, startAngle: -CGFloat(M_PI * 0.5), endAngle: CGFloat(M_PI * 1.5), clockwise: true)
            self.exteriorRailwayLayer.path = pathE.cgPath
            self.exteriorRailwayLayer.lineWidth = strokelineWidth + 5
            self.exteriorRailwayLayer.strokeColor = exteriorRailwayColor.cgColor
            self.exteriorRailwayLayer.strokeEnd = progress / 100.0
        }
    }

    /**
     定时器走的方法
     */
    func nameLbChange(){
        if(progressFlag >= progressValue - 1){
            labelTimer!.invalidate()
            labelTimer = nil
        }
        progressFlag! += CGFloat(1.0)
        numberLabel.text = "\(Int(progressFlag))%"
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}
_huanzi
关注
专栏目录
将数字以百分比的形式呈现（swift）
zhuzhiyongai的专栏
11-25 2283
开发过程中很多时候会遇到需要将数字类型以%的形式呈现。
自定义滑条封装含有百分比例显示（swift版）
lanou21weixiuhong的专栏
04-12 1034
之前经常会用UIProgress的控件，但是有时候有的地方会要求你上面有个显示比例的地方，所以为了方便以后用到就自己封装了一个小的demo!(http://img.blog.csdn.net/20160412110730682) 你只需在ViewController中写下如下简单代码便可实现 var progress:ProVSpre progress = ProVSp
探索数据之美：SwiftPieChart —— 精致的SwiftUI饼图组件
最新发布
gitblog_00046的博客
06-20 334
探索数据之美：SwiftPieChart —— 精致的SwiftUI饼图组件 SwiftPieChartSimple and elegant Pie Chart for SwiftUI项目地址:https://gitcode.com/gh_mirrors/sw/SwiftPieChart 在数据分析与可视化领域，简洁直观的图表设计始终占据着核心地位。今天，我们向您隆重介绍一个专为Swift UI...
Percentage:Swift的百分比类型
05-12
百分比 Swift的百分比类型 例如，对于当前接受小数Double API，使百分比更具可读性和类型安全性。 - .opacity(0.45) + .opacity(45%) 安装 将以下内容添加到Package.swift ： . package ( url : " https://github.com/sindresorhus/Percentage " , from : " 1.1.0 " ) 用法 请参阅文档。 import Percentage 10 % + 5.5 % // => 15.5% -10 % / 2 // => -5% ( 40 % + 93 % ) * 3 // => 399% 50 % * 50 % // => 25% 30 % > 25 % // => true 50 % . of ( 200 ) // => 100 Percentage ( 50 )
iOS理财类圆形比例图-Swift4.0
koocui的博客
10-26 770
先上效果图：   demo下载地址：https://download.csdn.net/download/koocui/10746298   代码：     // //  ScaleCircle.swift //  饼形图 // //  Created by 小崔 on 2018/10/23. //  Copyright © 2018年 小崔fasdfff. All rights...
swift-一行代码搞定常见的富文本显示
08-15
一行代码搞定常见的富文本显示
swift-PercentView一个圆形百分比View现在很多的App都有这么一个小小的View
08-15
Swift中的PercentView是一种常见的UI组件，它以圆形的形式展示百分比信息，被广泛应用于各种App中，例如显示剩余流量或任务进度。这个组件通常由一个自定义的UIView子类实现，具备高度可定制性，可以调整颜色、大小...
swift-CircularSlider采用Swift开发的圆形进度滑块
08-15
1. **滑块轨道（Track）**：这是圆形滑块的背景，可以是填充的圆形路径，颜色可定制，用于表示进度条的范围。 2. **滑块柄（Thumb）**：用户交互的部分，通常位于轨道上，随着用户操作在轨道上移动，用于指示当前...
swift-circleProgress理财产品的圆形进度
08-15
在Swift编程语言中，开发一款理财产品的圆形进度条视图，通常涉及到UI设计、自定义视图、动画处理以及可能的数据绑定。以下是对这个主题的详细解析： 首先，`circleProgress`是应用中的一个关键组件，它是一个...
swift-圆环进度tableview组合的加载数据动画
08-15
圆环进度条通常用于表示某个任务或数据加载的进度，它以图形化的方式直观地呈现了百分比完成的状态。在Swift中，我们可以利用`UIProgressView`类或者自定义视图来创建这样的效果。如果选择自定义视图，我们需要绘制...
IOS应用源码——圆形百分比图表.rar
10-14
在iOS开发中，创建美观且功能丰富的用户界面是至关重要的，而圆形百分比图表是一种常见的可视化元素，常用于展示数据的进度或者比例。这个“IOS应用源码——圆形百分比图表.rar”压缩包中，很可能包含了一个实现此类...
swift-圆形视图(带圆角的视图)
08-15
圆形视图(带圆角的视图)
swift 虚线圆绘制
09-07
swift 虚线圆绘制代码，有需要的可以下载看看。更多内容敬请期待
iOS 百分比圆环曲线swift4.0实现
weixin_34122810的博客
03-28 283
import UIKit class XZCircleView: UIView { let backGroundLayer = CAShapeLayer.init()///背景白色细曲线 let progressLayer = CAShapeLayer.init()///进度真是数值曲线 var endVale = 0.0...
ios swift 环形进度条 圆角
baidu_40537062的博客
03-15 1056
【代码】ios swift 环形进度条 圆角。
swift做一个表示分数的方法
Beixiqi的博客
10-22 862
要求输入两个数分别表示分子和分母能正确输出该分数class Fraction { var numweator = 0 //分子 var denomator = 0 //分母 static func getMaxYue(num:Int,deno:Int) -> Int { guard num != 0 && deno != 0 else {
swift 利用赛贝尔曲线 画环形进度指示器
hengdeveloper
12-18 807
import UIKit @IBDesignable class RTShapLayerView: UIView {     var timer: Timer!     var shapeLayer: CAShapeLayer!     var mdowntime = 101     required init?(coder aDecoder: NSCoder) {         su...
macOS SwiftUI教程之绘制环形图RingView(教程含源码)
iCloudEnd的博客
12-13 559
实战需求 macOS SwiftUI教程之绘制环形图RingView 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 .fill(Color(.darkGray))填充整个圆的背景 .stroke(Color(.red), style: StrokeStyle(lineWidth: 12, lineCap: .round, lineJoin: .round)) 通过边框实行百分比效果 设置高度.frame(width: 10, height: CGFloat(value))
Swift 关于"/"和"%"
小猿猪哥的博客
02-15 889
回家过年,前后十三天,比去年的十天多了三天 回家没有电脑,手机信号也是一般.没这些也好,可以多陪下家人. 不扯了,还是来说说"/"和"%".以前玩单片机的时候,做到数码管的显示的时候需要把数字拆分,例如123需要才分为百位1 十位 2 个位3.每次都不记得"%"和"/"那个是去余数那个是取商,每次都需要尝试或是复制之前的代码.由于没有单片机开发板,也没有kell开发IDE就用Xcode写一个出
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值