How to change position of image for portrait or horizontal alignment in XCode 11

Question

I am trying to take an image from filling the right hand side of the screen when viewed in horizontal orientation, to the top quarter when viewed in portrait.

I've followed lots of guides and points on here, but they all related to older version of XCode that seemingly have things XCode 11 don't - such as selecting constant - or just don't work.

I am completely perplexed as to how this should work as when I add "Vary for traits" it applies the move to all devices. I am sure I must be over thinking this, it must be simpler no?

I am using XCode 11.4 with iOS 13.x> above support.

Answer 1

Start by adding a new view controller - use iPhone 8 layout in Portrait Orientation (wC hR):

Add a new UIImageView and position it at the top with about 1/4 the height (doesn't matter how close):

Add top / leading / trailing constraints:

Add a proportional height constraint, at 0.25:

Now change View as to Landscape Orientation (wC hC):

It will look like this (as expected):

Click Vary for Traits, and select Height because we changed from (wC hR) to (wC hC):

Look at the constraints in the Size Inspector, and select This Size Class:

Delete the Leading and Proportional Height constraints:

and add a Bottom constraint and a Proportional Width (0.5) constraint:

And click Done Varying. Now it looks like this:

Notice that we have 2 "grayed-out" (inactive) constraints... If you switch back to View as Portrait Orientation, those two constraint will become "active" and the two (wC hC) constraints will show as "inactive".

Because apps can run in partial screens (iPad multi-tasking), it's advised to no longer think in terms of Portrait and Landscape. Rather, think in terms of size classes / traits.

If your design warrants, you might also add (wR hR) trait variations.

Now, if you really want Portrait vs Landscape, you'll need to use some code. Define a set of constraints for Tall/Narrow layout, and another set of constraints for Wide/Short layout. Then implement viewWillTransition(to size: ... and activate / deactivate the appropriate constraints based on the "to size" width > height or height > width.