iOS Swift Hello World Example

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

1. Xcode Installation.

1. Xcode is the default iOS, macOS development 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.
2. Before using it, you should first install it on your Mac machine. Just open the app store and search the keyword Xcode in the search box, then you can get and install the Xcode app, this is not difficult. You may need to use an apple account during the installation process.

2. Start Xcode And Create The Swift Hello World Project.

1. After install, you can find the Xcode icon in the Launchpad or in the Finder Applications directory.
2. Double click the icon to start it, you can see the Xcode project template wizard window.
3. There are 3 items in the Xcode project template wizard window, Get started with a playground, Create a new Xcode project, Clone an existing project.
4. Just click the second item Create a new Xcode project to create an Xcode project.
5. In the next popup dialog ( the dialog title is Choose a template for your new project: ), select iOS in the top menu bar, and select Single View App template, click Next button.
6. In the next Choose options for your new project: dialog window, input HelloWorldSwift in the Product Name input textbox, input dev2qa.com in the Organization Name input textbox, input com.dev2qa in the Organization Identifier input textbox.
7. The most important is to select Swift from the Language drop-down list. Then click the Next button to continue.
8. Then you can see the Xcode project navigator panel on Xcode left side. Click the first icon in the left panel top icon bar, it will list the project folder with swift source files.
9. There are two files we need to edit later to execute this example, ViewController.swift and Main.storyboard.
10. ViewController.swift: This swift file saves all iOS program source code, it is different from Objective-C which needs 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.
11. Main.storyboard: You design the iOS app’s UI in this file. You can place UI components such as buttons, text, labels in it. And then associate the UI component with the source code in ViewController.swift file.

3. Design The Swift Hello World Example User Interface.

1. Now the swift project has been created, we will design the UI part for this example app.
2. The app UI is so simple, it contains only one button at the screen center.
3. There are 3 panels in the Xcode editor, they are the left panel, the center panel, and the right panel.
4. Double click the Main.storyboard file in the left project navigator.
5. Click the View Controller Scene / View Controller / View / Safe Area item on the center panel, the right panel is just empty.
6. Click Xcode menu View —> Libraries —> Show Library at the top menu bar.
7. This will pop up the Xcode UI components library panel. Input the keyword button in the top search box, it will list all button-related UI components below the search box.
8. Drag the Button component and drop it to the center of the View Controller Scene / View Controller / View in the Main.storyboard file.
9. If you want to delete the button, just press the delete key on the physical keyboard.
10. Click the button, the right panel will display the button properties that you can change.
11. Click the Show the Attributes inspector icon ( before the ruler icon ) on the button properties panel top icon bar, you can change button text ( input text box under Title label), button background color ( drop-down list after Background label).
12. Click the Show the Size inspector icon ( a ruler icon ) on the button properties panel top icon bar, 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.
13. Now the example UI part has been created successfully, next we will write swift source code that will respond to the button click events.

3. Write Swift Source Code To Response The iOS Hello World Button Click Event.

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

   //
   //  ViewController.swift
   //  HelloWorldSwift
   //
   
   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 The Response Function.

1. Now both the UI and response source code have been created, we need to connect them together to make the button click event processed by the function.
2. Click the Main.storyboard file to open it.
3. Mouse click the button and finger press the control key on the physical keyboard at the same time.
4. Drag the button to the View Controller icon, you can see an arrow line appear.
5. When you release the mouse key, a popup menu list will be displayed.
6. Select the function displayMessage just created, this will link the button to the displayMessage() function.
7. I have created a video demo on youtube, you can watch it with the URL https://youtu.be/SI9Qiimhsyk
8. Now select the button and click Show the Connection inspector tab icon in the button properties panel, you can see we connect Touch Up Inside event with the displayMessage() function.
9. So when the user press this button, the Touch Up Inside event will be captured by iOS, and then the function displayMessage() will be invoked.
10. Click the View Controller Scene / View Controller item in the swift project Main.storyboard center panel, in the right panel click the Show the Identity inspector icon at the top bar, in the Custom Class / Class drop-down list, you can select which class will be bundled with this ViewController.

5. Run & Debug The iOS Example.

1. Now the example UI and source code are all complete, you need to start a simulator to test and debug it.
2. Select the desired simulator in the drop-down list as below. I select iPhone8 in this example.
   
3. Click the Run ( Triangle ) button to run the example. Click the Stop ( Square ) button to stop it.
4. If you want to set a breakpoint to debug the example, open ViewController.swift file and click the line number at each line beginning to set a breakpoint.
5. Click the Run button again, when the code executes to the breakpoint, it will stop for you to debug.
6. Please remember Xcode run mode can be used both for run and debug.
7. You can watch the youtube video below or from the URL https://youtu.be/OgJB5d5UDcY to see how this example runs.

Below is the ios hello world example youtube video.

Below youtube video tell you how to process button click event.