您的位置:首页 > 移动开发 > Swift

自定义滑条封装含有百分比例显示(swift版)

2016-04-12 11:15 309 查看
之前经常会用UIProgress的控件,但是有时候有的地方会要求你上面有个显示比例的地方,所以为了方便以后用到就自己封装了一个小的demo!(http://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
//    }

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: