Image dimensions changing on rotation

Question

I have an image called sampleImage, and I am trying to stretch it along x and y axis, as follows when it is in landscape and it did not work at all

 override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator)
  {
   if (UIDevice.current.orientation == UIDeviceOrientation.portrait)
    {
     sampleImage.frame = CGRect(x: 0, y: 0, width: 220, height: 120)
    }
   else
    {
    sampleImage.frame = CGRect(x: 0.2, y: 0.2, width: 220, height: 120)
    }
 }

Then, I did in viewDidLayoutSubviews() as follows,

override func viewDidLayoutSubviews() {

    super.viewDidLayoutSubviews()

if (UIDevice.current.orientation == UIDeviceOrientation.portrait)
        {
         sampleImage.frame = CGRect(x: 0, y: 0, width: 220, height: 120)
        }
else
        {
        sampleImage.frame = CGRect(x: 0.2, y: 0.2, width: 220, height: 120)
        }
     }

This works if the device is in landscape, but once you rotate it to portrait and back, all the changes are gone.How to make sure that those dimensions stay same on rotation?

One thing to be careful of is that in the viewWillTransition method when you get the current orientation you are getting the orientation before the device rotates. — Upholder Of Truth, Jan 05 '18 at 11:54
You don't detect orientation change. A UIViewController gets informed of a size change and a size class change. Remember rotating a device is not the only time a UIViewController can change size. You should try to avoid thinking of orientations. Having said that you could check the new size width vs the height. In a landscape type orientation the width is greater but in a portrait type orientation the height is greater. — Upholder Of Truth, Jan 05 '18 at 12:30
Appreciate your explanation, that was better than stretching it on x and y axis — Coder221, Jan 05 '18 at 12:37

score 3 · Accepted Answer · answered Jan 05 '18 at 11:53

Basically, it's all about constraints. First approach to solve your problem is to handle device rotation (good so answer) and change it manually via setNeedsUpdateConstratints method (another good so answer). This way good for heavy screen with complex changes with UI and constraints. In your case you better use specific constant for constraint base on device orientation that can be set in storyboard.

So, follow this steps:

Set Equal Heights and Equal Widths constraints to the UIImageView, then double click for Width Equals: 120 constraint:

Open View as: iPhone ... bottom bar:

Select specific device and landscape orientation at right side and hit the + before Constant at the right panel.

It will automatically set right Width and Height base on selected device and orientation, so you just need to enter the constant for this case. Run the project and see the result.

Portrait:

Landscape:

Note, also don't forget that different devices may have different size classes (compact x compact, compact x regular, etc.), so maybe you will need to add few more constants to handle this problem (see the table at the bottom of the article).

Finally, you solved the problem by working with storyboard, not programmatically. Pros of that - you code not grow up and not responsible for the UI things, cons - you should add the constant to every size class you want to use.

In my case, constraints dont work, I want to know how to keep my strecth dimensions constant once it rotates. — Coder221, Jan 05 '18 at 12:27
Why don't constraints work for you. You can setup constraints that keep the width, height and even aspect ratio constant and just allow the position to change. — Upholder Of Truth, Jan 05 '18 at 12:31
@pacification, your answer is far better than what I was thinking. Appreciate it. — Coder221, Jan 05 '18 at 12:35

Image dimensions changing on rotation

1 Answers1