如何在iOS Swift中创建多进度图表？求推荐库及实现思路

一、第三方库推荐 #

如果不想手动实现，可以直接用成熟的第三方库快速搭建：

• Charts：iOS开发中最常用的图表库之一，支持环形进度图（PieChartView开启环形模式），可自定义进度颜色、边框宽度、中心文本、刻度样式等，支持CocoaPods和Swift Package Manager引入。
• PNChart：轻量级iOS图表库，环形进度条定制性强，能轻松设置进度值、颜色、动画效果。
• CircleProgressView：专注于环形进度的小库，体积小、API简洁，适合仅需环形进度展示的场景，支持刻度、渐变颜色等需求。

二、手动实现思路 #

如果需要高度定制，也可以用原生框架手动实现，分UIKit和SwiftUI两种场景：

1. SwiftUI 实现

利用SwiftUI的视图组合和修饰符，快速构建带刻度的环形进度：

struct CircularProgressView: View {
    // 进度值（0~1之间）
    var progress: Double
    
    var body: some View {
        ZStack {
            // 背景环形
            Circle()
                .stroke(Color.gray.opacity(0.3), lineWidth: 12)
            
            // 进度环形（从顶部开始）
            Circle()
                .trim(from: 0, to: progress)
                .stroke(Color.blue, style: StrokeStyle(lineWidth: 12, lineCap: .round))
                .rotationEffect(.degrees(-90))
            
            // 中心进度文本
            Text(String(format: "%.0f%%", progress * 100))
                .font(.title)
                .fontWeight(.bold)
            
            // 环形刻度
            ForEach(0..<20) { index in
                Rectangle()
                    .frame(width: 2, height: index % 5 == 0 ? 10 : 6)
                    .foregroundColor(index % 5 == 0 ? .gray : .gray.opacity(0.5))
                    .offset(y: -100)
                    .rotationEffect(.degrees(Double(index) * 18))
            }
        }
        .frame(width: 200, height: 200)
    }
}

2. UIKit 实现

通过自定义UIView，重写draw(_:)方法用Core Graphics绘制：

class CustomCircularProgressView: UIView {
    // 进度值（0~1之间）
    var progress: CGFloat = 0.0 {
        didSet { setNeedsDisplay() }
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = min(bounds.width, bounds.height) / 2 - 10
        let lineWidth: CGFloat = 12
        
        // 绘制背景环
        let backgroundPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
        UIColor.gray.withAlphaComponent(0.3).setStroke()
        backgroundPath.lineWidth = lineWidth
        backgroundPath.stroke()
        
        // 绘制进度环（从顶部开始）
        let progressAngle = 2 * .pi * progress
        let progressPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: -.pi/2, endAngle: -.pi/2 + progressAngle, clockwise: true)
        UIColor.blue.setStroke()
        progressPath.lineWidth = lineWidth
        progressPath.lineCapStyle = .round
        progressPath.stroke()
        
        // 添加中心进度文本
        let label = UILabel(frame: CGRect(x: center.x - 50, y: center.y - 20, width: 100, height: 40))
        label.text = String(format: "%.0f%%", progress * 100)
        label.font = UIFont.boldSystemFont(ofSize: 20)
        label.textAlignment = .center
        addSubview(label)
    }
}

内容的提问来源于stack exchange，提问作者Hiệp Chelsea