Having introduced you to Xcode and the simulator, now we will create our first iOS application.
To get ready to code the iOS application, you need Xcode and iOS Simulator in your MacBook and working. If you have followed the previous recipe, and know a little bit of Objective-C, you are all set to code your very first iOS application.
Now that we have a basic idea of Xcode, let's start by building the user interface:
In the project navigator, select
Main.storyboard
. Xcode then brings up a visual editor for storyboards, called interface builder.A storyboard is used to lay out views and transition between different views. As we use a single-view application, the storyboard already includes a View Controller.
Next, we will add a button to the view. The bottom part of the utility area shows the Object Library, as shown in the following screenshot:
Drag the Button object from the Object Library to the view:
Stop dragging and move the button to the area of your choice. Double-click on the button and rename it
Click Me
.Next we will add a few lines of code to display our message. In the project navigator, you should find the
ViewController.swift
file. We will be adding a method to the already presentViewController
class. When this method is called, our code will tell iOS to display a certain message.Now let's code our method. This is what our method looks like:
@IBAction func showMessage(){ let alertController = UIAlertController(title: "My First App", message: "Hello World", preferredStyle: UIAlertControllerStyle.Alert) alertController.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Default, handler:nil)) self.presentViewController(alertController, animated: true, completion: nil) }
This is what the finished work will look like:
Now we need to connect our Click Me button in the storyboard to our
showMessage
method. This part is easy; we click onMain.storyboard
, where we have displayed our screen.Press and hold the Ctrl key on your keyboard, click the Click Me button, and drag it to the View Controller icon.
Release both buttons, and we see a pop-up message with the
showMessage
option. Select it to make a connection between the button and our function:That's it! If everything is correct, we can now run our app perfectly when we click on the run button:
The @IBAction
attribute, introduced in Swift, is used to connect storyboard actions to the code. Here, we wanted to connect the click of a button to a message being displayed. So, we defined the function showMessage
as func
.
In our function, we call UIAlertController
and ask it to display an alert popup, with the title My First App
and the message Hello World
. We also add an action:
alertController.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Default, handler:nil))
This essentially means we add an option to close the popup when OK is clicked on.
When we dragged our button to the ViewController
and selected our showMessage
function, we essentially linked the clicking of the button to the calling of our function.
You can experiment by trying different styles of button, or using table views, links, and so on. Add more functionality to experiment in ways of learning iOS app development.
A good starting place would be the documentation from the creators of iOS:
You can find a lot of resources on starting out with app development, along with videos, tutorials, and sample code, from https://developer.apple.com/swift/resources/