Simplified iOS

  • Home
  • About
  • Contact
  • Advertise
  • Write for Us

Xcode Button Tutorial for iPhone using Swift in Xcode 7

July 26, 2016 by Belal Khan 4 Comments

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.

Contents

  • 1 Xcode Button Video Tutorial
  • 2 Creating a new Project
  • 3 Adding Button to Your App’s View
  • 4 Xcode Button Tutorial
  • 5 Xcode Button Tutorial – Summary
    • 5.1 Share this:
    • 5.2 Related

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.

xcode button tutorial

  • 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.

view classes xcode

  • Now you will see your view as follows.

xcode tutorial for beginners

  • Now lets add something to our view.

Adding Button to Your App’s View

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

label button xcode

  • 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.

xcode button handling

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

handling button in xcode

  • 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.

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.
xcode button tutorial

Xcode Button Tutorial

  • 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.

connecting to swift

  • 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.

connecting xcode button tutorial

  • 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.

xcode button tutorial handling button

  • 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 🙂

Share this:

  • Tweet
  • Share on Tumblr
  • WhatsApp

Related

Filed Under: iOS Development Tutorial Tagged With: xcode button tutorial, xcode swift tutorial, XCode Tutorial for Beginners

About Belal Khan

I am Belal Khan, I am currently pursuing my MCA. In this blog I write tutorials and articles related to coding, app development, iphone etc.

Comments

  1. Papa Manda says

    December 29, 2016 at 11:21 pm

    Thanks for your effort. That was very helpful for the beginning. 🙂

    Reply
  2. Mahdi Habash says

    February 22, 2017 at 10:47 pm

    hi
    its possible if i have uiwebview and inside page i need to redirect by button to native code for another view controller or something else ?

    thanks in advance

    Reply
  3. bartu says

    May 6, 2017 at 8:39 pm

    Hi! i have a swift project and i have some button on the project next and prev. button works well but i can not find the first button that shows the first image. Please help me.

    Reply
  4. Shanu Bhattacharya says

    August 3, 2017 at 11:09 am

    Thanks for the efforts you took. This is very informative for beginners I’ll surly share this my fellow for his understanding.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *




About Me

belal khan simplified ios

Hello I am Belal Khan, founder and owner of Simplified iOS. I am currently pursuing MCA from St. Xavier's College, Ranchi. Apart from my academic I am a blogger, I run various websites and majority of them are about coding and development.

Connect with Me

Follow Simplified iOS

Simplified iOS

Popular Posts

  • Swift SQLite Tutorial for Beginners – Using… (99,380)
  • Swift PHP MySQL Tutorial – Connecting iOS App… (98,248)
  • UIWebView Example to Load URL in iOS using Swift in Xcode (79,974)
  • Download Full High Sierra Installer to Create Bootable USB (70,273)
  • Xcode Login Screen Example using Swift 3, PHP and MySQL (67,256)
  • How to Format USB on Mac? Formatting External Hard… (61,373)
  • Swift JSON Tutorial – Fetching and Parsing… (59,402)
  • Firebase Realtime Database Tutorial for Swift using Xcode (53,697)
  • iOS Registration Form Example using PHP and MySQL (48,915)
  • Xcode Text Field Tutorial for iOS Application using Swift (41,145)




About

Simplified iOS is a blog where you can find latest tutorials related to coding and app development for iphone and MAC OS. Here you can get Simplified iPhone, iPad and Mac OS development tutorial to know the things about Apple Development from basics to advanced level.

Quick Links

  • Advertise
  • Contact
  • Disclaimer
  • Privacy Policy
  • Write for Us

Copyright © 2017 · Simplified iOS· All rights Reserved. And Our Sitemap.All Logos & Trademark Belongs To Their Respective Owners·