iOS Swift Hello World Example

Swift is a newly designed programming language for iOS developer, it is more clear and easy to understood than Objective-C. This article will show you the swift hello world example coding with iOS device. It will also show you how to install Xcode ( iOS IDE ), how to create, debug and run iOS project in iOS device simulator.

1. Xcode Installation.

Xcode is the default iOS, Mac OS develop tool suite. It is provided by apple. It is very easy and flexible to use. If you are new to iOS development, you may find it is something different to use, but when you use it some time, you can find it is very easy to use.

Before use it, you should first install it in your Mac machine. Just open the app store and search Xcode in the search box, then get and install below app, this is not difficult. You may need to use an apple account during the installation process.

get and install xcode tool in app store

2. Start Xcode And Create Swift Project.

After install, you can find the Xcode icon in the Launchpad or in the Finder Applications directory.

macos launchpad

Double click the icon to start it, you can see the Xcode project template wizard as below. Just click the second item “Create a new Xcode project”  to create a Xcode project.

create xcode project template wizard

In the next popup dialog, select iOS in the top menu bar, and just select Single View App template, click Next button.
xcode ios single view app template

Input Product Name with HelloWorldSwift, Organization Name with dev2qa.com and Organization Identifier with com.dev2qa. The most important is to select Swift in the Language drop down list. Click Next button.
ios swift app project information

Then you can see below Xcode project navigator panel in left. Click the first icon in left panel top icon bar, there will list project folder with some source files. There are two files we need to edit later to write this example, ViewController.swift and Main.storyboard.

swift project navigator list panel

  1. ViewController.swift : Swift save all source code in this file, it is different from Objective-C which need a .h ( header ) file and .m ( implementation) file. In this example we will define a function in this file and the function will be invoked when a button is clicked.
  2. Main.storyboard : You design the iOS app’s UI in this file. You can place UI components such as button, text, label etc in it. And then associate the UI component with the source code in ViewController.swift file.

3. Design User Interface.

Now the swift project has been setup, we will design the UI for this example app. The UI is so simple, it contains only one button at the screen center.

  1. Double click the Main.storyboard file in left project navigator.
  2. Click the View tree item under View Controller in center panel, the right panel is just empty.
    swift ui design in main storyboard file
  3. Click Xcode menu View —> Libraries —> Show Library at the top menu bar.
    xcode view libraries show library menu item
  4. This will popup Xcode ui components library panel as below. Just input Button in the search box, it will list all button related ui components.
    xcode ui component library
  5. Drag the button and drop it to the center of the View in Main.storyboard file.
  6. If you want to delete the button, just click delete key in the machine keyboard.
  7. Click the button, the right panel will display the button properties that you can change.
  8. Click Show the Attributes inspector icon at the top of right panel, you can change button text ( input text box under Title label), background color ( drop down list after Background label.) etc.
    change ios button title text and background color
  9. Click Show the Size inspector icon at top, you can change the button layout there. If you want the button to fill the screen width horizontally, you can change the Arrange attribute’s value to Fill Container Horizontally.
    change ios button arrange and size to match parent horizontal
  10. Now the example UI part has been created successfully, next we will write code that will response the button click events.
READ :   How To Set iOS App Icon In Xcode Project

3. Write Code To Response Button Click.

Click ViewController.swift file to open it in right source code panel and input below code in it. We add a function displayMessage(sender: UIButton). This method is decorated by @IBAction, this will make method exposed to the interface builder. This method will be invoked when you click the button. And the button instance will be passed to this method as sender arguments.

//

//  ViewController.swift

//  HelloWorldSwift

//

//  Created by zhao song on 2018/7/22.

//  Copyright © 2018 dev2qa.com. All rights reserved.

//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

    }

    @IBAction func displayMessage(sender: UIButton){

        // use let to define a constant String variable.

        // Get sender button label text.

        let buttonLabel : String = (sender.titleLabel?.text)!

        // Create alert title and message body.

        let alertTitle : String = "Hello " + buttonLabel

        let alertMessage : String = "Welcome to swift world."

        // Create a UIAlertController object.

        let alertController : UIAlertController = UIAlertController(title: alertTitle, message : alertMessage, preferredStyle : UIAlertController.Style.alert)

        // Create a UIAlertAction object.

        let alertAction : UIAlertAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil)

        // Add alertAction to alertController.

        alertController.addAction(alertAction);

        // Present the popup alert dialog.

        present(alertController, animated: true, completion: nil)

     }

}

4. Link The Button With displayMessage Function.

Now both the UI and response source code has been created, we need to connect them together to make the button click event processed by the function.

  1. Click the Main.storyboard file to open it.
  2. Mouse click the button and finger click the control key in the keyboard at same time.
  3. Drag the button to the View Controller icon, you can see an arrow line appear.
  4. When you release the mouse key, a popup menu list will be displayed.
  5. Just select the function just created, this will link the button to displayMessage function.
  6. Now select the button and click Show the Connection inspector tab icon in right panel, you can see we connect Touch Up Inside event with displayMessage function.  So when user tap this button, the Touch Up Inside event will be captured by iOS, and then the displayMessage will be invoked.
    xcode show the connection inspector
  7. Click the View Controller item in above Main.storyboard document outline view, in the right panel click Show the Identity inspector icon at top bar, in the custom class drop down list, you can select which class will bundled with this ViewController.
    xcode set interface builder view controller use custom class

5. Run & Debug The iOS Example.

Now the example ui and code are all complete, you need to start a simulator to test and debug it.

  1. Select the desired simulator in the drop down list as below. I select iPhone8 in this example.
    run and debug ios swift app
  2. Click the Run ( Triangle ) button to run the example. Click the Stop ( Square ) button to stop it.
  3. If you want to set breakpoint to debug the example, just open ViewController.swift file and click the line number at each line beginning to set a breakpoint.
  4. Click the Run button again, when the code execute to the break point, it will stop for you to debug.
  5. Please remember Xcode run mode can be used both for run and debug.
  6. Below is the example screen execute in the iPhone8 simulator.
    ios swift hello world example new
(Visited 213 times, 3 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.