AutoLayout with rotated UI Elements

Question

I've been teaching myself Auto Layout using code (i.e. avoiding Interface Builder).

I have a view that I'd like to set up with Auto Layout.

It has 3 UILabels that are horizontal and one that is vertical.

Sort of like this.
---------------------------------------------
| ---  -----------------------------------  |
| | |  |                                 |  |
| | |  -----------------------------------  |
| | |  -----------------------------------  |
| | |  |                                 |  |
| | |  -----------------------------------  |
| | |  -----------------------------------  |
| | |  |                                 |  |
| ---  -----------------------------------  |
---------------------------------------------

The label on the left is rotated 90 degrees to the left.

I'm just not sure how to apply auto layout between the rotated label and the non-rotated labels?

Can this be done?

Does the height become the width, does the top become the left, etc...

Answer 1

There is probably a “right” answer, but an easy workaround would be to add the rotated labels as subviews of non-rotated views, and do your layout with those views.

Update: I just remembered that when a view has a transform applied, the frame becomes the smallest possible bounding frame*. Unless I'm mistaken, that means the frame would be exactly what you want it to be, and assuming the layout calculations are based on the frame, it should work as expected.

* when I last worked with transformed views, the frame of a rotated view was undefined, but experimentation showed that it was the bounding rect of the rotated view. Not sure if it is now defined or expressly allowed/forbidden.

Update 2: I checked the docs, and they still have a strongly worded warning against doing this:

Warning: If the transform property is not the identity transform, the value of this property is undefined and therefore should be ignored.