iOS Add Click Event To UIButton Swift Example

This example will show you how to add a UIButton object and a UILabel object in your iOS app. It will also show you how to add click event handle method to the button to change the label text accordingly when user click the button.

1. Add UI Views In Main.storyboard.

  1. Create a Xcode project with name ButtonLabelExample.
  2. Open the Main.storyboard file, then click Library icon in the top right corner to open the UI views library panel.
    xcode view library icon
  3. In the library panel, search keyword button and drag the button into Main.storyboard. Do same to add a Label view.
    xcode ui views library button

2. Add Button onClick Event Process Method.

Now the UI view components has been added successfully, we will add a button onClick event process method and an instance variable that refer to the label.

First click the Show the Assistant editor icon in top right to display both UI designer and the ViewController class source code together.

xcode show the assistant editor icon

2.1 Add Button onClick Event Handler Method.

Like in above video, just click the button and Control key at the same time, and drag the button to the ViewController class source code at right side. Release the mouse when you see a popup message like “Insert Action, Outlet or Outlet Collection”. Then there will popup a dialog like below.

add button click event handler method

Input onClick ( or any method name ) in the Name text box. Select Touch Up Inside in event drop down list. In the Arguments drop down list, you can select Sender or Sender And Event. Click Connect button, there will add a method in the ViewController source code.

READ :   iOS Application Life Cycle Example

2.2 Add Label Referral Instance Variable.

Now the button click event has a method to process, you can write code in the onClick method. But how to reference to the label? So we can change it’s text when button is clicked.

Click the label view component and press Control key at same time, and drag the label to right side ViewController source code. It will also popup a dialog like below. Input name label and click Connect button to add a UILabel type instance variable in the ViewController source code.

add instance variable for label control

2.3 ViewController Source Code.

Input below source code in the ViewController class source file.

ViewController.swift

//
//  ViewController.swift
//  ButtonLabelExample
//
//  Created by zhao song on 2018/7/25.
//  Copyright © 2018 dev2qa.com. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    // Refer to the label.
    @IBOutlet weak var label: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    @IBAction func onClick(_ sender: UIButton, forEvent event: UIEvent){

        // Get current label text.

        let currLabelText = label.text;

        // Set new label text according to current text.

        if(currLabelText == "You just click the button.")
        {
            label.text = "You click the button again.";
        }else
        {
            label.text = "You just click the button.";
        }

        // Make label size fit new text.
        label.sizeToFit();
    }
}

3. Use Stack View To Group Button And Label.

Now all the source code has been added complete, you can run the example, but when you start it, you will find the button and label layout may not look well, so we need to use stack view component to group the button and label together to make it’s layout beautiful.

READ :   iOS UITextField And UITextView Swift Example

StackView is a container view, it can group some child view together and frozen them to a block. And then you just need to add constraints to the StackView object to create the layout.

  1. Select both button and label together.
  2. Click the Embed In icon at bottom right bar to put the button and label into a stack view. Select the newly created StackView and click Align icon at bottom right to add constraints to layout the StackView stay at screen center in both direction.
  3. Now run the example again, you will see below screen.
(Visited 952 times, 17 visits today)

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.