"Width equals height" constraint in Interface Builder

Question

I can't find a way to create a 'square' constraint, meaning 'width equals height' in Interface Builder. I guess it's possible to add such constraint programmatically. Is there something I can do in IB? Maybe I just don't see it? It seems trivial, yet I can't find it.

I remember Peter Ammon talking about "Rely on Interface Builder as much as possible" in WWDC'12. How ironic. — DemoniacDeath, Mar 02 '13 at 23:41
Yeah, I think there are still a few things missing from the implementation of layout constraints. It seems they've given us access to most of the parameters, but not the multiplier, which would be useful for a lot of things. — rdelmar, Mar 03 '13 at 00:40
But it's getting better and better! I mean Auto Layout was introduced less than 3 years ago and from my point of view the support is really good nowadays. — Lukáš Kubánek, Feb 10 '14 at 16:37

score 192 · Accepted Answer · edited Oct 06 '15 at 21:09

192

Update Xcode 5.1b5

width equals height

Ctrl+click and drag from a view and release while the pointer is over the view. Select "Aspect Ratio". It will create a constraint where the first and second item is the view.

Before Xcode 5.1

You can't because the width/height editor lacks the fields to relate to another property or set the ratio:

width constraint

Therefore, you can't express the following code in Interface Builder:

CGFloat ratio = 1.0;
NSLayoutConstraint *constraint = [NSLayoutConstraint
    constraintWithItem:myView
    attribute:NSLayoutAttributeWidth
    relatedBy:NSLayoutRelationEqual
    toItem:myView
    attribute:NSLayoutAttributeHeight
    multiplier:ratio
    constant:0];
constraint.priority = 1000;
[myView.superview addConstraint:constraint];

edited Oct 06 '15 at 21:09

inorganik

24,255
17
90
114

answered Apr 18 '13 at 17:53

Jano

62,815
21
164
192

1

Thanks for the latest update. Xcode 5.1 beta 5 actually allows you to set aspect ratio constraints in IB, but when I try to compile the project, I get following error: _Aspect ratio constraints with Xcode versions prior to 5.1_. So maybe we have to wait for the final 5.1 version. Same for you, @Jano? – Lukáš Kubánek Feb 10 '14 at 16:32
Yes, the changes to the XIBs are not backward compatible. If you edit with 5.1 you can't go back to lesser versions. – Jano Feb 10 '14 at 17:37
So you are able to compile the xib? It doesn't work even with Xcode 5.1 beta 5 for me. – Lukáš Kubánek Feb 10 '14 at 23:22
Yes, I created a sample project with a storyboard, added aspect ratio constraints, and I ran it both on the simulator and device without errors. – Jano Feb 11 '14 at 09:11
Seems like this stopped working again in XCode 6... basically its same as it was in before xcode 5.1 :( – animal_chin Oct 15 '14 at 19:28
@Jano how can we specify "half the width of the superview" using IB ? – onmyway133 Nov 19 '14 at 03:31
1

@onmyway133 create a constraint between the two views and set the multiplier to 1:2. – Jano Nov 19 '14 at 09:01
3

In Xcode 7, ctrl+click drag from the view and release on top of itself, and select Aspect ratio – inorganik Oct 06 '15 at 21:08

score 3 · Answer 2 · answered Nov 16 '19 at 23:01

3

Please add a new constraint, aspect ratio to 1:1 on the UI element as in the image.

answered Nov 16 '19 at 23:01

user550088

712
1
8
16

score 0 · Answer 3 · answered Aug 04 '20 at 07:12

To start, control drag diagonally from the button to itself. A contextual menu will appear, where you can add width and height constraints. Shift+Click on each; a checkmark will appear indicating that you have added the constraint. (If you accidentally dismiss the dialog before adding both, that’s OK, just repeat the drag step and set the other one):

When first added, these constraints take on the current width and height of the button, so you’ll need to adjust each constraint to give it a more appropriate value. We’ll have to do this one at a time, although our image is square, so be sure to use the same constant value in both constraints to resize the button proportionally. Double-click on the constraint, and enter a smaller value in its constant field:

"Width equals height" constraint in Interface Builder

3 Answers3

Linked