系統自帶的UIStepper沒有顯示當前value值得控件，需要自行添加label來顯示。而此控件自帶一個label來顯示當前值。而且，與系統UIStepper的屬性一樣都可以設置的。
控件類型分為普通類型，以及外層帶有圓圈的。在這里，左邊的減號，右邊的加號，以及當類型為circle時的圓圈是通過CAShapeLayer和UIBezierPath畫出來的，非UIButton控件。
/**
控件類型
- custome: 默認
- circle: 外層帶圓圈
*/
enum StepType {
case custom
case circle
}
控件的初始化方法，可選擇閉包處理點擊事件，或者選擇代理
/**
初始化方法
- parameter frame: 控件frame--若想circle類型時，成圓形，最好寬高比為10:3
- parameter type: 控件類型
- action: 點擊閉包，可選代理或者閉包，二選1
- returns: 此控件
*/
init(frame: CGRect, type: StepType, action: TypeClouse?) {
self.stepType = type
self.action = action
super.init(frame: frame)
defaultAppearance()
}
控件有個屬性，是設置控件外觀的。里面有個屬性觀察器didSet方法---當設置外觀的時候調用draw()方法~~~
此方法，先reset UI--即清除UI上所有的控件以及layer，然后在重新布置界面---如果不設置的話，會使用默認設置
var appearance: Appearance! {
didSet {
self.draw()
}
}
private func reset() {
//清除控件
for sub in subviews {
sub.removeFromSuperview()
}
//清除layer
if let layers = layer.sublayers {
for lay in layers {
lay.removeFromSuperlayer()
}
}
}
private func draw() {
reset()
let centerY = frame.size.height * 0.5
let width = frame.size.width
let linePath = UIBezierPath()
defer {
linePath.closePath()
}
//(- : label : +) = (3:4:3)
// 畫減號
//(空白:-:空白) = (3:4:3)
//線條寬度/高度
let lineHeight = frame.size.height / 3
// 減號起始點
let startX1 = width * 0.3 * 0.3
linePath.moveToPoint(CGPoint(x: startX1, y: centerY))
linePath.addLineToPoint(CGPoint(x: startX1 + lineHeight, y: centerY))
// 畫加號
//(空白:+:空白) = (3:4:3)
//橫線
// 加號起始點
let startX2 = width - width * 0.3 * 0.3 - lineHeight
linePath.moveToPoint(CGPoint(x: startX2, y: centerY))
linePath.addLineToPoint(CGPoint(x: startX2 + lineHeight, y: centerY))
//豎線
linePath.moveToPoint(CGPoint(x: startX2 + lineHeight * 0.5, y: centerY - lineHeight * 0.5))
linePath.addLineToPoint(CGPoint(x: startX2 + lineHeight * 0.5, y: centerY + lineHeight * 0.5))
let lineLayer = CAShapeLayer()
lineLayer.path = linePath.CGPath
lineLayer.strokeColor = appearance.actionColor.CGColor
lineLayer.lineWidth = 1
self.layer.addSublayer(lineLayer)
let (leftFrame, remainFrame) = bounds.divide(bounds.size.width * 0.3, fromEdge: .MinXEdge)
let (middleFrame, rightFrame) = remainFrame.divide(remainFrame.size.width * 4 / 7, fromEdge: .MinXEdge)
label.frame = middleFrame
addSubview(label)
label.textAlignment = .Center
label.textColor = appearance.textColor
label.font = appearance.textFont
label.adjustsFontSizeToFitWidth = true
//添加action
let reduceC = UIControl(frame: leftFrame)
reduceC.addTarget(self, action: #selector(reduce), forControlEvents: .TouchUpInside)
addSubview(reduceC)
let addC = UIControl(frame: rightFrame)
addC.addTarget(self, action: #selector(add), forControlEvents: .TouchUpInside)
addSubview(addC)
switch stepType {
case .circle:
let scale: CGFloat = 0.7
let reduceFrame = CGRect(x: leftFrame.size.width * 0.5 * (1 - scale), y: centerY - leftFrame.size.height * scale * 0.5, width: leftFrame.size.width * scale, height: leftFrame.size.height * scale)
let reducePath = UIBezierPath(ovalInRect: reduceFrame)
let reduceLayer = CAShapeLayer()
reduceLayer.path = reducePath.CGPath
reduceLayer.fillColor = appearance.fillColor.CGColor
reduceLayer.strokeColor = appearance.strokeColor.CGColor
reduceLayer.lineWidth = 1
layer.addSublayer(reduceLayer)
let addFrame = CGRect(x: startX2 + lineHeight * 0.5 - rightFrame.size.width * scale * 0.5, y: centerY - rightFrame.size.height * scale * 0.5, width: rightFrame.size.width * scale, height: rightFrame.size.height * scale)
let addPath = UIBezierPath(ovalInRect: addFrame)
let addLayer = CAShapeLayer()
addLayer.path = addPath.CGPath
addLayer.fillColor = appearance.fillColor.CGColor
addLayer.strokeColor = appearance.strokeColor.CGColor
addLayer.lineWidth = 1
layer.addSublayer(addLayer)
case .custom:
return
}
}
外界調用代碼：
stepV = ZGJStepView(frame: CGRect(x: 50, y: 400, width: 300, height: 90), type: .custom, action: nil)
stepV.backgroundColor = UIColor.lightGrayColor()
stepV.minimumValue = 2
stepV.maximumValue = 10
stepV.stepValue = 1
stepV.delegate = self
stepV.appearance = Appearance(
actionColor: UIColor.redColor(),
strokeColor: UIColor.redColor(),
fillColor: UIColor.clearColor(),
textColor: UIColor.blackColor(),
textFont: UIFont.systemFontOfSize(15))
view.addSubview(stepV)
下面是控件一些可設置的屬性，與系統UIStepper的屬性非常相識，可以無痛轉接
/// 最小值 默認0
var minimumValue: Double = 0 {
didSet {
self.value = minimumValue
if minimumValue % 1.0 == 0.0 {
label.text = "\(Int(minimumValue))"
} else {
label.text = "\(minimumValue)"
}
}
}
/// 最大值默認 100
var maximumValue: Double = 100
/// 每一次點擊增減值 默認1
var stepValue: Double = 1
/// 當前值---默認0
var value: Double = 0 {
didSet {
if stepValue % 1.0 == 0.0 && minimumValue % 1.0 == 0.0 {
label.text = "\(Int(value))"
} else {
label.text = "\(value)"
}
}
}
然后是可以設置控件的外觀
/**
* 控件的基本設置
*/
struct Appearance {
/// ?/?的顏色
var actionColor: UIColor
/// circle類型時，外圍圓圈顏色
var strokeColor: UIColor
var fillColor: UIColor
/// 字體顏色
var textColor: UIColor
/// 字體
var textFont: UIFont
}
