Creating a new iOS project in iOS Swift - App Building Walkthrough

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

Practice

1. What is the first step when creating a new iOS project in Xcode?

easy

A. Write Swift code immediately.

B. Open Xcode and select 'Create a new Xcode project'.

C. Download an app template from the App Store.

D. Connect your iPhone to the computer.

Solution

1. Step 1: Open Xcode

   You must start by opening Xcode, the tool used to build iOS apps.

2. Step 2: Choose to create a new project

   Selecting 'Create a new Xcode project' starts the setup wizard for your app.

3. Final Answer:

   Open Xcode and select 'Create a new Xcode project'. -> Option B

4. Quick Check:

   First step = Open Xcode and create new project [OK]

Hint: Always start by opening Xcode and creating a new project [OK]

Common Mistakes:

• Trying to write code before creating a project
• Downloading unrelated templates
• Connecting device before project setup

2. Which option correctly describes the interface style choices when creating a new iOS project?

easy

A. SwiftUI or Storyboard

B. UIKit or JavaFX

C. React Native or Flutter

D. XML or JSON

Solution

1. Step 1: Understand interface styles in Xcode

   Xcode offers SwiftUI and Storyboard as main interface design options for iOS apps.

2. Step 2: Identify correct pair

   SwiftUI is the modern declarative UI framework, Storyboard is the visual layout tool.

3. Final Answer:

   SwiftUI or Storyboard -> Option A

4. Quick Check:

   Interface style = SwiftUI or Storyboard [OK]

Hint: Remember: SwiftUI and Storyboard are Xcode's UI options [OK]

Common Mistakes:

• Confusing with unrelated frameworks like React Native
• Mixing UI frameworks from other platforms
• Choosing data formats instead of UI styles

3. After filling in the app name as "MyApp" and selecting SwiftUI, what will Xcode create?

medium

A. A Storyboard file without SwiftUI code

B. Only a blank text file named MyApp.txt

C. An Android app project

D. A project folder with SwiftUI files and a default ContentView.swift

Solution

1. Step 1: Understand project creation with SwiftUI

   Choosing SwiftUI creates a project folder containing SwiftUI code files.

2. Step 2: Identify default files

   Xcode generates ContentView.swift as the default UI file for SwiftUI projects.

3. Final Answer:

   A project folder with SwiftUI files and a default ContentView.swift -> Option D

4. Quick Check:

   SwiftUI project creates ContentView.swift file [OK]

Hint: SwiftUI projects always include ContentView.swift by default [OK]

Common Mistakes:

• Expecting unrelated file types
• Confusing iOS with Android projects
• Assuming Storyboard files appear with SwiftUI

4. You created a new project but forgot to select SwiftUI and chose Storyboard instead. What issue might you face?

medium

A. The app will crash immediately on launch.

B. Xcode will refuse to build the project.

C. Your UI code will use Storyboard files, not SwiftUI syntax.

D. You cannot add any UI elements later.

Solution

1. Step 1: Recognize interface style impact

   Choosing Storyboard means your UI is designed with Storyboard files, not SwiftUI code.

2. Step 2: Understand consequences

   This affects how you write UI code; you must use UIKit and Storyboard methods.

3. Final Answer:

   Your UI code will use Storyboard files, not SwiftUI syntax. -> Option C

4. Quick Check:

   Storyboard choice means no SwiftUI code [OK]

Hint: Storyboard projects use visual UI files, not SwiftUI code [OK]

Common Mistakes:

• Thinking the app will crash immediately
• Believing Xcode blocks building
• Assuming UI elements cannot be added later

5. You want to create an iOS app that supports both SwiftUI and UIKit views. How should you start your new project?

hard

A. Create a SwiftUI project and add UIKit views manually later.

B. Create a Storyboard project and convert it to SwiftUI automatically.

C. Create two separate projects, one for SwiftUI and one for UIKit.

D. Use a third-party tool to combine SwiftUI and UIKit automatically.

Solution

1. Step 1: Understand mixed UI support

   SwiftUI projects can embed UIKit views manually, allowing both UI styles.

2. Step 2: Choose best project start

   Starting with SwiftUI is easier; you can add UIKit views as needed.

3. Step 3: Evaluate other options

   Storyboard projects don't convert automatically; separate projects or tools are unnecessary.

4. Final Answer:

   Create a SwiftUI project and add UIKit views manually later. -> Option A

5. Quick Check:

   Start SwiftUI, add UIKit manually [OK]

Hint: Start SwiftUI project; add UIKit views manually if needed [OK]

Common Mistakes:

• Expecting automatic conversion from Storyboard to SwiftUI
• Creating two separate projects unnecessarily
• Relying on third-party tools for basic UI mixing