Monday, December 22, 2014

Hello World! Build Your First iPhone App Using Swift

Overview

A major topic at this year's WWDC(2014) was building applications using Swift Programming Language. And then, out of the blue, Swift came along and the world will never be the same. The brand new programming language is definitely the most exciting thing announced this year and I couldn’t wait for the Xcode download to finish so I can play with it. Instead rewriting the same tutorial in Objective-C, we’ll show you how to create the  “Hello World” app in Swift. What’s more, we create a screencast for you.

When learning a new programming language you usually start from “Hello World”. Apple provided a great book for Swift and that starts precisely with “Hello World!”. You will  need to use Xcode 6 (or up) to work on the Hello World project. If you haven’t upgraded to Xcode 6.

Step 1 →  Launch Xcode. Click Create a new Xcode project and Select “single View Application”.

Step 2 → Give the Product name as “Hello World” and Choose Language “Swift”. Click the Next Button to save the project.

Screen Shot 2014-12-22 at 4.32.50 pm.png

Step 3 →  Xcode automatically creates the “Hello World” project based on all the options you provided.

Screen Shot 2014-12-22 at 4.41.46 pm.png

Xcode creates a few template files for us, AppDelegate.swift and ViewController.swift. When using Swift you don’t have headers, all the code goes in the same .swift file. We still have a storyboard file and Xcode 6 allows us to do some extra magic. Running the app now will show an empty view, so let’s start adding our own UI controls.

When opening the storyboard we will notice that the view controller created by Xcode has a different size, neither iPhone or iPad size. This is related to the extra magic that I was talking about. Let’s ignore this for now and just drag a label, a text field and a button to our view. Align them so that everything looks like this:

Screen Shot 2014-12-22 at 4.50.09 pm.png

Step 4 →  We’re going to setup these controls in our view controller so we can write more Swift code and get used to it, but in order to do that we need to create outlets. At least that’s what you would have done in Objective C.

Screen Shot 2014-12-22 at 4.56.22 pm.png

You should now have 3 outlets: helloLabel, nameTextField, sayHelloButton

   @IBOutlet var helloLabel: UILabel!
   @IBOutlet var nameTextField: UITextField!
   @IBOutlet var sayHelloButton: UIButton!

Step 5 → We have our outlets let’s start customising them. In Swift the method declaration will look like this

import UIKit

class ViewController: UIViewController {

   @IBOutlet var helloLabel: UILabel!
   @IBOutlet var nameTextField: UITextField!
   @IBOutlet var sayHelloButton: UIButton!
   
   
   override func viewDidLoad() {
       super.viewDidLoad()
       
       helloLabel.text = "Hello Swift!"
       helloLabel.textColor = UIColor.redColor()
       helloLabel.textAlignment = NSTextAlignment.Center
       
       nameTextField.placeholder = "Enter your name"
       
       sayHelloButton.setTitle("Say Hello", forState: .Normal)
       
       // 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.
   }

}

Step 6 →  Add an action for our button. In Interface Builder, bring up the Assistant editor and Ctrl + drag from the UIButton to the view controller. Change from Outlet to Action and name the method sayHelloAction:

Screen Shot 2014-12-22 at 5.12.32 pm.png

We want to change the text of the label to use the text entered in the text field entered.

   @IBAction func sayHelloAction(sender: AnyObject) {
       
       let name = nameTextField.text
       
       helloLabel.text = "Hello \(name)!"
       
   }

Step 7 → Run our app on an iPhone 5s simulator

Screen Shot 2014-12-22 at 5.37.25 pm.png

No comments:

Post a Comment