Xcode Button Tutorial for iPhone using Swift in Xcode 7

Hello guys, welcome to the next part of iOS Development Tutorial. In the last post we just learnt how to get started with Xcode to develop applications for iPhone. In this post we will see how to create buttons in your app. As it is cleared from the title it is Xcode Button Tutorial. So lets begin.

Xcode Button Video Tutorial

• You can go through this video tutorial as well, to learn about handling button in Xcode using Swift.

Creating a new Project

• Open Xcode and create a new project. The same as we did in the last tutorial about getting started with xcode.
• Though I am working on the last project we created. So create a new project or open the last project FirstIphoneApp. In the left you will see Main.storyboard. Click on it and you will see a blank rectangle. It is actually the view of your app.

• You may thinking that why the view is square shaped? phone screen is not like that. It is because of Size Classes feature. This featured is used in creating universal apps, but we will disable this feature for now.
• So in the right section inside Interface Builder Document you will see Use Size Classes checkbox which is marked by default. You need to unmark this and you will see your View same as an iPhone.

• Now you will see your view as follows.

• Now lets add something to our view.

Adding Button to Your App’s View

• Now scroll down the bottom right section of Xcode window.

• You will see Label and Button here. Drag and Drop a Button and A Label to your View. And to change the text of Label and Button just double click on it and type the text you want.

• Now in our view we have a Label and a Button. You can try running your application in the Simulator.

• Now we again have a stupid app that cant do anything 😛 hahah LOL.
• So our todays task is to display some message on the Label when we tap the Button.

Xcode Button Tutorial

• We have finished the UI creation. Now its time to do some swift coding to make our Button works. So on the right section which your the directory structure of your app you will see a file named ViewController.swift .
• Click on this file and you will see the code. For now delete everything inside the class and make it as below.

//
//  ViewController.swift
//  FirstIphoneApp
//
//  Created by Belal Khan on 24/07/16.
//  Copyright © 2016 Belal Khan. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    
    @IBOutlet weak var labelName: UILabel!
    


}

• Now go to View -> Assistant Editor and click on Show Assistant Editor.

• It will divide your screen in two parts and you can simultaneously see the UI Design and Swift Code. It will be very helpful in connecting the UI to Swift Code.

• Now to connect UI element to the code, we need to press control and then drag the View Component that you want to connect with the code inside the swift code window. You will see a blue line while dragging and after dragging you will see a small dialog box.

• Now put the name for your View Component and click on Connect.
• We will do the same for button but with a little change. First drag the button to code window by pressing control. And inside dialog box modify the values as follows.

• If you are seeing carefully the previous connection was Outlet, but this time we changed it to Action because we want to handle Button Click event.
• Now on swift side you will see the following code so far.

//
//  ViewController.swift
//  FirstIphoneApp
//
//  Created by Belal Khan on 24/07/16.
//  Copyright © 2016 Belal Khan. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    
    @IBOutlet weak var labelName: UILabel!
    
    @IBAction func buttonClick(sender: UIButton) {
    }


}

• The function buttonClick will execute when we tap the button. Inside this function we will set a message to the label. And we will count the number of clicks with a variable. So modify your code as below.

//
//  ViewController.swift
//  FirstIphoneApp
//
//  Created by Belal Khan on 26/07/16.
//  Copyright © 2016 Belal Khan. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    //a normal variable to count the number of clicks
    var clickCount = 0
    
    //label variable
    @IBOutlet weak var labelName: UILabel!

    //action function linked with button action
    @IBAction func buttonClick(sender: UIButton) {
        
        //incrementing click count
        clickCount+=1
        
        //displaying text to label
        labelName.text="You clicked the button \(clickCount) times"
    }
    
}

• Thats it now click on the play icon from the top.

• Bingo! Its working absolutely fine.

Xcode Button Tutorial – Summary

• In this post we created a Button and a Label in our View.
• We connected the Label and Button to the Swift Code. (press control and drag the view to your code window to connect).
• We learnt about handling clicks on the button.

So thats all for this Xcode Button Tutorial friends. Still our application is too boring 😛 but don’t worry in upcoming tutorial we will make it interesting. So stay tuned for the next tutorial. And yes feel free to leave your comments if facing any problem in this Xcode Button Tutorial. Thank You 🙂