SwiftUI之Custom ProgressView

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

企业微信截图_d37dffad-75d9-4d48-87c7-1f36ba1a6976.png

最终效果如下图:

Kapture 2020-07-04 at 14.35.03.gif

在暗黑模式下,如下图:

Simulator Screen Shot - iPhone 11 Pro Max - 2020-07-04 at 14.36.04.png

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

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

任务分解

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

  • 背景进度View
  • 当前进度View
  • 进度文本View
Simulator Screen Shot - iPhone 11 Pro Max - 2020-07-04 at 14.49.30.png

重点

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

struct ContentView: View {
    var body: some View {
        Circle()
            .stroke(Color.orange, lineWidth: 20)
            .padding(50)
    }
}
Simulator Screen Shot - iPhone 11 Pro Max - 2020-07-04 at 14.55.44.png

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

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

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

Simulator Screen Shot - iPhone 11 Pro Max - 2020-07-04 at 15.04.10.png

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

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

运行程序后,我们需要了第一个挑战:

Simulator Screen Shot - iPhone 11 Pro Max - 2020-07-04 at 15.11.49.png

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

企业微信截图_2d84f06d-62bb-495c-ae89-95b06e118c1e.png

仔细分析上图,实际上是橙色到绿色的旋转,也就是向量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,有任何疑问,可以留言。

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