Part-2: Understanding Storyboard

iOS Tutorials: main.storyboard file

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.

Author: Chandra.rao

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