TheDeveloperBlog.com

Home | Contact Us

CSharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript

<< Back to SWIFT

Swift UILabel Tutorial: iPhone App, Uses ViewController

Create a simple iOS app with a UILabel. Use a Single View Application and run code in ViewController.
UILabel. Here we write an iPhone app that executes Swift code. It uses Swift to change a Label's text and write to the screen. This is an introduction.
Get started. Please open Xcode 7. Select iOS and create a new Single View Application. With this tutorial you will have a simple Swift iPhone program.

Steps: As an overview, we create a Label and then add an Outlet to the Label in ViewController. Then we change the Label's text in Swift.

So: With the approach here, we can use Swift code to change the values of controls in an iPhone program. Many things are possible.

Name product. A dialog will appear prompting your for the name of your product. I suggest "ExampleTime" but you can choose another name.
Open Main.storyboard. This is automatically generated by Xcode for your program. A storyboard file contains interface controls (like Labels or Buttons).

Tip: We must add controls to Main.storyboard from the object library in Xcode. Continue with the next steps.

Show object library. In the bottom right part of Xcode you will see an "Object Library" button. This is an important button. It is shaped like a circle.

Then: Click the object library button. Now scroll down through the controls we can add. Stop when you see "Label."

Drag Label. Now drag the Label from the object library to the screen of the iPhone (which is part of Main.storyboard). Place it somewhere nice (I like the top center).
Assistant editor. Next we must adjust our Xcode windows so we can drag things around. In the top right there is an Assistant editor icon.

Click: Next click the Assistant editor icon (which has weird circles on it). This splits the screen—ideal for dragging things.

Important: Your window should now have the iPhone interface (with the label) on the left and the ViewController.swift file on the right.

Create outlet. Now locate the Control key on your keyboard. Press it and drag the Label to the ViewController.swift file. You will place it somewhere as a field in the class.

Note: Blue lines will appear. The text message "Create Outlet, Action, or Outlet Collection" will also appear.

Drop: Release the drag and a box will appear. Type the name of your Label—I prefer the name "simpleLabel." Click Connect.

Outlet research. Here is a quick review of our terms. An outlet is a way to reference interface objects (like Labels). They link things from the storyboard to the Swift files.

Quote: Outlets provide a way to reference interface objects—the objects you added to your storyboard—from source code files.

Connect the UI to Code: apple.com
Code before. Here is the ViewController class (found in ViewController.swift) before we added our Label to it. I removed some of the default comments.
Example ViewController.swift before: Swift // // ViewController.swift // ExampleTime // // ... // import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } }
Code after. Here are the contents of ViewController.swift after we drag the Label and place it in the class. An Outlet is created for the label. It is stored as a field on the class.

IBOutlet: This is the Field reference. Its name is simpleLabel. The keyword "weak" describes its allocation model.

UILabel: You can see the type of the Label reference is a UILabel. We must access the Label as a UILabel in Swift.

Example ViewController.swift after: Swift // // ViewController.swift // ExampleTime // // ... // import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } @IBOutlet weak var simpleLabel: UILabel! override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } }
Change Label text. The UILabel has a text property. We add a statement in viewDidLoad to assign the value of text to the string "ABC."

Result: When the app runs, the text of the Label will be set to "ABC" by our Swift code.

So: We now have a program that runs on the iPhone and executes Swift code to change its initial state.

Example ViewController.swift, with label update: Swift // // ViewController.swift // ExampleTime // // ... // import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. // ... Change label text. simpleLabel.text = "ABC" } @IBOutlet weak var simpleLabel: UILabel! override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } }
Run simulator. In Xcode the arrow button runs an iPhone simulator. You will need to wait a bit for the simulator to start up (it has a loading screen with an Apple on it).

Finally: Ensure the text "ABC" from your Label appears on the iPhone simulator. If it does, you have a functioning Swift iOS program.

With this tutorial, we go from an empty Xcode project to an iPhone program that starts. A Swift statement changes the state of the program at startup.
With some creativity, the Swift logic could be enhanced to build a program that acts on many controls. We have infinite possibilities ahead of us—and lots of hard work to do.
© TheDeveloperBlog.com
The Dev Codes