Practice Now
UIStackView
Animation
iOS Development
Swift
UIView

UIStackView Hide View Animation

Data Structures & Algorithms practice on Codemia

Step through 300+ coding interview problems with animated visualisers that show the data structure changing as the code runs. The Blind 75 are free.

Practice algorithms
iOS & Android

Introduction

UIStackView has a powerful built-in feature: when you set a subview's isHidden property to true, the stack view automatically removes it from the layout and redistributes space to the remaining views. Animating this transition produces smooth expand/collapse effects without manual constraint management. This is one of the simplest and most effective animation techniques in iOS development.

Basic Hide/Show Animation

swift
1UIView.animate(withDuration: 0.3) {
2    self.detailsLabel.isHidden = true
3    self.stackView.layoutIfNeeded()
4}

To show:

swift
1UIView.animate(withDuration: 0.3) {
2    self.detailsLabel.isHidden = false
3    self.stackView.layoutIfNeeded()
4}

The stack view automatically adjusts spacing and repositions the remaining arranged subviews.

Toggle with Spring Animation

swift
1func toggleView(_ view: UIView) {
2    UIView.animate(
3        withDuration: 0.4,
4        delay: 0,
5        usingSpringWithDamping: 0.8,
6        initialSpringVelocity: 0.5,
7        options: .curveEaseInOut
8    ) {
9        view.isHidden.toggle()
10        self.stackView.layoutIfNeeded()
11    }
12}

Practical Example: Expandable Section

A common pattern is a header that expands/collapses content when tapped:

swift
1class ExpandableSectionView: UIView {
2
3    private let stackView = UIStackView()
4    private let headerButton = UIButton(type: .system)
5    private let contentView = UIView()
6    private var isExpanded = false
7
8    func setup() {
9        stackView.axis = .vertical
10        stackView.spacing = 8
11
12        headerButton.setTitle("▶ Show Details", for: .normal)
13        headerButton.contentHorizontalAlignment = .leading
14        headerButton.addTarget(self, action: #selector(toggleContent), for: .touchUpInside)
15
16        contentView.isHidden = true // Start collapsed
17
18        stackView.addArrangedSubview(headerButton)
19        stackView.addArrangedSubview(contentView)
20
21        addSubview(stackView)
22        // Add constraints...
23    }
24
25    @objc func toggleContent() {
26        isExpanded.toggle()
27
28        UIView.animate(withDuration: 0.3) {
29            self.contentView.isHidden = !self.isExpanded
30            self.contentView.alpha = self.isExpanded ? 1.0 : 0.0
31            self.stackView.layoutIfNeeded()
32        }
33
34        let title = isExpanded ? "▼ Hide Details" : "▶ Show Details"
35        headerButton.setTitle(title, for: .normal)
36    }
37}

Combining Alpha with isHidden

For a smoother fade effect, animate both alpha and isHidden:

swift
1func hideWithFade(_ view: UIView) {
2    UIView.animate(withDuration: 0.3) {
3        view.alpha = 0.0
4        view.isHidden = true
5        self.stackView.layoutIfNeeded()
6    }
7}
8
9func showWithFade(_ view: UIView) {
10    view.alpha = 0.0
11    UIView.animate(withDuration: 0.3) {
12        view.isHidden = false
13        view.alpha = 1.0
14        self.stackView.layoutIfNeeded()
15    }
16}

Animating Multiple Views

Hide or show multiple views simultaneously:

swift
1func collapseAll() {
2    UIView.animate(withDuration: 0.3) {
3        self.detailsLabel.isHidden = true
4        self.imageView.isHidden = true
5        self.actionButton.isHidden = true
6        self.stackView.layoutIfNeeded()
7    }
8}
9
10func expandAll() {
11    UIView.animate(withDuration: 0.3) {
12        self.detailsLabel.isHidden = false
13        self.imageView.isHidden = false
14        self.actionButton.isHidden = false
15        self.stackView.layoutIfNeeded()
16    }
17}

Sequential Animation

Reveal views one at a time:

swift
1func revealSequentially(_ views: [UIView]) {
2    for (index, view) in views.enumerated() {
3        UIView.animate(
4            withDuration: 0.25,
5            delay: Double(index) * 0.1,
6            options: .curveEaseOut
7        ) {
8            view.isHidden = false
9            view.alpha = 1.0
10            self.stackView.layoutIfNeeded()
11        }
12    }
13}

UIStackView Properties That Affect Animation

swift
1let stackView = UIStackView()
2
3// Axis: determines layout direction
4stackView.axis = .vertical       // or .horizontal
5
6// Spacing: gap between arranged subviews
7stackView.spacing = 12
8
9// Distribution: how subviews are sized
10stackView.distribution = .fill   // Default — respects intrinsic sizes
11// .fillEqually — all same size
12// .fillProportionally — proportional to intrinsic sizes
13
14// Alignment: cross-axis positioning
15stackView.alignment = .fill      // Default — stretch to fill
16// .leading, .trailing, .center

These properties can also be animated:

swift
1UIView.animate(withDuration: 0.3) {
2    self.stackView.spacing = self.isCompact ? 4 : 16
3    self.stackView.layoutIfNeeded()
4}

In a UITableViewCell

Stack view animations inside table view cells require updating the table view:

swift
1class ExpandableCell: UITableViewCell {
2    @IBOutlet weak var stackView: UIStackView!
3    @IBOutlet weak var detailsView: UIView!
4    weak var tableView: UITableView?
5
6    func toggleDetails() {
7        detailsView.isHidden.toggle()
8
9        UIView.animate(withDuration: 0.3) {
10            self.stackView.layoutIfNeeded()
11        }
12
13        // Tell the table view to recalculate cell heights
14        tableView?.beginUpdates()
15        tableView?.endUpdates()
16    }
17}

Common Pitfalls

  • Double-toggling isHidden: Calling isHidden = true on an already-hidden view, or isHidden = false on a visible view inside an animation block can cause layout glitches. Always check the current state or use .toggle().
  • Nested stack views: When hiding a view inside a nested stack view, both the inner and outer stack views animate, which can produce unexpected layout changes. Test nested configurations carefully.
  • Constraint conflicts: If a hidden view has explicit height/width constraints (not just intrinsic size), the stack view may not collapse it properly. Remove or deactivate explicit size constraints when hiding.
  • Auto Layout ambiguity: If your stack view's arranged subviews do not have sufficient constraints (e.g., missing intrinsic content size), the animation may produce jumps. Ensure all views have well-defined sizes.
  • layoutIfNeeded placement: layoutIfNeeded() must be called inside the animation block. Calling it outside produces an instant layout change with no animation.

Summary

  • Set isHidden on a stack view's arranged subview inside UIView.animate for smooth expand/collapse
  • Always call stackView.layoutIfNeeded() inside the animation block
  • Combine alpha animation with isHidden for fade effects
  • Animate spacing and other stack view properties for additional effects
  • For table view cells, call beginUpdates()/endUpdates() after the animation to update row heights
Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Basis Lab
No course covers this one yet

Basis Lab writes one for you from a sentence about what you want to be able to do, then teaches it and checks you understood. Your first course is free.

Build my course
Data Structures & Algorithms practice on Codemia

Step through 300+ coding interview problems with animated visualisers that show the data structure changing as the code runs. The Blind 75 are free.

Practice algorithms
Codemia
© 2026 Codemia
Resources
Legal
Social
All Rights Reserved.