UIStackView Hide View Animation

UIStackView

Animation

iOS Development

Swift

UIView

UIStackView Hide View Animation

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

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

Tackling System Design Interview Problems

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

Start the free course

Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

UIStackView Hide View Animation

Interview Questions practice on Codemia

Introduction

Basic Hide/Show Animation

Toggle with Spring Animation

Practical Example: Expandable Section

Combining Alpha with isHidden

Animating Multiple Views

Sequential Animation

UIStackView Properties That Affect Animation

In a UITableViewCell

Common Pitfalls

Summary

Related reading

Tackling System Design Interview Problems

Track what you have practised

Interview Questions practice on Codemia