📱 Using Views with Subviews & Creating Views Using Code (iOS – Xcode)

---

✅ 1. Definition

• View: A rectangular UI element displayed on screen (e.g., label, button).
• Subview: A view that is placed inside another view (parent view).
• Creating views using code: Instead of using storyboard, UI elements are created and configured programmatically in Swift.

---

🧠 2. Key Concepts

🔹 View Hierarchy

• Views are arranged in a parent–child structure
• Parent = Superview
• Child = Subview

---

🔹 Programmatic UI

• UI is built using Swift code
• No drag-and-drop needed
• Gives more control and flexibility

---

🔹 Frame vs Constraints

Term	Meaning
Frame	Position and size (x, y, width, height)
Auto Layout	Constraints for responsive design

---

🏗️ 3. Using Views with Subviews

---

🔹 Adding a Subview

Syntax:

parentView.addSubview(childView)

---

🔹 Example

let parentView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
parentView.backgroundColor = .lightGray

let childView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 200))
childView.backgroundColor = .blue

parentView.addSubview(childView)

👉 Result:

• Blue view appears inside gray view

---

📊 Diagram Description (for Exams)

Draw:

• Large rectangle (Parent View)
• Smaller rectangle inside it (Subview)
• Label them clearly

---

📌 Important Rules

• Subview position is relative to parent view
• Removing parent removes all subviews
• Subviews are drawn on top of parent
• Order matters (top view overlaps below views)

---

⚙️ 4. Creating Views Using Code

---

🔹 Step 1: Import UIKit

import UIKit

---

🔹 Step 2: Create a View

let myView = UIView()
myView.backgroundColor = .red

---

🔹 Step 3: Set Frame

myView.frame = CGRect(x: 50, y: 100, width: 200, height: 100)

---

🔹 Step 4: Add to Main View

self.view.addSubview(myView)

---

🧩 5. Creating UI Elements Programmatically

---

🔹 Label Example

let label = UILabel()
label.text = "Hello World"
label.frame = CGRect(x: 50, y: 100, width: 200, height: 50)

self.view.addSubview(label)

---

🔹 Button Example

let button = UIButton(type: .system)
button.setTitle("Click Me", for: .normal)
button.frame = CGRect(x: 50, y: 200, width: 150, height: 50)

button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

self.view.addSubview(button)

@objc func buttonTapped() {
    print("Button Pressed")
}

---

📐 6. Using Auto Layout in Code

Instead of frame:

myView.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    myView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    myView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    myView.widthAnchor.constraint(equalToConstant: 100),
    myView.heightAnchor.constraint(equalToConstant: 100)
])

---

💡 7. Example

🎯 Colored Box App

• Create a red box inside main view
• Add a label inside the box

let box = UIView(frame: CGRect(x: 50, y: 100, width: 200, height: 200))
box.backgroundColor = .red

let label = UILabel(frame: CGRect(x: 20, y: 80, width: 160, height: 40))
label.text = "Inside Box"
label.textAlignment = .center

box.addSubview(label)
self.view.addSubview(box)

---

⚠️ 8. Common Mistakes

• ❌ Forgetting to addSubview → view not visible
• ❌ Wrong frame values → view off screen
• ❌ Missing constraints → layout issues
• ❌ Not setting translatesAutoresizingMaskIntoConstraints = false

---

📝 9. Likely Exam Questions

1. Define view and subview.
2. Explain view hierarchy with example.
3. How do you add a subview in iOS?
4. Write code to create a UIView programmatically.
5. Differentiate between frame and Auto Layout.
6. Create a button using code and handle its action.
7. Explain advantages of programmatic UI.
8. Draw a diagram of view and subview relationship.

---

📚 10. Quick Revision Summary

• View = UI element

• Subview = Child inside another view

• Use addSubview() to attach views

• UI can be created using:

  • Storyboard OR Code

• Programmatic UI gives:

  • More control
  • Better customization

• Use:

  • Frame → fixed layout
  • Auto Layout → responsive design

---