Swift 圓環進度條

Swift 圓環進度條

import UICircularProgressRing

 

import UIKit
import UICircularProgressRing
class ViewController: UIViewController {

    
    var progress:UICircularProgressRing!;
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        self.progress = UICircularProgressRing(frame: CGRect(x: 50, y: 200, width: 200, height: 200));
        self.progress.backgroundColor = UIColor.white;
        
        self.progress.style = .ontop;
        // 最大值
        self.progress.maxValue = 100;
        // 進度值的顯示顏色
        self.progress.fontColor = UIColor.gray;
        
        // 內環圓頭  square  round  butt
        
        self.progress.innerCapStyle = .round;
        // 內環寬度
        self.progress.innerRingWidth = 5;
        
        self.progress.innerRingSpacing = 0;
        // 進度條顏色
        self.progress.innerRingColor = UIColor.red;
        // 外環
        self.progress.outerRingWidth = 5;
        self.progress.outerRingColor = UIColor.gray;

//
        
        // 動畫效果 linear 線性  easeIn 漸入  easeOut 漸出  easeInEaseOut  漸入漸出
        self.progress.animationTimingFunction = CAMediaTimingFunctionName(rawValue: CAMediaTimingFunctionName.easeIn.rawValue);
        

        self.view.addSubview(self.progress);
        let btn = UIButton.init();
        btn.frame = CGRect(x: 50, y: 450, width: 120, height: 50);
        btn.setTitle("Start", for: UIControl.State.normal);
        btn.setTitleColor(UIColor.black, for: UIControl.State.normal);
        btn.backgroundColor = UIColor.cyan;
        btn.titleLabel?.font = UIFont.systemFont(ofSize: 15);
        btn.addTarget(self, action: #selector(btnClick), for: UIControl.Event.touchUpInside);
        self.view.addSubview(btn)
        
 
    }
    
    
    
    @objc func btnClick(btn:UIButton){
        
        btn.isSelected = !btn.isSelected;
        
        if btn.isSelected {
            // 4 秒時間 進度條到達100
            self.progress.startProgress(to: 100, duration: 2){
                
                
            }
        }else{
            self.progress.resetProgress();
        }

    
    }


}


在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章