Make an iPhone App in Minutes in XCode: Swift Crash Course (Free Tutorial)

iPhone apps are the rage these days. In this tutorial, you’ll learn how to make an app in just minutes! For more FREE coding lessons, check out our 30-minute beginners course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

We’ll also go over how to store items in a variable and set up a print button. Once you have XCode open, go to iOS > Application, and open up a Single View Application. For Product Name, type in “Simple Name app for iPhone p00”.

p00 is the production number, which are helpful to add whenever you are prototyping. Click Next and then Create.

In the left-hand sidebar, go to Simple Name app for iPhone p00 >Main.storyboard. Main.storyboard is where we can drag our elements visually onto the screen.

Click on the background so that it is outlined in blue. In the right-hand sidebar, change the size to “iPhone 5.5-inch”. This way our design will run on the simulator. You can also change the background color to, for instance, lead.

In the bottom right corner, enter “text” into the search bar. Drag and drop the Text Field element that appears onto the iPhone display. This is where a user will be able to input their name. Today we’ll learn how to transfer the input name from the Text Field all the way down into a label.

You can play around with the design of the box like I did: in the right sidebar, select the leftmost Border Style. In the colors tab that appears, click on the second icon from the left. In the Gray Scale Slider, make the brightness 95%. Also make the background color mercury.

Furthermore, in the right sidebar, go to Font, and select Custom. Below that, in Family, you are able to select a font, such as Futura. I’m using a font size of 40 and centering the text. Click Done when you’ve settled on a font style.

Beside “Placeholder” in the same sidebar, write “Enter Name”. That text will show up on the iPhone display.

Additionally, we’ll add in a button. In the bottom right corner, enter into the search bar “button”. Drag and drop the Button element onto the display, beneath the placeholder. Drag the corner of the button to resize it until it is the same width as the placeholder. Blue lines (rulers) will show up to help you measure an accurate size.

In the right sidebar, change the font of the text in your button to your desired font. I have selected Futura, size 67. In the right sidebar, just above where you determine your font, there is a bar saying “Button”, which represents the text inside the button. Change it to “Print Name”, and center it.

To set the background color of the button, scroll down in the right sidebar, and click on “Background”. Then go to the crayon box, and make the background tangerine. Close the Colors tab.

In the right sidebar, click on the Text Color bar. Let’s change the color of the text to lead.

Our third element is a label. In the bottom right corner, enter into the search bar “label”. Drag and drop the element onto the display, beneath the button. Resize it so that it has the same width as the button. For this example, let’s change the text “Label” to “Result” and center it. Also, let’s make the font of the text be Futura, size 35.

Now in the header, click on the assistant editor button, whose icon is two overlapping circles. Click on the rightmost icon in that header to remove the rightmost sidebar from the screen.

When you make something with XCode, you need to drag the items from the display into the code. In this case, we need to take in the data that the user will input, so we need to add a connection that is outlet.

To start, add some empty lines below the code line class ViewController: UIViewController {. Select the Enter Name placeholder, and drag it below that code line. On the tab that pops up, select “Outlet” for the Connection because we need to take in data that a user will enter. Name the object “txtEnterName”. Click Connect, and the following line will appear on your screen:

@IBOutlet weak var txtEnterName: UITextField!

In terms of the button, drag and drop it on a line above the final closing bracket of the entire code. Because we want this object to do something, we have to set its connection to “Action”. Give it the name “btnPrintNameACTION”. Click Connect to see the following appear:

@IBAction func btnPrintNameACTION(sender:
UIButton) {
}

Lastly, drag the label beneath the line @IBOutlet weak var txtEnterName: UITextField!. Set its connection to “Outlet”, and name it “lblName”. By clicking Connect, you will see:

@IBOutlet weak var lblName: UILabel!

Below that, we need to add in a variable, which is like a box into which you can put a piece of data. Using the keyword var, create the variable userName. Note that for the naming of variables, I am using camel casing, as per convention. In lower camel case, the first letters of every word after the first word in a name are capitalized. In addition, we can force the variable to be an empty string using the following format:

var userName : String = ""

When we print the button, we can add it in as a separate function. Above the last closing bracket, create a function like so:

func namePrintingLogic(){

}

To call that function, add namePrintingLogic() on a line above the closing bracket of the @IBAction function.

In the bottommost function, write the following line of code:

lblName.text = userName

But we have yet to specify the userName! On a new line above the previous one, type:

userName = txtEnterName.text

To summarize: a user enters a name. The user selects “Print Name”. The text will be stored in userName.

Load your simulator, and our display will appear. Click on Enter Name, and type in a name, such as “Mammoth Interactive”. Click Print Name to see “Mammoth Interactive” replace “Result”.

Congrats! I can’t wait to see the apps you create. To learn even more coding for FREE, check out our 30-minute beginners course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Mammoth Interactive Favicon

Why you NEED to take this course :

Get in Touch.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

EMAIL US

support@mammothinteractive.com