Creating square views regardless of orientation

Question

Created Aug ’20

Replies 1

Boosts 0

Views 1.7k

Participants 1

I am trying to create a UIView within a UIStackView that I want to always be square regardless of device and orientation. I have seen posting that explain how others have done it (setting constraints between UIView and superview for both height and width - a required set and an optional set - along with a 1:1 aspect constraint for the UIView) , but it no longer seems to work under all instances - in particular iPad and iPhone 11s. Does anyone have any advice on how to make this happen. It seems to me to be a pretty routine thing to do. I've done it before programmatically, but I would really like to get it done within Interface Builder. Any suggestions would be greatly appreciated.

Answered by michaeljmac in 694571022

So, I have figured this out; however, it can be quite touchy and depending on unknown factors, you may need to delete constraints and put them back. But here's what I found works:

Contraints: CenterY on parent view (Priority 1000) CenterX on parent view (Priority 1000) Width = Height of view (Priority 1000) Leading to parent view => the amount you want at minimum (Priority 900) Trailing to parent view = the amount you want at minimum (Priority 700) - I have stuck with same as leading Top to parent view => the amount you want at minimum (Priority 900) Bottom to parent view = the amount you wan at minimum (Priority 700) - I have stuck with same as Top Width = some amount that is less than the parent view size in the smallest device supported (Priority 500) Height = same as Width (Priority 500)

I usually start with CenterY and CenterX at the same time, then do the other six at the same time.

I've been having good luck with this on a number of Apps recently. It took quite a while to get there, but seems to work well now.

Thanks.

Boost

Answer 1

michaeljmac OP

Nov ’21

Accepted Answer

So, I have figured this out; however, it can be quite touchy and depending on unknown factors, you may need to delete constraints and put them back. But here's what I found works:

Contraints: CenterY on parent view (Priority 1000) CenterX on parent view (Priority 1000) Width = Height of view (Priority 1000) Leading to parent view => the amount you want at minimum (Priority 900) Trailing to parent view = the amount you want at minimum (Priority 700) - I have stuck with same as leading Top to parent view => the amount you want at minimum (Priority 900) Bottom to parent view = the amount you wan at minimum (Priority 700) - I have stuck with same as Top Width = some amount that is less than the parent view size in the smallest device supported (Priority 500) Height = same as Width (Priority 500)

I usually start with CenterY and CenterX at the same time, then do the other six at the same time.

I've been having good luck with this on a number of Apps recently. It took quite a while to get there, but seems to work well now.

Thanks.

0