Custom TimerView in iOS – Swift

By | April 10, 2017

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)
        // Make a Circle View
        let retFrame = CGRect( - CGFloat(timerWidth), - CGFloat(timerWidth), width:CGFloat(timerWidth * 3), height:CGFloat(timerWidth * 3));
        let circleView : UIView = UIView(frame: retFrame);
        circleView.layer.cornerRadius = CGFloat(timeRadius);
        circleView.layer.borderColor =;
        circleView.layer.borderWidth = CGFloat(timerBorderWidth);
        // Make a Label
        Stored.timerLabel  = UILabel(frame: circleView.bounds)
        Stored.timerLabel.text = "\(timerVal)"
        Stored.timerLabel.textColor =
        Stored.timerLabel.textAlignment =
        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{
        }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.



import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        let timerView : TimerView = TimerView.loadingCountDownTimerInView(_superView: self.view)


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 *