How anchor works relative to another anchor?

📚 Official Books Auto Layout by Tutorials
1

On chapter 6 Implementing self-sizing cells section there is a line of constraint that is follow

  contentView.trailingAnchor.constraint(
    greaterThanOrEqualTo: bubbleImageView.trailingAnchor, 
    constant: 20),

From what i understand here is contentView’s trailing anchor should be atleast that of bubbleImageView’s trailing anchor, which is fine as the screenshot below

Simulator Screenshot - iPhone 15 Pro - 2024-08-21 at 20.57.40
Simulator Screenshot - iPhone 15 Pro - 2024-08-21 at 20.57.401179×2556 219 KB

Then i tried making the constraint as equalTo instead of greaterThanOrEqualTo. I thought it would be same cause it is a scenario of greaterThanEqualTo constraint where both image and content are equal. But this is the result
Simulator Screenshot - iPhone 15 Pro - 2024-08-21 at 21.02.24
Simulator Screenshot - iPhone 15 Pro - 2024-08-21 at 21.02.241179×2556 217 KB

2

Maybe it helps with understanding if you write that constraint the other way around:

bubbleImageView.trailingAnchor.constraint(
    lessThanOrEqualTo: contentView.trailingAnchor
),

That is enforcing the exact same constraint, just viewed from the point of view of the bubbleImageView. It’s saying (for left-to-right scenarios):

“the right hand side of this bubbleImageView must be to the left of, or equal to, the right hand side of the content view”

In other words, the bubbleImageView can be narrower than, or the same size as, the content view, but it can never be wider.

By changing it to equalTo, you have taken away the “can be narrower than” possibility.

3

Hello,

When you set up the constraint:
bubbleImageView.trailingAnchor.constraint(
lessThanOrEqualTo: contentView.trailingAnchor
)
you are essentially enforcing that the right edge of bubbleImageView must be positioned to the left of, or be equal to, the right edge of the contentView. This constraint ensures that bubbleImageView cannot extend beyond the right edge of contentView. In simpler terms, the bubbleImageView can be as wide as or narrower than the contentView, but it is not allowed to be wider.

If you change the constraint to:
bubbleImageView.trailingAnchor.constraint(
equalTo: contentView.trailingAnchor
)
you are specifying a stricter rule. This modified constraint mandates that the right edge of bubbleImageView must align exactly with the right edge of contentView. As a result, the bubbleImageView must be exactly the same width as the contentView—it can no longer be narrower, because it has to match the width of the contentView precisely.

In summary, the original constraint with lessThanOrEqualTo offers flexibility by allowing bubbleImageView to be either the same width or narrower than the contentView. The updated constraint with equalTo, however, removes this flexibility by enforcing that the bubbleImageView must exactly match the width of the contentView, leaving no room for it to be narrower.

Hope that helps!

Best regard,
Publix Passport

4

Yes, that is behaviour the original poster was wanting, and it’s exactly what I said it would do:

That is enforcing the exact same constraint, just viewed from the point of view of the bubbleImageView . It’s saying (for left-to-right scenarios):

“the right hand side of this bubbleImageView must be to the left of, or equal to, the right hand side of the content view”

I was explaining to them why the change to equalTo “broke” their layout, by making all bubbleImageViews full width, even if their contents didn’t need it.

At no point was I suggesting the stricter rule. I was explaining why the poster’s change to the stricter rule had the effect it did.