UIScrollView with pages enabled and device rotation/orientation changes (MADNESS)

Question

I'm having a hard time getting this right.

I've got a UIScrollView, with paging enabled. It is managed by a view controller (MainViewController) and each page is managed by a PageViewController, its view added as a subview of the scrollView at the proper offset. Scrolling is left-right, for standard orientation iPhone app. Works well. Basically exactly like the sample provided by Apple and also like the Weather app provided with the iPhone.

However, when I try to support other orientations, things don't work very well. I've supported every orientation in both MainViewController and PageViewController with this method:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
     return YES;
}

However, when I rotate the device, my pages become quite skewed, and there are lots of drawing glitches, especially if only some of the pages have been loaded, then I rotate, then scroll more, etc... Very messy.

I've told my views to support auto-resizing with

 theView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

But to no avail. It seems to just stretch and distort my views.

In my MainViewController, I added this line in an attempt to resize all my pages' views:

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * ([self.viewControllers count]), self.scrollView.frame.size.height);

    for (int i = 0; i < [self.viewControllers count]; i++) {
        PageViewController *controller = [self.viewControllers objectAtIndex:i];
        if ((NSNull *)controller == [NSNull null])
            continue;

        NSLog(@"Changing frame: %d", i);
        CGRect frame = self.scrollView.frame;
        frame.origin.x = frame.size.width * i;
        frame.origin.y = 0;
        controller.view.frame = frame;
    }
}

But it didn't help too much (because I lazily load the views, so not all of them are necessarily loaded when this executes).

Is there any way to solve this problem?

Answer 1

I have successfully achieved this using below method:

.h file code:

@interface ScrollViewController2 : UIViewController <UIWebViewDelegate, UIScrollViewDelegate> {
NSMutableArray *views;
int currentPage;

IBOutlet UIScrollView *scrollView;
BOOL bolPageControlUsed;
int intCurrIndex;

NSMutableArray *arrayContentData;
NSMutableArray *viewControllers;
}

@property (nonatomic, retain) IBOutlet UIScrollView *scrollView;

@property (nonatomic, retain) NSMutableArray *arrayContentData;
@property (nonatomic, retain) NSMutableArray *viewControllers;
@property (nonatomic) BOOL bolPageControlUsed;
@property (nonatomic) int intCurrIndex;

-(void)bindPages;

- (void)setUpScrollView;
- (void)alignSubviews;

- (NSURLRequest *)getPageFromDocumentsDirectory:(NSString *)pstrPageName;

-(void)initiateScrollView;
-(void)loadScrollViewWithPage:(int)page;

============================================================================================

.m file

@synthesize scrollView;

@synthesize arrayContentData, viewControllers, bolPageControlUsed, intCurrIndex;

- (void)viewDidLoad {
[super viewDidLoad];

[self bindPages];

//[self setUpScrollView];

[self initiateScrollView];
}

#pragma mark -
#pragma mark Bind Pages
-(void)bindPages{
self.arrayContentData = [[NSMutableArray alloc] init];

[self.arrayContentData addObject:@"1.html"];
[self.arrayContentData addObject:@"2.html"];
[self.arrayContentData addObject:@"3.html"];
[self.arrayContentData addObject:@"4.html"];
[self.arrayContentData addObject:@"5.html"];
[self.arrayContentData addObject:@"6.html"];

[self.arrayContentData addObject:@"1.html"];
[self.arrayContentData addObject:@"2.html"];
[self.arrayContentData addObject:@"3.html"];
[self.arrayContentData addObject:@"4.html"];
[self.arrayContentData addObject:@"5.html"];
[self.arrayContentData addObject:@"6.html"];

[self.arrayContentData addObject:@"1.html"];
[self.arrayContentData addObject:@"2.html"];
[self.arrayContentData addObject:@"3.html"];
[self.arrayContentData addObject:@"4.html"];
[self.arrayContentData addObject:@"5.html"];
[self.arrayContentData addObject:@"6.html"];

[self.arrayContentData addObject:@"1.html"];
[self.arrayContentData addObject:@"2.html"];
[self.arrayContentData addObject:@"3.html"];
[self.arrayContentData addObject:@"4.html"];
[self.arrayContentData addObject:@"5.html"];
[self.arrayContentData addObject:@"6.html"];
}

