Button and action handling in iOS Swift - Mini App: Build & Ship

Build: Simple Button Screen

This screen shows a button. When the user taps the button, a label updates to say 'Button tapped!'.

Target UI

---------------------
|                   |
|    [Tap Me]       |
|                   |
|                   |
|                   |
|   Label:          |
|                   |
---------------------

Add a UIButton centered horizontally near the top with the title 'Tap Me'.

Add a UILabel below the button to show messages.

When the button is tapped, update the label text to 'Button tapped!'.

Use Auto Layout constraints for positioning.

Ensure accessibility labels for the button and label.

Starter Code

iOS Swift

import UIKit

class SimpleButtonViewController: UIViewController {

    let button = UIButton(type: .system)
    let messageLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // TODO: Configure button

        // TODO: Configure label

        // TODO: Add button and label to view

        // TODO: Setup Auto Layout constraints

        // TODO: Add button action handler
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import UIKit

class SimpleButtonViewController: UIViewController {

    let button = UIButton(type: .system)
    let messageLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Configure button
        button.setTitle("Tap Me", for: .normal)
        button.accessibilityLabel = "Tap Me Button"
        button.translatesAutoresizingMaskIntoConstraints = false

        // Configure label
        messageLabel.text = ""
        messageLabel.textAlignment = .center
        messageLabel.accessibilityLabel = "Message Label"
        messageLabel.translatesAutoresizingMaskIntoConstraints = false

        // Add subviews
        view.addSubview(button)
        view.addSubview(messageLabel)

        // Setup Auto Layout constraints
        NSLayoutConstraint.activate([
            button.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            messageLabel.topAnchor.constraint(equalTo: button.bottomAnchor, constant: 20),
            messageLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            messageLabel.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: 20),
            messageLabel.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -20)
        ])

        // Add button action handler
        button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
    }

    @objc func buttonTapped() {
        messageLabel.text = "Button tapped!"
    }
}

We create a UIButton and UILabel as properties. In viewDidLoad, we set the button title to 'Tap Me' and add an accessibility label for screen readers. The label starts empty and is centered below the button. We use Auto Layout constraints to position the button near the top center and the label below it with some spacing. The button's touchUpInside event triggers the buttonTapped method, which updates the label text to 'Button tapped!'. This simple interaction shows how to handle button taps and update UI elements in Swift.

Final Result

Completed Screen

---------------------
|                   |
|    [Tap Me]       |
|                   |
|                   |
|                   |
|   Button tapped!   |
|                   |
---------------------

When the user taps the 'Tap Me' button, the label text changes from empty to 'Button tapped!'.

Stretch Goal

Add a second button labeled 'Reset' below the label that clears the label text when tapped.

💡 Hint

Create another UIButton, add it below the label with Auto Layout, and add a target action that sets the label text to an empty string.