Build: Welcome Screen

This screen welcomes the user with a friendly message and a button to continue.

Target UI

-------------------------
|                       |
|     Welcome to App     |
|                       |
|   [Continue Button]    |
|                       |
-------------------------

Display a centered label with text 'Welcome to App'

Add a button below the label with title 'Continue'

Button should be centered horizontally

When button is tapped, print 'Continue tapped' to the console

Starter Code

iOS Swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        // TODO: Add your code here
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import UIKit

class ViewController: UIViewController {

    let welcomeLabel = UILabel()
    let continueButton = UIButton(type: .system)

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

        welcomeLabel.text = "Welcome to App"
        welcomeLabel.textAlignment = .center
        welcomeLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(welcomeLabel)

        continueButton.setTitle("Continue", for: .normal)
        continueButton.translatesAutoresizingMaskIntoConstraints = false
        continueButton.addTarget(self, action: #selector(continueTapped), for: .touchUpInside)
        view.addSubview(continueButton)

        NSLayoutConstraint.activate([
            welcomeLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            welcomeLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor),

            continueButton.topAnchor.constraint(equalTo: welcomeLabel.bottomAnchor, constant: 20),
            continueButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
    }

    @objc func continueTapped() {
        print("Continue tapped")
    }
}

We create a UILabel and a UIButton programmatically. The label is centered in the view. The button is placed 20 points below the label and centered horizontally. We add a target action to the button that prints a message when tapped. Auto Layout constraints position the elements properly.

Final Result

Completed Screen

-------------------------
|                       |
|     Welcome to App     |
|                       |
|   [Continue Button]    |
|                       |
-------------------------

User taps the 'Continue' button

Console prints 'Continue tapped'

Stretch Goal

Add a dark mode support that changes background and text colors automatically

💡 Hint

Use system colors like .systemBackground and .label to support light and dark modes automatically