Stack Views (UIStackView)

What is UIStackView?

UIStackView is a powerful layout component in iOS that simplifies arranging UI elements in a vertical or horizontal stack. It automatically handles alignment, spacing, and distribution of its subviews.

---

1. Key Features of UIStackView

✅ Supports vertical and horizontal layouts
✅ Automatically manages spacing and alignment
✅ Simplifies Auto Layout by reducing constraint complexity
✅ Supports nested stack views for advanced layouts
✅ Provides easy animation when adding or removing views

---

2. Adding UIStackView in Storyboard

1. Drag & Drop a UIStackView from the Object Library.
2. Set the Axis (Horizontal or Vertical).
3. Add UI elements inside the UIStackView.
4. Configure Alignment, Distribution, and Spacing in the Attributes Inspector.
5. Add Auto Layout constraints to position the UIStackView in the view.

---

3. Implementing UIStackView Programmatically

import UIKit

class ViewController: UIViewController {

    let stackView = UIStackView()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupStackView()
    }

    func setupStackView() {
        // Configure Stack View
        stackView.axis = .vertical  // Change to .horizontal for horizontal layout
        stackView.alignment = .fill
        stackView.distribution = .equalSpacing
        stackView.spacing = 10
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(stackView)

        // Add Constraints
        NSLayoutConstraint.activate([
            stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stackView.widthAnchor.constraint(equalToConstant: 200)
        ])

        // Add UI Elements to Stack View
        let label = UILabel()
        label.text = "Hello, StackView!"
        label.textAlignment = .center

        let button = UIButton(type: .system)
        button.setTitle("Click Me", for: .normal)

        stackView.addArrangedSubview(label)
        stackView.addArrangedSubview(button)
    }
}

✅ This will create a vertical stack view with a label and a button.

---

4. Customizing UIStackView

4.1 Changing Axis (Vertical or Horizontal)

stackView.axis = .horizontal  // Default is vertical

4.2 Adjusting Spacing Between Elements

stackView.spacing = 15

4.3 Aligning Elements Within the Stack

stackView.alignment = .leading  // Options: .fill, .leading, .trailing, .center

4.4 Controlling Element Distribution

stackView.distribution = .equalSpacing  // Options: .fill, .fillEqually, .equalSpacing, .equalCentering

---

5. Adding & Removing Views Dynamically

5.1 Adding a New View to the Stack

let newLabel = UILabel()
newLabel.text = "New Label"
stackView.addArrangedSubview(newLabel)

5.2 Removing a View from the Stack

stackView.arrangedSubviews[0].removeFromSuperview()

5.3 Hiding a View Instead of Removing

stackView.arrangedSubviews[0].isHidden = true

---

6. Animating Changes in UIStackView

Animations work seamlessly when adding or removing views.

UIView.animate(withDuration: 0.3) {
    self.stackView.arrangedSubviews.last?.isHidden = true
}

---

7. Nested UIStackViews for Complex Layouts

You can nest stack views inside each other to create advanced layouts.

let horizontalStack = UIStackView()
horizontalStack.axis = .horizontal
horizontalStack.spacing = 10

horizontalStack.addArrangedSubview(UILabel(text: "Left"))
horizontalStack.addArrangedSubview(UILabel(text: "Right"))

stackView.addArrangedSubview(horizontalStack)

---

8. Common Issues & Fixes

❌ Issue: StackView Not Displaying Elements

✅ Fix: Ensure the stack view has constraints and contains arranged subviews.

❌ Issue: Elements Overlapping in StackView

✅ Fix: Set distribution = .fillEqually to ensure equal spacing.

❌ Issue: UIStackView Not Resizing Automatically

✅ Fix: Ensure all subviews have intrinsic content sizes or explicit height constraints.

---

9. Conclusion

✔️ UIStackView simplifies UI layout management
✔️ Supports automatic alignment, spacing, and distribution
✔️ Reduces complexity compared to manual Auto Layout constraints
✔️ Supports nested stack views for complex designs
✔️ Allows dynamic UI changes with smooth animations

Would you like a custom UIStackView implementation for your project? 🚀