SwiftUI之Custom ProgressView

这几天一直在看WWDC20中与SwiftUI相关的视频，在观看这个视频Build a SwiftUI view in Swift Playgrounds的时候，觉得这个ProgressView挺好玩的，因此决定对其进行一波模仿。

最终效果如下图：

在暗黑模式下，如下图：

总起来说，效果还是可以的，我之所以觉得SwiftUI很有意思，就是因为它能够让我们的想法立刻变现，在SwiftUI中实现各种效果或者各个页面实在是太简单了。当然，前提是对SwiftUI必须有深入的了解才行，这一点并不像外行认为的那样，随便拖拽几个控件就是一个APP了。

代码非常简单，但我更想讲解一下如何实现这个功能的？

任务分解

我们直接忽略底部的滑条和按钮，这不是本篇文章的重点。从最高层次上，我们可以把这个MyProgressView拆分为3部分：

• 背景进度View
• 当前进度View
• 进度文本View

重点

经过任务拆分后，我们发现，当前最有难度的任务是如何把一个圆形切割掉一部分。先从简单的任务做起，我们先画一个圆形：

struct ContentView: View {
    var body: some View {
        Circle()
            .stroke(Color.orange, lineWidth: 20)
            .padding(50)
    }
}

画圆太简单了，接下来，我们需要弄出一个缺口出来，我们称之为sliceSize,这个sliceSize是可配置的，也就是说我们可以随意设置。幸运的是，系统提供了一个函数：

@inlinable public func trim(from startFraction: CGFloat = 0, to endFraction: CGFloat = 1) -> some Shape

在SwiftUI中，所有实现Shape协议的对象都可以调用这个方法，用起来也很简单,大家只需要看下图这个示例就能明白：

需要注意的是，截取图形的顺序是顺时针的，从水平方向的右边开始。那么问题来了，假设我们需要的sliceSize等于0.3,也就是：

.trim(from: 0, to: 1 - CGFloat(self.sliceSize))

运行程序后，我们需要了第一个挑战：

通过上图，我们发现，需要旋转图形，那么我们就自然想到需要计算旋转的角度，为了让大家更容易理解这些内容，我都画了示意图，在真实的开发中，这些示意图其实是大家心里计算的一个过程。

仔细分析上图，实际上是橙色到绿色的旋转，也就是向量FC到FH的旋转，这一点大家能明白吗？ 代码如下：

var rotateAngle: Angle {
    .degrees(90 + sliceSize * 360 * 0.5)
}

渐变

理解上边的旋转后，我们就只剩最后一步了，给进度条设置渐变的颜色。大家可以去我之前写的这篇文章中学习相关的知识SwiftUI之Gradient详解。

我们在这里选择了AngularGradient，也就是角度渐变：

var strokeGradient: AngularGradient {
    AngularGradient(gradient: gradient, center: /*@START_MENU_TOKEN@*/ .center/*@END_MENU_TOKEN@*/, angle: .degrees(-10))
}

核心代码

public struct MyProgressView: View {
    let gradient = Gradient(colors: [.green, .blue])
    let sliceSize = 0.45
    let progress: Double

    private let percentageFormatter: NumberFormatter = {
        let numberFormatter = NumberFormatter()
        numberFormatter.numberStyle = .percent
        return numberFormatter
    }()

    var strokeGradient: AngularGradient {
        AngularGradient(gradient: gradient, center: /*@START_MENU_TOKEN@*/ .center/*@END_MENU_TOKEN@*/, angle: .degrees(-10))
    }

    var rotateAngle: Angle {
        .degrees(90 + sliceSize * 360 * 0.5)
    }

    init(_ progress: Double = 0.3) {
        self.progress = progress
    }

    private func strokeStyle(_ proxy: GeometryProxy) -> StrokeStyle {
        StrokeStyle(lineWidth: 0.1 * min(proxy.size.width, proxy.size.height),
                    lineCap: .round)
    }

    public var body: some View {
        GeometryReader { proxy in
            ZStack {
                Group {
                    Circle()
                        .trim(from: 0, to: 1 - CGFloat(self.sliceSize))
                        .stroke(self.strokeGradient,
                                style: self.strokeStyle(proxy))
                        .padding(.all, /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)

                    Circle()
                        .trim(from: 0, to: CGFloat(self.progress * (1 - self.sliceSize)))
                        .stroke(Color.purple,
                                style: self.strokeStyle(proxy))
                        .padding(.all, /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
                }
                .rotationEffect(self.rotateAngle, anchor: /*@START_MENU_TOKEN@*/ .center/*@END_MENU_TOKEN@*/)
                .offset(x: 0, y: 0.1 * min(proxy.size.width, proxy.size.height))

                Text("\(self.percentageFormatter.string(from: NSNumber(value: self.progress))!)")
                    .font(.largeTitle)
                    .bold()
            }
        }
    }
}

总结

上边用到的图片都是用SwiftUI实现的，不得不说，SwiftUI写代码实在是太爽了，可以在这里下载代码https://gist.github.com/agelessman/789ae1b475ac02ca801fb09bd5b19b98，有任何疑问，可以留言。

求关注，求点赞，后续内容会更加精彩。