之前经常会用UIProgress的控件,但是有时候有的地方会要求你上面有个显示比例的地方,所以为了方便以后用到就自己封装了一个小的demo!(https://img-blog.csdn.net/20160412110730682)
你只需在ViewController中写下如下简单代码便可实现
var progress:ProVSpre
progress = ProVSpre(frame: CGRect(x: 0,y: 100,width: self.view.frame.size.width,height: 15))
self.view.addSubview(progress)
progress.linewidth = 4
progress.trackColor = UIColor.magentaColor()
progress.precent = 0.5
progress.backColor = UIColor.greenColor()
当然还有好多属性你也可以自己定义根据你的需求
如下是所有属性
class ProVSpre: UIView{
var widthLabel:Float = 60.0
//线的宽度
var linewidth:CGFloat = 5
// 跟踪的那个线的颜色
var trackColor:UIColor = UIColor.redColor()
//剩下的后背景的颜色
var backColor:UIColor = UIColor.whiteColor()
// 所增长的百分比例
var precent:Float = 0
// 划线的层
var drawlayer:CAShapeLayer!
// 显示比例的label的控件
var presentlabel:UILabel!
// 设置label的背景颜色
var titleBackColor:UIColor = UIColor.whiteColor()
// border的颜色
var borderColor :UIColor = UIColor.blueColor()
// 字体的颜色
var fontColor:UIColor = UIColor.blackColor()
// 字体大小
var fontSize:Float = 12.0
}
//
// proVSpre.swift
// 滑条百分比例
//
// Created by Aimee on 4/11/16.
// Copyright © 2016 Aimee. All rights reserved.
//
import UIKit
class ProVSpre: UIView {
var widthLabel:Float = 60.0
//线的宽度
var linewidth:CGFloat = 5
// 跟踪的那个线的颜色
var trackColor:UIColor = UIColor.redColor()
//剩下的后背景的颜色
var backColor:UIColor = UIColor.whiteColor()
// 所增长的百分比例
var precent:Float = 0
// 划线的层
var drawlayer:CAShapeLayer!
// 显示比例的label的控件
var presentlabel:UILabel!
// 设置label的背景颜色
var titleBackColor:UIColor = UIColor.whiteColor()
// border的颜色
var borderColor :UIColor = UIColor.blueColor()
// 字体的颜色
var fontColor:UIColor = UIColor.blackColor()
// 字体大小
var fontSize:Float = 12.0
override init(frame: CGRect) {
precent = 0
presentlabel = UILabel()
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
var textnum = precent * 100.0
// 拼接字符串
presentlabel.text = String(format: "%.2f%%", textnum)
let total:Float = Float(self.frame.size.width) - widthLabel
//设置CSAShapelayer来进行设置划线的操作
let path = UIBezierPath()
path.moveToPoint(CGPoint(x: 0, y: linewidth/2))
path.addLineToPoint(CGPoint(x: Int(self.frame.size.width), y: Int(linewidth/2)))
drawlayer = CAShapeLayer()
drawlayer.frame = CGRect(x: 0, y: self.frame.size.height/2-linewidth/2, width: self.frame.size.width, height: linewidth)
drawlayer.path = path.CGPath
drawlayer.lineWidth = linewidth
drawlayer.strokeStart = 0
drawlayer.strokeColor = trackColor.CGColor
drawlayer.strokeEnd = 0
drawlayer.fillColor = UIColor.blackColor().CGColor
drawlayer.backgroundColor = backColor.CGColor
self.layer.addSublayer(drawlayer)
// 给划线layer添加的动画效果,其中的时间duration和下面的label的动画时间是一样的为了她们的运动的同时性
let baseanimate = CABasicAnimation(keyPath: "strokeEnd")
baseanimate.fromValue = NSNumber(float: 0)
baseanimate.toValue = NSNumber(float: precent)
baseanimate.fillMode = kCAFillModeForwards
baseanimate.removedOnCompletion = false
baseanimate.duration = CFTimeInterval(precent)
drawlayer.addAnimation(baseanimate, forKey: nil)
// 设置label 的一些属性
if self.frame.size.height > 40 {
presentlabel.frame = CGRect(x: 0, y: self.frame.size.height/2 - CGFloat(widthLabel/2), width: CGFloat(widthLabel), height: 40)
}else{
presentlabel.frame = CGRect(x: 0, y: 0, width: CGFloat(widthLabel), height: self.frame.size.height)
}
presentlabel.font = UIFont.systemFontOfSize(CGFloat(fontSize))
presentlabel.textColor = fontColor
presentlabel.textAlignment = .Center
presentlabel.layer.cornerRadius = presentlabel.frame.size.height/2;
presentlabel.layer.masksToBounds = true
presentlabel.layer.borderColor = borderColor.CGColor
presentlabel.layer.borderWidth = 2
presentlabel.backgroundColor = titleBackColor
self.addSubview(presentlabel)
// label跟随动的动画效果
UIView.animateWithDuration(CFTimeInterval(precent), delay: 0, options: [], animations: {
self.presentlabel.center.x = CGFloat(self.widthLabel/2 + total * self.precent)
}, completion: nil)
}
// // Only override drawRect: if you perform custom drawing.
// // An empty implementation adversely affects performance during animation.
// override func drawRect(rect: CGRect) {
// // Drawing code
// }
}