Supporting Screen Rotations: Portrait and landscape modes

Screen rotation support in iOS means designing an app so that its UI automatically adjusts when the device changes orientation :

📱 Supporting Screen Rotations: Portrait and Landscape Modes (iOS – Xcode)

✅ 1. Definition

Screen rotation support in iOS means designing an app so that its UI automatically adjusts when the device changes orientation:

📱 Portrait mode → vertical layout (height > width)
📱 Landscape mode → horizontal layout (width > height)

👉 A well-designed app looks good and works properly in both modes.

🧠 2. Key Concepts

🔹 Orientation

The direction in which the device is held:

Portrait
Landscape Left
Landscape Right

🔹 Auto Layout

System that automatically adjusts UI constraints
Essential for rotation support

🔹 Size Classes

Help adapt UI for different screen sizes and orientations
Example:
- Compact width (portrait iPhone)
- Regular width (landscape/iPad)

🔹 Trait Collection

Provides information about current device environment
Used to adjust UI dynamically

🔄 3. How Screen Rotation Works

Device Rotates
      ↓
iOS detects orientation change
      ↓
Layout updates using Auto Layout / Size Classes
      ↓
UI adapts to new screen size

⚙️ 4. Enabling Rotation in iOS

🔹 Step 1: Allow Orientations in Project

In Xcode:

Go to Target → General → Deployment Info
Enable:
- Portrait
- Landscape Left
- Landscape Right

🔹 Step 2: Override Supported Orientations (Optional)

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
    return [.portrait, .landscapeLeft, .landscapeRight]
}

📐 5. Handling Layout Changes Programmatically

🔹 Detect Orientation Change

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    
    if size.width > size.height {
        print("Landscape Mode")
    } else {
        print("Portrait Mode")
    }
}

🔹 Using Device Orientation

if UIDevice.current.orientation.isLandscape {
    print("Landscape")
} else {
    print("Portrait")
}

🧩 6. Adjusting UI for Rotation

🔹 1. Auto Layout (Best Method)

Constraints automatically adjust UI
No manual coding needed

🔹 2. Stack Views

Automatically rearrange elements:
- Vertical → Portrait
- Horizontal → Landscape

🔹 3. Manual Layout Adjustment

if UIDevice.current.orientation.isLandscape {
    label.font = UIFont.systemFont(ofSize: 24)
} else {
    label.font = UIFont.systemFont(ofSize: 18)
}

📊 7. Diagram Description (for Exams)

Draw:

Portrait Mode          Landscape Mode
   📱                     📱
  | App |               | App        |
  | UI  |               | UI Layout  |
  |_____|               |___________|