这几天一直在看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，有任何疑问，可以留言。
求关注，求点赞，后续内容会更加精彩。
网友评论