📱 Understanding View Hierarchy & Creating a Custom App Icon (iOS – Xcode)

---

🧩 PART 1: Understanding View Hierarchy

✅ 1. Definition

View Hierarchy is the arrangement of UI elements (views) in a parent–child structure in an iOS app. Each screen is made of multiple views organized in layers, where one view can contain other views.

---

🧠 2. Key Concepts

🔹 View

• A rectangular area on screen (e.g., button, label, image)

🔹 Superview

• The parent view that contains other views

🔹 Subview

• A child view inside another view

🔹 Root View

• The main view of a screen, controlled by a View Controller

---

🏗️ 3. Structure of View Hierarchy

Example:

Main View (Root View)
│
├── Label
├── Button
└── Image View

👉 Here:

• Main View = Superview
• Label, Button, Image = Subviews

---

📊 4. Diagram Description (for Exams)

Draw a tree structure:

• Top: Root View

• Branches:

  • Label
  • Button
  • Image View Show arrows from parent to child.

---

⚙️ 5. How View Hierarchy Works in Xcode

Step 1: Open Storyboard

• Open Main.storyboard

Step 2: Use Document Outline

• Located on the left side
• Displays hierarchical structure of views

Step 3: Add UI Elements

• Drag elements from Objects Library

Step 4: Arrange Views

• Drag elements in outline to change hierarchy

Step 5: Manage Layering

• Top views overlap lower ones
• Order affects visibility

---

📌 6. Important Rules

• A subview cannot exist without a superview
• Position is relative to its parent view
• Hidden parent → all child views hidden
• Use hierarchy for better UI organization

---

💡 7. Example

Login Screen Hierarchy:

View
│
├── Logo Image
├── Username TextField
├── Password TextField
└── Login Button

---

🎨 PART 2: Creating a Custom App Icon

---

✅ 1. Definition

An App Icon is the small image that represents an app on the home screen of an iPhone or iPad.

---

🧠 2. Key Concepts

🔹 AppIcon Asset

• A set of images in different sizes stored in Xcode

🔹 Asset Catalog

• Folder in Xcode (Assets.xcassets) where images and icons are stored

🔹 Required Sizes

Different devices require different icon sizes:

• 20x20
• 29x29
• 40x40
• 60x60
• 1024x1024 (App Store)

---

⚙️ 3. Steps to Create a Custom App Icon

Step 1: Design Icon

• Use tools like:

  • Figma
  • Photoshop

• Keep design:

  • Simple
  • Clear
  • No text (recommended)

---

Step 2: Generate Icon Sizes

• Use online tools or export multiple sizes manually

---

Step 3: Open Asset Catalog

• In Xcode → Open Assets.xcassets
• Click AppIcon

---

Step 4: Add Icons

• Drag and drop images into correct size slots

---

Step 5: Set App Icon

• Xcode automatically uses AppIcon set

---

Step 6: Run App

• Icon appears in simulator/home screen

---

📊 4. Diagram Description (for Exams)

Draw:

• Grid of icon placeholders (AppIcon slots)
• Label different sizes like 60x60, 1024x1024

---

📌 5. Important Rules / Tips

• Use PNG format
• Do NOT add transparency (for App Store icon)
• Maintain consistent design across sizes
• Follow Apple Human Interface Guidelines
• Use high resolution (1024×1024)

---

💡 6. Example

Simple App Icon Idea:

• Blue background
• White chat bubble icon
• Clean and minimal design

---

📝 7. Likely Exam Questions

1. Define view hierarchy in iOS.
2. Differentiate between superview and subview.
3. Explain how view hierarchy is managed in Xcode.
4. Draw and explain a view hierarchy diagram.
5. What is an app icon?
6. Explain steps to create a custom app icon in Xcode.
7. What is Asset Catalog?
8. Why are multiple icon sizes required?
9. Write rules for designing a good app icon.

---

📚 8. Quick Revision Summary

🔹 View Hierarchy

• Parent-child structure of UI elements
• Root View → Superview → Subviews
• Managed using Document Outline
• Controls layout and visibility

🔹 App Icon

• Represents app on device
• Stored in Assets.xcassets
• Requires multiple sizes
• Must be simple, clear, high-quality

---