XCode Swift Tutorial For Beginners
XCode is quite a daunting program to use at first. This tutorial will touch on XCode for beginners, it’s layout and features and creating your very first app in 5 minutes!
If you haven’t already head on over to the Mac App Store and install XCode.
Once it’s installed you can open it up with the LaunchPad . Simply scroll through to find it, or you can search for it.
Now you will see a menu, its pretty overwhelming initially with all the options!
To make a new iPhone app you want to select “Create a new XCode project” and in the next window that pops up select “Single View Application”. Now you will see another prompt with a few fields to fill out.
The Product Name is the name of your app. Leave the team as None for now. The Organization Name is the name of your company, business or even your self. The Organization Identifier is also this name, but with no spaces.
The Bundle Identifier used the Product Name and Organization Identifier as a unique identifier for your app. You will want to leave the Language as Swift and Devices as Universal.
Now we get taken to the following screen, each section is outlined below:
- 1: This is where you choose the files to edit in your app. It is much like a Finder or Windows Explorer, but in Xcode. You pick the areas of the app you edit here.
- 2: This displays what file is currently selected in the #1 pane to the left. It can be anything from settings, to code, to user interface design.
- 3: This shows information, and settings that can be changed for objects or code in pane #2 that are selected
- 4: This is used mostly to add objects such as buttons and text fields to your app
- 5: The top row allows you to run your app on the left, selecting either a simulator or actual device. The middle bar displays information about the current running task and the right buttons change the views in XCode.
Ok so now we have got a grip on the layout lets create a basic app to get the hang of it. On the left hand pane (#1), select Main.storyboard. This is where you place the user interface elements to your app. From the Object Library in the bottom right drag a Button and Text Field to the storyboard on the left. Now the app will initially load up to this screen. We are going to make it so when you type in your name the app will say hello to you.
Next we need to connect the button and text field to our code. First of all select our View Controller on the storyboard, by clicking at the top where the three icons are .
Now with this selected in the top right click the assistant editor button. This will split up your view between the user interface on the left side, and the code that runs it on the right. We need to connect our interface up with our code now.
First of all select the Text Field. With this selected hold the control key and drag the line just above viewDidLoad and let go. This will create an Outlet, name it txtName and click connect.
Now, repeat the process for the Button, however this time drag the line to under viewDidLoad. Change the connection type to Action and name it sayHi. This will create a new function called say hi. Now we can start coding, just before we do that lets look at the difference between the outlet and action we just connected up.
By using an outlet you can access methods and properties of an object. An example of this is settings a label’s test, setting it’s background colour and placeholder text.
By using an action it allows you to execute code in response to events taken on the object connected up. The most simple example is clicking on a button which then in turn would set a label’s text.
Now we know the differences, you can probably guess what we are using ours for. The txtName is going to be used to access the stuff we type into the text field, and the Say Hi button is going to popup with a message to the user.
Lets get to the coding, you can close down the split view by selecting the X button at the top right of the righthand side of the split view. The code is in ViewController.swift so select that, and you will see the outlets and actions you just created.
In the sayHi function add the following code, so yours looks the same.
@IBAction func sayHi(_ sender: Any) { let name = txtName.text let helloMsg = "Hello \(name!)" let alertController = UIAlertController(title: "My App", message: helloMsg, preferredStyle: UIAlertControllerStyle.alert) alertController.addAction(UIAlertAction(title: "Dismiss", style: UIAlertActionStyle.default, handler: nil)) self.present(alertController, animated: true, completion: nil) }
Now run the App and type in your name! Congratulations you have made your first app and learnt the basics of XCode! You can download the source code for the app below to have a play around with it.