📱 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  |
  |_____|               |___________|

---

💡 8. Example App

🎯 Photo Gallery App

• Portrait:

  • 1 column grid

• Landscape:

  • 3 column grid

👉 Layout changes automatically based on orientation

---

📌 9. Important Rules / Tips

• Always use Auto Layout (mandatory for rotation support)
• Use Stack Views for flexible UI
• Test both orientations in simulator
• Avoid fixed frame layouts
• Use Safe Area for proper positioning

---

⚠️ 10. Common Mistakes

• ❌ Fixed screen coordinates (breaks rotation)
• ❌ Not enabling landscape mode
• ❌ Ignoring Safe Area
• ❌ Poor constraint setup
• ❌ Not testing both orientations

---

🧠 11. Best Practices

• Design adaptive UI from the start
• Use Size Classes + Auto Layout
• Test on multiple devices
• Keep UI simple and flexible
• Use stack views instead of manual positioning

---

📝 12. Likely Exam Questions

1. What is screen rotation in iOS?
2. Differentiate between portrait and landscape modes.
3. How do you enable rotation in Xcode?
4. What is Auto Layout and why is it important for rotation?
5. How do you detect orientation changes in code?
6. What are Size Classes?
7. Why should fixed layouts be avoided?
8. Explain view adjustment during rotation.

---

📚 13. Quick Revision Summary

• Screen rotation = switching between portrait & landscape

• iOS automatically adjusts UI using:

  • Auto Layout
  • Size Classes

• Key methods:

  • viewWillTransition
  • UIDevice orientation

• Always design responsive UI

• Test both orientations for best results

---