In the previous post, we talked about iOS language basics and we saw how easy it is to work with Swift language. In this post, we will learn how to work with Xcode and how to develop iOS apps using Swift.
Today we will start with a hello world app, so let’s get started.
Table of Contents
Open Xcode and create a new Xcode project then click single view application
Now type your application name and click next then save your application
Now Xcode will open, you will see a list of files on the left as follows:
The column that contains these files is called the navigator.
The center pane of Xcode is called the editor where you edit and start coding.
Any file on the left, when you click it, it will open in the center editor area.
Click on the Main.storyboard file, a rectangle in the middle with the title view controller appeared.
On the right hand, there is a column which is the attribute inspector.
At the right bottom, there is the object library panel where you drag your components that will be shown to the user as we will see later.
As you can see, on the left, there is a hierarchical list of all components for your selected file which is the view controller in our case, this panel is the document outline panel.
Add objects to the view controller
From the objects library panel, search for UIImageView control.
Now drag the UIImageView from the bottom border so it fits the entire corners of the view controller.
I’m going to use two images to show you how to use UIImageView. Click on the Assets.xcassets in the navigator on the left, then drag the images to the document outline.
Click again on the Main.storyboard and select the UIImageView and click the attribute inspector.
Select from the dropdown the image that you need to set as a background for the UIImageView
Then set the content mode for the UIImageView to be Aspect Fill.
Now you can see the image appears perfectly on the UIImageView.
We need to add another UIImageView to put our logo in the center of the screen. Drag another UIImageView from the object library and set the image from the attribute inspector the same way.
Drag a UIButton from the object library and place it at the top of the view controller.
Change the button attributes from the attribute inspector, you can change the text of the button and the color.
Now let’s run the app to see it in action. Click on the run button on the top of Xcode and wait until the build process completes.
The iPhone simulator will open up and your program should run inside that simulator without problems.
Besides the run button, there is a list of simulators that are shipped with Xcode, you can choose any one of them to run your program.
In my case, I’ve selected the iPhone 7 simulator.
Very good!! Your app runs successfully and if you click on the button nothing happens because we didn’t write any code yet for that button.
To close your program, click on the square button
To wire UI elements like a button or image to a code file, you should use @IBOutlet, and to perform actions when a certain UI element is interacted with, you should use @IBAction function.
Click on the assistant editor on the right corner which has interlocking circles icon.
Now we need to create @IBOutlets for each image and one @IBAction for the UIButton.
To create an @IBOutlet for the image, right click on the image and drag the mouse to ViewController.swift and exactly above the viewDidLoad() function.
A popup will appear to ask you about the outlet name you want to create. Type the name you want and click connect.
Repeat the same steps for the logo image view.
For the button, right click and drag the button to ViewController.swift and release the mouse blew didReceiveMemoryWarning() function.
When the mouse is released, a popup will appear to ask you about the event type and the name of the action.
Choose the connection type as an action and type the action name and click connect.
As you see, the created action looks like a function. Actually, it’s a function that can be triggered when the button is pressed.
Let’s do very basic coding. When the user clicks the button the images disappear.
Go to the button @IBAction and type the following:
backgroundIV.isHidden = true logoIV.isHidden = true
Run the app and wait for the build process to finish and when the program shows up click on the button and see what will happen.
Wow!! The images disappeared. That’s your first iOS action. Congratulations!
It’s not that good but it’s working.
I hope you find the tutorial interesting. Keep coming back.