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 Comment

  1. Hari April 18, 2017 at 11:45 am

    Cool Demo on Timer View.
    Thanks

     

Leave a Reply

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

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.