Programmatic Auto Layout with UIScrollView

When building iOS applications, choosing programmatic layout over Interface Builder offers several compelling advantages. You get a unified source of truth for your interface, eliminate the need to constantly switch between code and visual editors, reduce repository noise from storyboard files, avoid XML merge conflicts that plague team development, and gain enhanced flexibility for conditional layouts and animations.

UIScrollView serves as an excellent component for displaying content that extends beyond the visible screen area. When you don't require the sophisticated features of UITableView or UICollectionView, a simple scroll view provides an elegant solution without unnecessary complexity.

The key to success lies in understanding how to properly establish constraints between the scroll view and its content hierarchy.

Establishing Proper Constraints

Let's walk through creating a vertically scrolling interface within a view controller. The process begins by adding the scroll view as a subview and anchoring it to the parent view's boundaries.

view.addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

Note that in certain scenarios, you'll want to anchor to the view's safe area layout guide instead of the raw edges.

Once the scroll view understands its frame boundaries, we need to define its scrollable content area. For vertical-only scrolling, the content hierarchy must satisfy two critical requirements: at least one subview must be constrained to all four edges of the scroll view, and that same subview must have its width constrained to match the scroll view's width.

This dual constraint approach might seem redundant at first glance. However, it's essential because the scroll view's edges represent potential overflow boundaries rather than fixed dimensions. By explicitly constraining both the edges and the width, we eliminate ambiguity about the content's horizontal dimensions.

Skipping the width constraint will trigger a debugging warning: "Layout Issues: Scrollable content size is ambiguous for UIScrollView." The system needs both edge and dimension constraints to calculate the scrollable content size accurately.

Direct Subview Approach

When adding multiple subviews directly to the scroll view, ensure your constraint chain satisfies the edge and width requirements somewhere in the hierarchy.

subview1.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
subview1.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
subview1.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
subview1.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
subview1.heightAnchor.constraint(equalToConstant: 500).isActive = true
 
subview2.topAnchor.constraint(equalTo: subview1.bottomAnchor).isActive = true
subview2.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
subview2.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
subview2.heightAnchor.constraint(equalToConstant: 500).isActive = true
subview2.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

In this configuration, the first subview handles the top, leading, trailing, and width constraints relative to the scroll view. The second subview chains from the first and anchors to the scroll view's bottom, completing the constraint requirements.

Container View Strategy

As your scroll view content becomes more complex, distinguishing between scroll view constraints and internal layout constraints can become challenging. A container view approach provides better organization and clarity.

The container view acts as an intermediary, properly constrained to the scroll view, while all content subviews relate only to the container. This pattern also simplifies applying consistent padding across all content.

scrollView.addSubview(containerView)
containerView.translatesAutoresizingMaskIntoConstraints = false
containerView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: padding).isActive = true
containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -padding * 2).isActive = true
containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -padding).isActive = true
containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

Container Stack View Implementation

For content that follows a linear, evenly-distributed layout pattern, a container stack view offers the most efficient solution. This approach dramatically reduces the constraint code needed for subview positioning.

scrollView.addSubview(containerStackView)
containerStackView.axis = .vertical
containerStackView.spacing = 10
containerStackView.translatesAutoresizingMaskIntoConstraints = false
containerStackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
containerStackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
containerStackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
containerStackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
containerStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
 
containerStackView.addArrangedSubview(subview1)
containerStackView.addArrangedSubview(subview2)

Adaptive Height Pattern

A common design requirement involves content that fills the entire screen on larger devices but becomes scrollable on smaller ones. This adaptive behavior is achieved by setting a minimum height constraint on your container.

containerView.heightAnchor.constraint(greaterThanOrEqualTo: view.heightAnchor)

This constraint ensures the container matches the view controller's height unless its content forces expansion beyond that threshold. Remember to account for safe area insets, padding, or other layout guide considerations in your calculations.

Summary

Implementing programmatic constraints for scroll views becomes straightforward once you understand the fundamental requirements. While container views aren't strictly necessary, they provide cleaner code organization and help prevent layout ambiguity issues. The key principle remains consistent: ensure at least one element in your subview hierarchy constrains to all scroll view edges plus defines its width for vertical scrolling scenarios. This approach creates reliable, maintainable scroll view implementations that work consistently across different device sizes and orientations.