← Back to Tutorials

4. My First iPhone App

Getting Started

Hello World with SwiftUI

Create a new iOS App project, select SwiftUI, and you'll see a ContentView.swift file:

import SwiftUI

struct ContentView: View {
    @State private var tapCount = 0
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Hello, iOS!")
                .font(.largeTitle)
                .foregroundColor(.blue)
            
            Text("You tapped \(tapCount) times")
            
            Button("Tap Me") {
                tapCount += 1
            }
            .padding()
            .background(.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
        .padding()
    }
}

Storyboard Approach

With UIKit and Storyboard, you design visually in Interface Builder:

// ViewController.swift
import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var label: UILabel!
    
    @IBAction func buttonTapped(_ sender: UIButton) {
        label.text = "Hello, iOS!"
        label.textColor = .systemBlue
    }
}

Auto Layout

Auto Layout dynamically calculates view sizes and positions based on constraints:

// Programmatic Auto Layout
NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 20),
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

MVC Pattern

iOS encourages the Model-View-Controller architecture. The Model holds data, the View displays UI, and the Controller mediates between them. Each has a UIViewController subclass as the controller.

Practice Task: Build a "Counter" app with a label showing a number and two buttons (+ and -). Add Auto Layout constraints so the UI is centered. Add a reset button. Run on both iPhone and iPad simulators to test layout adaptivity.