iOS Objective C ScrollView

Question

I am trying to implement a UIScrollView and load it with images from an array of images in Xcode using objective-C, each image in the UIScrollView must be full screen both in portrait and in the landscape mode.I have been able to make it work in portrait mode but not in landscape mode. It should be fullscreen in all iOS device sizes. Below is the code I have written so far. I have UIScrollView in my storyboard, a button and a label. Any answer or pointing to a tutorial that implements this will be appreciated. Thanks in advance.

CGRect screen = [[UIScreen mainScreen] bounds];
CGFloat widthInPixel = screen.size.width;
CGFloat heightInPixel = screen.size.height;
float increaseAmount = widthInPixel;
self.imageScrollView.contentMode = UIViewContentModeScaleAspectFit;
self.imageScrollView.pagingEnabled = YES;
[self.imageScrollView setAlwaysBounceVertical:NO];
[self.imageScrollView setAlwaysBounceHorizontal:NO];
imageViews = [[NSMutableArray alloc] init];
self.imageScrollView.clipsToBounds = YES;
NSInteger imageNumbers  = [self.images count];
UIImageView *image;
for(NSInteger i = 0; i < imageNumbers; i++) {
    CGFloat xOrigin = i * self.view.frame.size.width;
    image = [[UIImageView alloc] initWithFrame:
                          CGRectMake(xOrigin, 0,
                                     widthInPixel,

    self.imageScrollView.frame.size.height)];



    image.contentMode = UIViewContentModeScaleAspectFit;
    image.clipsToBounds = YES;
    image.image = self.images[i];

    [image setAutoresizingMask:
     UIViewAutoresizingFlexibleWidth |
     UIViewAutoresizingFlexibleHeight];

    [self.imageScrollView addSubview:image];
}

self.imageScrollView.contentSize = CGSizeMake(image.frame.size.width *
                                         imageNumbers,

self.imageScrollView.frame.size.height);

Answer 1

You really should learn how to use auto-layout and constraints. Use your favorite search engine and search for ios auto layout tutorial ... you'll find plenty of material.

---

Edit:

Scroll offset is an inherent issue when rotating a scroll view with paging enabled. See the edit below for an implementation of viewWillTransitionToSize .

---

But, to give you an idea, this will do what you want, including auto-resizing on device rotation:

//
//  ViewController.m
//  ScrollingImages
//
//  Created by Don Mag on 7/19/18.
//

#import "ViewController.h"

@interface ViewController ()

@property (strong, nonatomic) IBOutlet UIScrollView *theScrollView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    NSArray *images = @[@"a", @"b", @"c", @"d", @"e"];

    [_theScrollView setPagingEnabled:YES];
    [_theScrollView setAlwaysBounceVertical:NO];
    [_theScrollView setAlwaysBounceHorizontal:NO];

    // we'll use this to hold the most recently added view
    UIImageView *prevImageView = nil;

    for (int i = 0; i < images.count; i++) {

        // create an image view with named image from array
        UIImageView *v = [[UIImageView alloc] initWithImage:[UIImage imageNamed:images[i]]];

        // we want to use auto-layout
        v.translatesAutoresizingMaskIntoConstraints = NO;

        // we want aspect-fit
        v.contentMode = UIViewContentModeScaleAspectFit;

        // add it to the scroll view
        [_theScrollView addSubview:v];

        // set width and height constraints equal to the scroll view
        [[NSLayoutConstraint
          constraintWithItem:v
          attribute:NSLayoutAttributeWidth
          relatedBy:NSLayoutRelationEqual
          toItem:_theScrollView
          attribute:NSLayoutAttributeWidth
          multiplier:1.0
          constant:0.0] setActive:YES];

        [[NSLayoutConstraint
          constraintWithItem:v
          attribute:NSLayoutAttributeHeight
          relatedBy:NSLayoutRelationEqual
          toItem:_theScrollView
          attribute:NSLayoutAttributeHeight
          multiplier:1.0
          constant:0.0] setActive:YES];

        if (i == 0) {  // if it's the first image

            // add top constraint
            [[NSLayoutConstraint
              constraintWithItem:v
              attribute:NSLayoutAttributeTop
              relatedBy:NSLayoutRelationEqual
              toItem:_theScrollView
              attribute:NSLayoutAttributeTop
              multiplier:1.0
              constant:0.0] setActive:YES];

            // and leading constraint
            [[NSLayoutConstraint
              constraintWithItem:v
              attribute:NSLayoutAttributeLeading
              relatedBy:NSLayoutRelationEqual
              toItem:_theScrollView
              attribute:NSLayoutAttributeLeading
              multiplier:1.0
              constant:0.0] setActive:YES];

        } else {

            // constrain leading to previous image view trailing
            [[NSLayoutConstraint
              constraintWithItem:v
              attribute:NSLayoutAttributeLeading
              relatedBy:NSLayoutRelationEqual
              toItem:prevImageView
              attribute:NSLayoutAttributeTrailing
              multiplier:1.0
              constant:0.0] setActive:YES];

            // and top to previous image view top
            [[NSLayoutConstraint
              constraintWithItem:v
              attribute:NSLayoutAttributeTop
              relatedBy:NSLayoutRelationEqual
              toItem:prevImageView
              attribute:NSLayoutAttributeTop
              multiplier:1.0
              constant:0.0] setActive:YES];

        }

        if (i == images.count - 1) {  // if it's the last image

            // add trailing constraint
            [[NSLayoutConstraint
              constraintWithItem:v
              attribute:NSLayoutAttributeTrailing
              relatedBy:NSLayoutRelationEqual
              toItem:_theScrollView
              attribute:NSLayoutAttributeTrailing
              multiplier:1.0
              constant:0.0] setActive:YES];

            // and bottom constraint
            [[NSLayoutConstraint
              constraintWithItem:v
              attribute:NSLayoutAttributeBottom
              relatedBy:NSLayoutRelationEqual
              toItem:_theScrollView
              attribute:NSLayoutAttributeBottom
              multiplier:1.0
              constant:0.0] setActive:YES];

        }

        // reference to most recently added view
        prevImageView = v;

    }

}

- (void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {

    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];

    // execute before rotation

    // get the "index" of the current image in the scroll view
    NSUInteger idx = (unsigned)(_theScrollView.contentOffset.x / _theScrollView.frame.size.width);

    [coordinator animateAlongsideTransition:^(id  _Nonnull context) {
        // execute during rotation

        // update the scroll view's contentOffset, based on the "index"
        self.theScrollView.contentOffset = CGPointMake(idx * self.theScrollView.frame.size.width, 0);

    } completion:^(id  _Nonnull context) {
        // execute after rotation (if additional code wanted)
    }];

}
@end

You can download a working example project here: https://github.com/DonMag/ScrollingImages