Introduction

Creating two equal-width buttons side by side in iOS Auto Layout is a common UI pattern for dual actions such as “Cancel” and “Save.” The clean solution is to constrain both buttons to equal width and pin leading/trailing/spacing constraints. You can do this in Interface Builder or in code.

Most layout bugs come from missing width-equality constraints, ambiguous horizontal content hugging, or conflicting fixed widths.

Core Sections

1. Programmatic constraints with anchors

1let left = UIButton(type: .system)
2let right = UIButton(type: .system)
3left.setTitle("Cancel", for: .normal)
4right.setTitle("Save", for: .normal)
5
6[left, right].forEach {
7    $0.translatesAutoresizingMaskIntoConstraints = false
8    view.addSubview($0)
9}
10
11NSLayoutConstraint.activate([
12    left.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
13    right.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
14
15    right.leadingAnchor.constraint(equalTo: left.trailingAnchor, constant: 12),
16
17    left.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24),
18    right.topAnchor.constraint(equalTo: left.topAnchor),
19
20    left.heightAnchor.constraint(equalToConstant: 44),
21    right.heightAnchor.constraint(equalTo: left.heightAnchor),
22
23    left.widthAnchor.constraint(equalTo: right.widthAnchor)
24])

The key line is left.widthAnchor == right.widthAnchor.

2. Stack view alternative

Using UIStackView simplifies equal distribution:

1let stack = UIStackView(arrangedSubviews: [left, right])
2stack.axis = .horizontal
3stack.spacing = 12
4stack.distribution = .fillEqually

Pin stack to container edges and set button heights.

3. Handle localization and dynamic type

Equal widths do not guarantee text fit for long localized titles. Use content edge insets and test with large text settings.

4. Avoid fixed width constants

Fixed width often breaks on small devices. Prefer relational constraints and adaptive margins.

5. Interface Builder setup guidance

In storyboard:

• add both buttons
• add leading/trailing/spacing constraints
• add equal widths constraint
• resolve ambiguity warnings

Common Pitfalls

• Forgetting equal-width constraint and getting uneven button sizes.
• Using hardcoded widths that fail on different device sizes.
• Ignoring long localized text and clipping labels.
• Mixing stack view distribution with conflicting manual width constraints.
• Pinning buttons outside safe area and causing notch/home-indicator overlap.

Summary

For equal-width side-by-side buttons in iOS, constrain both buttons with shared top/height constraints and explicit equal-width relation, or use a horizontal stack view with fillEqually. Keep layout adaptive for localization and dynamic type. With relational constraints instead of fixed widths, the pattern remains stable across devices and orientations.

A practical way to make this guidance durable is to turn it into an executable runbook instead of leaving it as passive documentation. The runbook should include exact prerequisites, supported versions, required environment variables, and a short verification checklist. Each step should have expected output and one known failure signature so engineers can quickly classify whether they are on the happy path or hitting a known edge case. This structure is especially valuable in parallel team environments where context switches are frequent and not everyone has the same historical knowledge of the system.

It is also useful to keep a minimal reproducible fixture in source control. That fixture can be a small script, test input, sample request, or tiny deployment manifest that demonstrates both success and controlled failure behavior. When dependencies or infrastructure change, this fixture gives a fast signal about compatibility drift. Instead of debugging deep in production workflows, teams can run a focused check in minutes and identify if the regression came from tooling updates, configuration changes, or logic modifications. Reproducible fixtures also improve onboarding by showing the shortest end-to-end path.

For long-term quality, add one lightweight CI guardrail for the most failure-prone step in the workflow. Examples include schema linting, startup smoke checks, deterministic unit tests, API contract assertions, and compatibility probes for key dependencies. Keep guardrails fast and specific so failures are actionable and developers can fix issues without searching logs for long periods. If a class of issue repeats more than once, promote the corresponding manual troubleshooting step into automation. Over time, this shifts effort from reactive firefighting to preventive engineering and keeps the article aligned with real operating conditions.