[Swift通天遁地]一、超级工具-(2)制作美观大方的环形进度条
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝(shanqingyongzhi)
➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:https://www.cnblogs.com/strengthen/p/10129514.html
➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章。
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文将演示制作美观大方的环形进度条。
首先确保在项目中已经安装了所需的第三方库。
点击【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 }