📱 Dynamically Adjusting Layouts Based on Rotation (iOS – Xcode)

---

✅ 1. Definition

Dynamically adjusting layouts based on rotation means automatically changing the UI arrangement of an app when the device switches between:

• 📱 Portrait mode (vertical)
• 📱 Landscape mode (horizontal)

👉 The goal is to ensure the interface always looks proper, readable, and usable in both orientations.

---

🧠 2. Key Concepts

🔹 Dynamic Layout

A layout that changes automatically based on screen size or orientation.

---

🔹 Rotation Event

Occurs when the device changes orientation, triggering a UI update.

---

🔹 Auto Layout (Most Important)

• Uses constraints instead of fixed positions
• Automatically rearranges UI on rotation

---

🔹 Size Classes

• Compact width → iPhone portrait
• Regular width → iPad / landscape

---

🔄 3. How Layout Adjustment Works

Device Rotates
      ↓
iOS detects orientation change
      ↓
View updates layout constraints
      ↓
UI rearranges automatically

---

⚙️ 4. Methods to Adjust Layout Dynamically

---

🔹 1. Auto Layout (Best Method)

• UI adjusts automatically
• No manual coding needed

👉 Example:

• Button stays centered in both orientations

---

🔹 2. Stack Views (Recommended)

• Automatically rearranges UI elements

Example behavior:

Portrait	Landscape
Vertical stack	Horizontal stack

---

🔹 3. Detect Rotation Programmatically

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

---

🔹 4. Trait Collection (Modern Approach)

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    
    if traitCollection.verticalSizeClass == .compact {
        print("Landscape Mode Detected")
    }
}

---

🔹 5. Manual Layout Adjustment

if UIDevice.current.orientation.isLandscape {
    label.font = UIFont.systemFont(ofSize: 24)
    button.frame.origin.y = 100
} else {
    label.font = UIFont.systemFont(ofSize: 18)
    button.frame.origin.y = 200
}

---

📊 5. Diagram Description (for Exams)

Draw:

Portrait Mode              Landscape Mode
   📱                         📱
 [ UI Stack ]            [ UI  UI  UI ]
 [ Vertical ]            [ Horizontal ]

---

💡 6. Example App

🎯 Gallery App

• Portrait:

  • 1 column grid

• Landscape:

  • 3 column grid

👉 Layout automatically adjusts based on orientation

---

📌 7. Important Rules / Tips

• Always use Auto Layout (mandatory)
• Prefer Stack Views for flexible design
• Use Size Classes for adaptive UI
• Avoid fixed frames and positions
• Test both orientations in simulator

---

⚠️ 8. Common Mistakes

• ❌ Using fixed coordinates (breaks rotation)
• ❌ Not updating constraints
• ❌ Ignoring landscape mode
• ❌ Overusing manual frame adjustments
• ❌ Not testing on iPad + iPhone

---

🧠 9. Best Practices

• Design UI to be flexible from start
• Use Auto Layout + Stack Views together
• Use traitCollectionDidChange for updates
• Avoid device-specific layouts
• Keep UI simple and scalable

---

📝 10. Likely Exam Questions

1. What is dynamic layout adjustment in iOS?
2. How does iOS handle rotation-based layout changes?
3. What is Auto Layout and why is it important?
4. Explain how Stack Views help in rotation handling.
5. Write code to detect orientation change.
6. What are Size Classes?
7. Why should fixed layouts be avoided?
8. Explain UI adjustment during rotation with diagram.

---

📚 11. Quick Revision Summary

• Dynamic layout = UI changes automatically on rotation

• iOS uses:

  • Auto Layout
  • Size Classes
  • Stack Views

• Rotation triggers UI updates

• Methods:

  • viewWillTransition
  • traitCollectionDidChange

• Best practice: always design responsive UI

---