Introduction to Storyboard and ViewControllers

What is Storyboard?

It’s the main way to lay out your UI in Xcode.

What is a UIViewController?

Think of it as the code that manages a view you create in your Storyboard. It does things like populating UI elements with data and responding to user interaction on the view.

How do they link?

If you followed the tutorial here, you should have a barebones Xcode project. You’ll notice the following files have been set up for you in the Project Navigator:

Screen Shot 2018-06-07 at 09.11.51.png

Click on Main.storyboard. You’ll see you have a UIViewController there, which has the class “ViewController” (thereby creating the link between the UI in the Storyboard and the code):

Screen Shot 2018-06-07 at 09.12.15.png

Adding and programmatically setting the text of a UILabel

Find a UILabel within the Object Library (in the bottom right) and drag it to your view:

Screen Shot 2018-06-07 at 09.19.14.png

Switch to Assistant Editor mode in the top right:

Screen Shot 2018-06-07 at 09.19.54.png

Hold ctrl and click/drag from your label to the top of your code, within the class declaration. Give your Outlet connection a name and click “Connect”:

Screen Shot 2018-06-07 at 09.21.49.png

Screen Shot 2018-06-07 at 09.20.50.png

Amend your viewDidLoad function to the following:

override func viewDidLoad() {
    super.viewDidLoad()
    myLabel.text = "Hello"
}

Run the app, and you will see that your label’s text has been updated:

Screen Shot 2018-06-07 at 09.26.56.png

 

2 thoughts on “Introduction to Storyboard and ViewControllers

Comments are closed.