ios - 带有步骤进度的自定义进度视图
问题描述
我正在尝试创建以下进度视图。
我编写了以下代码来制作此视图,
class SeggyProgressView: UIView {
//--------------------------------------------------
// MARK:- Variables
//--------------------------------------------------
var arrPointsRange = [0, 500, 1000, 1500, 2000, 2500, 3000]
var currenPoint = 1586
//--------------------------------------------------
// MARK:- Init Methods
//--------------------------------------------------
init() {
super.init(frame: .zero)
self.setupView()
}
//--------------------------------------------------
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.setupView()
}
//--------------------------------------------------
override init(frame: CGRect) {
super.init(frame: frame)
self.setupView()
}
//--------------------------------------------------
// MARK:- Custom Methods
//--------------------------------------------------
func setupView() {
let path = UIBezierPath()
// Add first point to x=10 and y=1/4 of view
let x: CGFloat = 50
var lineYPoint = self.bounds.height / 4
// Add starting point
path.move(to: CGPoint(x: x, y: lineYPoint))
// Calculate line width
let lineWidth = (self.bounds.width - (x * 2) - CGFloat(10 * (self.arrPointsRange.count - 2))) / CGFloat(self.arrPointsRange.count - 2)
// Keep it to store x value of
var lineXPoint = lineWidth
// Enumerated on point range to draw above lines and haf circle
for (index, _) in arrPointsRange.enumerated() {
if index < (self.arrPointsRange.count - 2) {
lineXPoint += lineWidth
path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))
let arcCenterX = lineXPoint + 10
path.addArc(withCenter: CGPoint(x: arcCenterX, y: lineYPoint), radius: 8, startAngle: CGFloat(180.0).toRadians(), endAngle: CGFloat(0.0).toRadians(), clockwise: true)
}
}
lineXPoint += lineWidth
// Draw line line for above
path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))
var arcCenterX = lineXPoint + 10
// draw full circle
path.addArc(withCenter: CGPoint(x: arcCenterX, y: lineYPoint), radius: 10, startAngle: CGFloat(210.0).toRadians(), endAngle: CGFloat(150.0).toRadians(), clockwise: true)
lineYPoint += 10
// Enumerate to draw below line and half circle
for (index, _) in arrPointsRange.enumerated() {
if index < (self.arrPointsRange.count - 2) {
lineXPoint -= lineWidth
path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))
let arcCenterX = lineXPoint - 10
path.addArc(withCenter: CGPoint(x: arcCenterX, y: lineYPoint), radius: 8, startAngle: CGFloat(0.0).toRadians(), endAngle: CGFloat(180.0).toRadians(), clockwise: true)
}
}
lineXPoint -= lineWidth
// Draw first below line
path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))
arcCenterX = lineXPoint - 10
let y = lineYPoint - 5
// Draw first full circle
path.addArc(withCenter: CGPoint(x: arcCenterX, y: y), radius: 10, startAngle: CGFloat(30).toRadians(), endAngle: CGFloat(300).toRadians(), clockwise: true)
path.close()
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = UIColor.darkGray.cgColor
shapeLayer.lineWidth = 3
shapeLayer.fillColor = UIColor.orange.cgColor
self.layer.addSublayer(shapeLayer)
}
}
extension CGFloat {
func toRadians() -> CGFloat {
return self * CGFloat(Double.pi) / 180.0
}
}
但我不能完全按照上面的方式制作,我有以下输出。
有人知道怎么修这个东西吗 ?
解决方案
推荐阅读
- c# - 两个不同的类是否有可能具有一个属性——一个类的集合,并且每个对象都知道它属于前两个类中的哪一个?
- google-sheets - 是否可以将多张工作表中的 Google 表格列堆叠到一份报告中?
- python-3.x - 父类值的继承
- python - 与 Numpy 相比优化 Cython 循环
- javascript - React-localstorage not available in another component unless i refresh page
- typescript - 禁止显式类型参数或约束联合类型参数以提高类型安全性
- firebase - 显示 Firebase 用户喜欢
- spring - spring boot如何在html文件中添加css、js等静态文件?
- string - 如何使用正则表达式和 powershell 删除特定行?
- r - 将 GGPlot 作为图形而不是可编辑图像导出到 Powerpoint