How to Fix Auto Layout Constraint Conflicts and Spacing Issues (Question, Image, and Options)

The Problem I was facing an issue where the spacing between the question, image, and options was excessively large, resulting in poor readability. On top of that, constraint conflicts were occurring.

The root cause was that it is mathematically impossible for Auto Layout to satisfy the following three constraints simultaneously:

1. 20pt spacing from the question to the image view.

2. 10pt spacing from the question label to the options stack view.

3. 20pt spacing from the image view to the options stack view.

The Solution To resolve this, I made the constraints dynamic.

First, declare variables for the constraints:

Swift

private var questionToOptionsConstraint: NSLayoutConstraint!
private var questionToImageConstraint: NSLayoutConstraint!
private var imageToOptionsConstraint: NSLayoutConstraint!

Next, initialize these constraints in the setupConstraints() method, but do not activate them yet:

Swift

questionToOptionsConstraint = optionsStackView.topAnchor.constraint(equalTo: questionLabel.bottomAnchor, constant: 10)
questionToImageConstraint = imageView.topAnchor.constraint(equalTo: questionLabel.bottomAnchor, constant: 20)
imageToOptionsConstraint = optionsStackView.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 20)

Finally, in the displayQuestion() method, dynamically activate only the appropriate constraints based on whether an image is present:

Swift

// First, deactivate all potentially conflicting constraints
NSLayoutConstraint.deactivate([
    questionToOptionsConstraint,
    questionToImageConstraint,
    imageToOptionsConstraint
])

if hasImage { 
    // If an image exists, activate the image-related constraints
    NSLayoutConstraint.activate([
        questionToImageConstraint,
        imageToOptionsConstraint
    ])
} else {
    // If there is no image, activate the direct question-to-options constraint
    NSLayoutConstraint.activate([
        questionToOptionsConstraint
    ])
}

Result By using this approach, I was able to maintain the standard spacing when an image is present, while significantly improving readability by closing the gap between the question and the options when there is no image.