[Swift通天遁地]1、超級工具-(2)製做美觀大方的環形進度條

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號：山青詠芝（shanqingyongzhi）
➤博客園地址：山青詠芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：http://www.javashuo.com/article/p-agnxxwkr-dp.html 
➤若是連接不是山青詠芝的博客園地址，則多是爬取做者的文章。
➤原文已修改更新！強烈建議點擊原文地址閱讀！支持做者！支持原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目錄：[Swift]通天遁地Swift

本文將演示製做美觀大方的環形進度條。

首先確保在項目中已經安裝了所需的第三方庫。

點擊【Podfile】,查看安裝配置文件。

1 platform :ios, ‘12.0’
2 use_frameworks!
3 
4 target ‘DemoApp' do
5     source 'https://github.com/CocoaPods/Specs.git'
6     pod 'UICircularProgressRing'
7 end

根據配置文件中的相關配置，安裝第三方庫

而後點擊打開【DemoApp.xcworkspace】項目文件。

在項目導航區，打開視圖控制器的代碼文件【ViewController.swift】

如今編寫代碼，製做美觀大方的環形進度條。

 1 import UIKit
 2 //在當前的類文件中，引入第三方類庫
 3 import UICircularProgressRing
 4 
 5 class ViewController: UIViewController {
 6 
 7     //給當前的類，添加一個環形進度條類型的屬性
 8     var progressRing:UICircularProgressRingView!
 9     override func viewDidLoad() {
10         super.viewDidLoad()
11         // Do any additional setup after loading the view, typically from a nib.
12         
13         //建立一個指定的矩形區域，
14         let rect = CGRect(x: 20, y: 40, width: 280, height: 280)
15         //並初始化一個位於該矩形區域的環形進度條。
16         progressRing = UICircularProgressRingView(frame: rect)
17         
18         //設置環形進度條的背景顏色爲無色
19         progressRing.backgroundColor = UIColor.clear
20         //設置環形進度條的視圖樣式，環形進度條共有四種視覺樣式。
21         //分別用1~4之間的四個數字表示。
22         //當前的樣式時內圈比較小，外圈則比較大。
23         progressRing.viewStyle = 1
24         //設置環形進度條的最大值爲100
25         progressRing.maxValue = 100
26         //設置環形進度條的字體顏色爲淺灰色
27         progressRing.fontColor = UIColor.lightGray
28         //設置環形進度條的進度文字的大小爲90
29         progressRing.fontSize = 90
30         //設置內圈端點的樣式，端點樣式共有默認、圓形、方形等三種樣式。
31         //使用1~3之間的三個數字表示
32         progressRing.innerRingCapStyle = 1
33         //設置內圈的寬度爲20
34         progressRing.innerRingWidth = 20
35         //設置內圈與外圈之間的距離爲10
36         progressRing.innerRingSpacing = 10
37         //設置內圈的線條顏色爲橙色
38         progressRing.innerRingColor = UIColor.orange
39         //設置外圈的線條顏色爲紫色
40         progressRing.outerRingColor = UIColor.purple
41         //設置外圈的寬度一樣爲20
42         progressRing.outerRingWidth = 20
43         //設置環形進度條的動畫樣式，
44         //動畫樣式共有：線性、漸入、漸出、漸入漸出等四種。
45         //此處設置爲線性動畫的樣式。
46         progressRing.animationStyle = kCAMediaTimingFunctionLinear
47         
48         //設置按鈕的顯示區域
49         let bt2 = UIButton(type: UIButtonType.roundedRect)
50         bt2.frame = CGRect(x: 20, y: 380, width: 280, height: 40)
51         //設置按鈕的背景顏色
52         bt2.backgroundColor = UIColor.brown
53         //設置按鈕的字體顏色
54         bt2.tintColor = UIColor.white
55         //設置按鈕的在正常狀態下的標題文字
56         bt2.setTitle("Start", for: UIControlState())
57         //給按鈕綁定點擊事件
58         bt2.addTarget(self, action: #selector(ViewController.buttonTap(_:)), for: UIControlEvents.touchUpInside)
59         
60         //將按鈕和環形進度條對象，
61         //依次添加到當前視圖控制器的根視圖。
62         self.view.addSubview(bt2)
63         self.view.addSubview(progressRing)
64         //設置根視圖的背景顏色爲棕色
65         self.view.backgroundColor = .brown
66     }
67     
68     //添加一個方法，用來響應按鈕的點擊事件
69     func buttonTap(_ button:UIButton)
70     {
71         //當按鈕被點擊時，調用環形進度條的設置進度方法，
72         //將環形進度條的進度，以動畫的方式，
73         //在5秒鐘的時間裏，前進到100的位置
74         progressRing.setProgress(value: 100, animationDuration: 3.2)
75         {
76             //當環形進度條到達指定數值時，
77             //在控制檯輸出一條指示信息
78             print("Done animating!")
79         }
80     }
81 
82     override func didReceiveMemoryWarning() {
83         super.didReceiveMemoryWarning()
84         // Dispose of any resources that can be recreated.
85     }
86 }