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

之前经常会用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
//    }


}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值