UIButton on storyboard

iOS Tutorials: Current Date Time Output

What is a UIButton?

A UIButton is kind of control provided by Apple so that user can perform some interaction and on the basis of that we can execute our custom code.

In our previous article we added a simple UILabel, we will now continue on the same and change the text of the UILabel on the click of a button.

If you want to see how we created the UILabel using storyboards please visit our article here.

As you can see in the below image, under Class inspector the the class name specified for the current ViewController is named as “ViewController“, and we have a file named as ViewController.swift, in the project as well.

iOS Tutorials: Storyboard class inspector
Storyboard class inspector

So this ViewController in the Storyboard and the ViewController.swift file are actually connected, we will now try changing the text dynamically on the click of a button.

You can learn more about the ViewController files from one of our articles here.

  • So now we will add a button on the Storyboard, and on the click of the button we will display the current time on the Label.
iOS Tutorials: Storyboard add UIButton
Storyboard add UIButton
  • Set the origin and frame for UIButton
iOS Tutorials: Storyboard set origin and frame of UIButton
Storyboard set origin and frame of Button
  • Now we will create IBOutlets for UILabel & UIButton and an action method for the UIButton.
  • Switch to “Assistant Editor mode”
iOS Tutorials: Assistant Editor Mode
Assistant Editor Mode
  • Click on the UILabel and create an IBOutlet, perform the same for UIButton as well
    • Name the IBOutlet for UILabel as lblDate
    • Name the IBOutlet for UIButton as btnSetDate.
iOS Tutorials: Create IBOutlet
Create IBOutlet

 

iOS Tutorials: Naming UILabel IBOutlet
Naming UILabel IBOutlet

 

iOS Tutorials: Naming UIButton IBOutlet
Naming Button IBOutlet
  • Create Action method for UIButton.
    • Name the method as setDateClicked.

 

iOS Tutorials: IBAction for UIButton
IBAction for Button

 

iOS Tutorials: IBAction for UIButton
IBAction for UIButton

 

iOS Tutorials: Naming IBAction for UIButton
Naming IBAction for Button

Please close the “Assistant Editor mode”

Now, we will write some code, please add the 2 methods below in the ViewController.swift file.

func getCurrentDate() {

let date = Date()

        let formatter = DateFormatter()

        

        formatter.dateFormat = “dd/MMM/yyyy HH:mm:ss”

      let result = formatter.string(from: date)

 

        lblDate.text = result

        lblDate.backgroundColor = getRandomColor()

            }

func getRandomColor() -> UIColor{

        //Generate between 0 to 1

        let red:CGFloat = CGFloat(drand48())

        let green:CGFloat = CGFloat(drand48())

        let blue:CGFloat = CGFloat(drand48())

        

        return UIColor(red:red, green: green, blue: blue, alpha: 1.0)

    }

  • getCurrentDate method will give the current Date, we will use this date to set as text for UILabel.
  • getRandomColor method will give a random color, we will use that color to set it as background of UILabel.

But how will this functions perform there duties?

For that we need to call the method getCurrentDate, when-ever a use clicks on the Button, make sure your IBActionMethod now looks like this.

@IBAction func setDateClicked(_ sender: Any) {

        getCurrentDate()

    }

 

Now, run the project (Command + R) and click on the Button at the bottom; you will see the reflection on the UILabel.

iOS Tutorials: Current Date Time Output
Current Date Time Output

Hope you liked the article; Please download the whole project from the link

Author: Chandra.rao

iOS Developer. #Life of an developer.... Learn New technology, Code, Learn New Technology, Code, Death.