#pragma mark - 
#pragma mark Get Filename from Document Directory
- (NSURLRequest *)getPageFromDocumentsDirectory:(NSString *)pstrPageName {
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentDirectory = [paths objectAtIndex:0];
NSString *yourFilePath = [NSString stringWithFormat:@"%@/Html/%@", documentDirectory, pstrPageName];
NSURL *url = [NSURL fileURLWithPath:yourFilePath];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
return requestObj;
}


#pragma mark -
#pragma mark ScrollView Methods
-(void)initiateScrollView{
views = [[NSMutableArray alloc] initWithCapacity:[self.arrayContentData count]];

NSMutableArray *controllers = [[NSMutableArray alloc] init];
for (unsigned i = 0; i < [self.arrayContentData count]; i++) {
    [controllers addObject:[NSNull null]];
}
self.viewControllers = controllers;
[controllers release];

scrollView.contentSize = CGSizeMake([self.arrayContentData count]*scrollView.bounds.size.width,
                                    scrollView.bounds.size.height);
scrollView.delegate = self;

if(self.intCurrIndex == 0){
    [self loadScrollViewWithPage:self.intCurrIndex];
}
}
-(void)loadScrollViewWithPage:(int)page{
if (page < 0) return;
if (page >= [self.arrayContentData count]) return;

// replace the placeholder if necessary
NSString *strContentName = [self.arrayContentData objectAtIndex:page];

//UIImageView *controller = [viewControllers objectAtIndex:page];
UIWebView *controller = [viewControllers objectAtIndex:page];

if ((NSNull *)controller == [NSNull null]) {

    UIView *v = [[UIView alloc] initWithFrame:scrollView.bounds];
    v.backgroundColor = [UIColor colorWithHue:arc4random()/(float)0x100000000
                                   saturation:0.75
                                   brightness:1.0
                                        alpha:1.0];

    controller = [[UIWebView alloc] initWithFrame:v.bounds];
    controller.delegate = self;
    controller.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    controller.center = CGPointMake(v.bounds.size.width/2, v.bounds.size.height/2);
    [controller loadRequest:[self getPageFromDocumentsDirectory:strContentName]];
    [v addSubview:controller];
    [controller release];

    [scrollView addSubview:v];

    [views addObject:v];
    [viewControllers replaceObjectAtIndex:page withObject:controller];
    [v release];
}

[self alignSubviews];

/*
// add the controller's view to the scroll view
if (nil == controller.superview) {
    CGRect frame = scrollView.frame;
    frame.origin.x = frame.size.width * page;
    //frame.origin.y = 0;
    controller.frame = frame;
    [scrollView addSubview:controller];
}*/
}
-(void)scrollViewDidScroll:(UIScrollView *)sender{
// We don't want a "feedback loop" between the UIPageControl and the scroll delegate in
// which a scroll event generated from the user hitting the page control triggers updates from
// the delegate method. We use a boolean to disable the delegate logic when the page control is used.
if (self.bolPageControlUsed) {
    // do nothing - the scroll was initiated from the page control, not the user dragging
    return;
}
// Switch the indicator when more than 50% of the previous/next page is visible

currentPage = scrollView.contentOffset.x / scrollView.bounds.size.width;
[self loadScrollViewWithPage:currentPage];
}

// At the end of scroll animation, reset the boolean used when scrolls originate from the UIPageControl -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { self.bolPageControlUsed = NO; }

