UIButton on storyboard

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

Part-2: Understanding Storyboard

What is Storyboard?

Storyboard is kind of file which you see in each and every application you create, in this article we will have a brief discussion on what is a storyboard and what all things we can achieve using the same.

It’s is a kind of scratch pad provided where we can design all the views as per our requirements on an iOS Application, we generally call it as a file where UI of the iOS application is developed.

So now we will create a simple application or you can download our starter Application from the link.

If you want to see how we created the First iPhone Application, please visit this article.

If you run the Project, this is how it will look.

iOS Tutorials: Hello World.
iOS Tutorials: Hello World.

So, is this “Hello World” appearing, can we change the text dynamically, can we change font color, can we add some images?

Most your questions will be answered in this article.

  • The first thing what we will do is navigate to the main.storyboard file in the Application.
    • Delete the Label at the centre, we will make it from scratch.
iOS Tutorials: Main.stoaryboard
Navigate to Main.storyboard File

So, very basic requirement; how to show some text on a UI. Simple answer using a Label, in terms of iOS we call it as an UILabel.

What we will now do is, add a UILabel and try changing the text dynamically.

  • To add a UILabel, from the objects section in the utility panel search for UILabel
iOS Tutorials: Storyboard add UILabel
Storyboard add UILabel
  • Set the origin and frame for the UILabel from the size inspector.
iOS Tutorials: Storyboard set UILabel frame and bounds
Storyboard set UILabel frame and bounds
  • Change the text as well as the Text Alignment.
iOS Tutorials: Storyboard UILabel set text and Alignment
Storyboard UILabel set text and Alignment

Now run the project and see the results.

iOS Tutorials: Output Hello World
Output Hello World

Please visit our next article here, to see how to add buttons to a UI and change label text dynamically.