0

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.

enter image description here

tim.baker
  • 3,109
  • 6
  • 27
  • 51
  • Have you taken a look at [constraints](https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithConstraintsinInterfaceBuidler.html) ? – stacks Apr 16 '20 at 18:14

1 Answers1

1

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

enter image description here

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

enter image description here

Add top / leading / trailing constraints:

enter image description here

Add a proportional height constraint, at 0.25:

enter image description here

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

enter image description here

It will look like this (as expected):

enter image description here

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

enter image description here

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

enter image description here

Delete the Leading and Proportional Height constraints:

enter image description here

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

enter image description here

And click Done Varying. Now it looks like this:

enter image description here

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.

DonMag
  • 69,424
  • 5
  • 50
  • 86