How do I change UIImageView image in view controller in traitCollectionDidChange

Question

I want the image in my UIImageView to us a different image file that's cropped to correctly fill the landscape mode upon the orientation changing from portrait to landscape. All of the following code is defined in a class that extends UIViewController.

The following function is definitely being called when the phone rotates because my printf function is printing to the output.

- (void) traitCollectionDidChange: (UITraitCollection *) previousTraitCollection {

    [super traitCollectionDidChange: previousTraitCollection];
    if ((self.traitCollection.verticalSizeClass != previousTraitCollection.verticalSizeClass)
        || (self.traitCollection.horizontalSizeClass != previousTraitCollection.horizontalSizeClass)) {
        printf("Orientation Change!\n");
        UIImage * newImage = [UIImage imageNamed: @"landscape-image"];
        [self.imageView setImage:newImage];
    }
}

---

I defined the property imageView in my .h file as follows:

@property (nonatomic, nonnull, readonly) UIImageView * imageView;

---

And I initialize the imageView as follows:

UIImage * image = [UIImage imageNamed:@"portrait-image"];
UIImageView * _imageView = [[UIImageView alloc] initWithImage:image];
_imageView.contentMode = UIViewContentModeScaleAspectFill;
_imageView.translatesAutoresizingMaskIntoConstraints = NO;
[pageView addSubview:_imageView];

---

This does not work for me though. When I change the orientation, the imageView image stays the same and zooms in like it normally does. Since the traitCollectionDidChange function is being called when the phone rotates, I assume the issue must be with how I'm changing the image. I'm relatively new to iOS development so I could just be missing something important for updating UIImageViews. Any help is appreciated.

Answer 1

When you create the imageView using UIImageView * _imageView = [[UIImageView alloc] initWithImage:image];, you are shadowing the automatically synthesised variable _imageView, with a new variable of the same name.

The newly created UIImageView instance is therefore not assigned to the imageView property. As a result, when the device is rotated and the second method is run, self.imageView is nil, and you call to [self.imageView setImage:newImage] does nothing.

To solve it, all you need to do replace UIImageView * _imageView = [[UIImageView alloc] initWithImage:image]; with _imageView = [[UIImageView alloc] initWithImage:image];

More on the messiness of automatically synthesised properties in Objective-C in this answer When should I use @synthesize explicitly?

EDIT --

In addition, the - (void) traitCollectionDidChange: (UITraitCollection *) previousTraitCollection may be called at any time, and initially, so you want to detect the orientation in that method, and not just set the image to your landscape image.

(and on this - ou may want to re-evaluate your requirements regarding 'landscape' vs 'portrait' image because iOS apps can run in a variety of environment, iPad / iPhone / compact.. it is complicated. https://developer.apple.com/documentation/uikit/uitraitcollection)

To complete the answer, this should work on iPhone

- (void) traitCollectionDidChange: (UITraitCollection *) previousTraitCollection {

    [super traitCollectionDidChange: previousTraitCollection];

    if ((self.traitCollection.verticalSizeClass != previousTraitCollection.verticalSizeClass)
        || (self.traitCollection.horizontalSizeClass != previousTraitCollection.horizontalSizeClass)) {

         if (self.traitCollection.verticalSizeClass == UIUserInterfaceSizeClassCompact) {
              [self.imageView setImage:[UIImage imageNamed: @"landscape-image"]];
         } else if (self.traitCollection.verticalSizeClass == UIUserInterfaceSizeClassRegular
                    && self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassCompact) {
             [self.imageView setImage:[UIImage imageNamed: @"portrait-image"]];
         }
    }
}