Custom TimerView in iOS – Swift

By | March 16, 2017
1 Comment

Hello everyone,

Here in this tutorial I will show you how you can create a Custom View for Timer without any layout in Swift.

Custom Timer Class

Our Custom timer class will look like this

var timerBorderWidth : Int = 2;
var timerWidth : Float = 30;
var timeRadius : Float = 40;
var timerVal : Int = 10;
var timer : Timer!;
 
import UIKit
 
class TimerView : UIView{
     
    struct Stored{
        // Inorder to access globally in this class
        static var timerLabel : UILabel!
    }
     
    class func loadingCountDownTimerInView (_superView : UIView) -> TimerView{
         
        let timerView : TimerView = TimerView(frame: _superView.frame)
        timerView.backgroundColor = UIColor.white.withAlphaComponent(1.0)
        _superView.addSubview(timerView)
         
        // Make a Circle View
        let retFrame = CGRect(x:_superView.center.x - CGFloat(timerWidth), y:_superView.center.y - CGFloat(timerWidth), width:CGFloat(timerWidth * 3), height:CGFloat(timerWidth * 3));
        let circleView : UIView = UIView(frame: retFrame);
        circleView.layer.cornerRadius = CGFloat(timeRadius);
        circleView.layer.borderColor = UIColor.blue.cgColor;
        circleView.layer.borderWidth = CGFloat(timerBorderWidth);
         
        // Make a Label
        Stored.timerLabel  = UILabel(frame: circleView.bounds)
        Stored.timerLabel.text = "\(timerVal)"
        Stored.timerLabel.textColor = UIColor.black
        Stored.timerLabel.textAlignment = NSTextAlignment.center
         
        circleView.addSubview(Stored.timerLabel)
        timerView.addSubview(circleView)
         
        return timerView
         
    }
     
    func startTimer(){
         
        timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(updateTimer(dt:)), userInfo: nil, repeats: true)
         
    }
     
    func updateTimer(dt:Timer){
        timerVal = timerVal - 1
        if timerVal == 0{
            Stored.timerLabel.text = "Done"
        }else if timerVal < 0{
            timer.invalidate()
            //super.removeFromSuperview()
        }else {
            Stored.timerLabel.text = "\(timerVal)"
        }
    }
}

Here I am passing the superview in which timerview is going to be placed as the parameter.
Then I am creating a circle view for showing the timer borders.
Now I will add a label to show the timer ticking.
Then I will add the label and the circle view to the timerview and then return the timerView.
After that I will start the timer with the startTimer method.

timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(updateTimer(dt:)), userInfo: nil, repeats: true)

On Each tick it will call the “updateTimer” method which accepts the timer and updates the UI accordingly.

Usage

ViewController

import UIKit
 
class ViewController: UIViewController {
 
    override func viewDidLoad() {
        super.viewDidLoad()
        let timerView : TimerView = TimerView.loadingCountDownTimerInView(_superView: self.view)
        timerView.startTimer()
    }
 
}

You can simply copy paste this code and it will work.

One thought on “Custom TimerView in iOS – Swift”

Leave a Reply

Your email address will not be published. Required fields are marked *