develop ios apps using Swift
IOS Development

Develop iOS Apps Using Swift

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.

 

Exploring Xcode

Open Xcode and create a new Xcode project then click single view application

Develop iOS Apps Using Swift open Xcode

Now type your application name and click next then save your application

Develop iOS Apps Using Swift create project

Now Xcode will open, you will see a list of files on the left as follows:

  • AppDelegate.swift
  • ViewController.swift
  • Main.storyboard
  • Assets.xcassets
  • LaunchScreen.storyboard
  • Info.plist

Develop iOS Apps Using Swift Xcode

The column that contains these files is called navigator.

The center pane of Xcode is called 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 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.

Develop iOS Apps Using Swift Xcode Window

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.

Develop iOS Apps Using Swift add uiimageview

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.

Develop iOS Apps Using Swift add images

Click again on the Main.storyboard and select the UIImageView and click the attribute inspector.

Develop iOS Apps Using Swift image inspector

Select from the dropdown the image that you need to set as a background for the UIImageView

Develop iOS Apps Using Swift set image

Then set the content mode for the UIImageView to be Aspect Fill.

Develop iOS Apps Using Swift set content mode

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.

Develop iOS Apps Using Swift add logo

 

UIButton Control

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.

Develop iOS Apps Using Swift add UIbutton

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.

Develop iOS Apps Using Swift run the app

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 iPhone 7 simulator.

Develop iOS Apps Using Swift run success

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

Develop iOS Apps Using Swift stop the app

Handling Events

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.

Develop iOS Apps Using Swift assistant editor

Now we need 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.

Develop iOS Apps Using Swift add IBOutlet

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.

Develop iOS Apps Using Swift add 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.

Develop iOS Apps Using Swift action created

Basic Coding

Let’s do a very basic coding. When the user clicks the button the images disappear.

Go to the button @IBAction and type the following:

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 its working.

I hope you find the post interesting. Keep coming back.

Thank you.

  • winprg

    This is useful tutor, like previous for Swift.Big thanks. I never seen tutors for Swift such short and with meaning. I only seen Russian tutors in youtube – they are long and spoken. Apple docs are blablabla with tech info too. Thnks.

    • Great to hear that. I always do my best.
      Thank you very much.