#pragma mark -
#pragma mark setUp ScrollView
- (void)setUpScrollView {
// Set up some colorful content views
views = [[NSMutableArray alloc] initWithCapacity:[self.arrayContentData count]];

for (int i = 0; i < [self.arrayContentData count]; i++) {
    UIView *v = [[UIView alloc] initWithFrame:scrollView.bounds];
    v.backgroundColor = [UIColor colorWithHue:arc4random()/(float)0x100000000
                                   saturation:0.75
                                   brightness:1.0
                                        alpha:1.0];

    NSString *strContentName = [self.arrayContentData objectAtIndex:i];

    UIWebView *controller = [[UIWebView alloc] initWithFrame:v.bounds];
    controller.delegate = self;
    controller.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    controller.center = CGPointMake(v.bounds.size.width/2, v.bounds.size.height/2);
    [controller loadRequest:[self getPageFromDocumentsDirectory:strContentName]];
    [v addSubview:controller];
    [controller release];

    [scrollView addSubview:v];

    [views addObject:v];
    [v release];
}

[self alignSubviews];

[scrollView flashScrollIndicators];
}

#pragma mark -
#pragma mark Align Scroll Subviews
- (void)alignSubviews {
// Position all the content views at their respective page positions
scrollView.contentSize = CGSizeMake([self.arrayContentData count]*scrollView.bounds.size.width,
                                    scrollView.bounds.size.height);

NSUInteger i = 0;
for (UIView *v in views) {
    v.frame = CGRectMake(i * scrollView.bounds.size.width, 0,
                         scrollView.bounds.size.width, scrollView.bounds.size.height);

    for (UIWebView *w in v.subviews) {
        [w setFrame:v.bounds];
    }

    i++;
}
}

#pragma mark -
#pragma mark UIWebView delegate
- (void)webViewDidStartLoad:(UIWebView *)webView {
}
- (void)webViewDidFinishLoad:(UIWebView *)webView { 
}


#pragma mark -
#pragma mark Orientation
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return YES;
}
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
                            duration:(NSTimeInterval)duration {
currentPage = scrollView.contentOffset.x / scrollView.bounds.size.width;
}
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
                                     duration:(NSTimeInterval)duration {
[self alignSubviews];
//NSLog(@"%f", currentPage * scrollView.bounds.size.width);
scrollView.contentOffset = CGPointMake(currentPage * scrollView.bounds.size.width, 0);
}

I hope, it will be helpful to all.

Cheers.

Answer 2

Is it necessary to have a separate UIViewController (PageViewController) for every page in your UIScrollView? Why not let your MainViewController take care of this.

Resizing your views (and your UI in general) after rotating the device is much easier when you build your UI in Interface Builder.

Answer 3

I'm not absolutely sure I understand you right.. however, some thoughts:

The frame property is one thing (A), how the view contents are displayed in there is another (B). The frame CGRect is the (theoretical) boundary of your view in the superview (parent view) .. however, your View does not necessarily need to fill that whole frame area.

Regarding (A): Here we have the UIView's autoresizingMask property to set how the frame is resized when the superview is resized. Which happens when you change the orientation. However, you can usually rely on the default settings (worked for me so far).

Regarding (B): How the view contents are distributet in the view frame is specified by UIView's property contentMode. With this property, you can set that the aspect ratio needs to stay intact. Set it to UIViewContentModeScaleAspectFit for example, or something else..

see here: http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UIView_Class/UIView/UIView.html#//apple_ref/doc/uid/TP40006816-CH3-SW99

PS: I wrote "theoretical", because your view contents may also exceed those frame boundaries - they are only limiting the view when UIView's clipsToBounds property is set to YES. I think it's a mistake that Apple set this to NO by default.

Answer 4

In addition to what Efrain wrote, note that the frame property IS NOT VALID if the view transform is other than the identity transform -- i.e., when the view is rotated.

Of course, you accounted for the fact that your views need to be at a new offset position, right?