最近项目用到了 一个经验条 要求颜色渐变 中间是用户头像 还要接受事件 然后自己写了个下面这个控件
//
// XProgressView.swift
// XProgressView
//
// Created by eduo_xiaoP on 15/4/11.
// Copyright (c) 2015年 eduo. All rights reserved.
//
import Foundation
import UIKit
@objc protocol XCirleProgressViewDelegate: NSObjectProtocol {
optional func progressTapped(progressView: XCirleProgressView!)
}
@IBDesignable class XCirleProgressView: UIView {
struct Constant {
static let lineWidth: CGFloat = 10
static let trackColor = UIColor(red: 245/255.0, green: 245/255.0, blue: 245/255.0, alpha: 1)
static let endColor = UIColor.redColor().colorWithAlphaComponent(0.8)
static let startColor = UIColor.greenColor().colorWithAlphaComponent(0.2)
}
let gradientLayer = CAGradientLayer()
let trackLayer = CAShapeLayer()
let progressLayer = CAShapeLayer()
let path = UIBezierPath()
@IBInspectable var progress: Int = 0
@IBInspectable var image: UIImage? {
didSet{
setNeedsDisplay()
}
}
weak var delegate: XCirleProgressViewDelegate?
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
initialization()
}
override init(frame: CGRect) {
super.init(frame: frame)
initialization()
}
override func layoutSubviews() {
path.moveToPoint(CGPointMake(CGRectGetMidX(bounds) + Constant.lineWidth/2.0, Constant.lineWidth))
path
path.addArcWithCenter(CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds)), radius: bounds.size.width/2 - Constant.lineWidth, startAngle: angleToRadian(-90), endAngle: angleToRadian(270), clockwise: true)
trackLayer.frame = bounds
trackLayer.path = path.CGPath
progressLayer.frame = bounds
progressLayer.path = path.CGPath
gradientLayer.frame = bounds
}
func initialization() {
trackLayer.fillColor = UIColor.clearColor().CGColor
trackLayer.strokeColor = Constant.trackColor.CGColor
trackLayer.lineWidth = Constant.lineWidth
trackLayer.lineCap = kCALineCapRound
layer.addSublayer(trackLayer)
progressLayer.fillColor = UIColor.clearColor().CGColor
progressLayer.strokeColor = UIColor.orangeColor().CGColor
progressLayer.lineWidth = Constant.lineWidth
progressLayer.lineCap = kCALineCapSquare
progressLayer.strokeEnd = 0
gradientLayer.colors = [Constant.startColor.CGColor, Constant.endColor.CGColor]
layer.addSublayer(gradientLayer)
}
override func drawRect(rect: CGRect) {
progressLayer.strokeEnd = CGFloat(progress)/200.0//好像是由于layoutsubviews调用2此导致的画出来长度是2倍 待解决
gradientLayer.mask = progressLayer
path.addClip()
image?.drawInRect(bounds)
}
func setProgress(pro: Int,animated anim: Bool) {
setProgress(pro, animated: anim, withDuration: 0.55)
}
func setProgress(pro: Int,animated anim: Bool, withDuration duration: Double) {
progress = pro
CATransaction.begin()
CATransaction.setDisableActions(!anim)
CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut))
CATransaction.setAnimationDuration(duration)
progressLayer.strokeEnd = CGFloat(progress)/200.0//好像是由于layoutsubviews调用2此导致的画出来长度是2倍 待解决
CATransaction.commit()
}
private func angleToRadian(angle: Double)->CGFloat {
return CGFloat(angle/Double(180.0) * M_PI)
}
override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
if let dele = delegate where dele.respondsToSelector("progressTapped:") {
dele.progressTapped!(self)
}
}
}