Seeing large area of UIScrollView background when zoomed-in & pan down

Question

Problem:

The problem I’m having is when I zoom into my UIScrollView (with paging enabled), and then I pan (scroll?) down – I can drag well past my view and see a large area of the scrollview’s background. The further I'm zoomed-in, the more of the UIScrollView's background is exposed. (I have set the scrollview's background to green so I can tell what I’m looking at).

Not sure why the background area is exposed like that...?

I've played around with setting the scrollview's frame size, bounds size, content size etc. in various locations to no avail.

Unfortunately I cannot post screenshots of whats happening due to being a new user :(

Further details:

My app’s main view contains a full-screen sized UIScrollView populated with a number of UIView subviews. These subviews are added to the scrollview by creating the nib names in a for loop, and then retrieving them using the loadNibNamed method to create & add the UIView.

Each of these UIViews were designed in IB and contain the following: A UIImageView whose image attribute is set to a .jpg image, another smaller UIScrollView below that, and a transparent UIView over top of my imageview which contains a bunch of custom UIButtons.

After I populate my scrollView, I set some of it’s attributes such as contentSize, pagingEnabled, min & maxZoomScale, etc. & then set it’s delegate to self (MainViewController).

MainViewController's relevant methods:

@implementation MainViewController_iPhone

@synthesize scrollView, loadedNibView;

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {   
    [super viewDidLoad];
    [self loadNibs];
    [self initializeOrientation];
}

-(void) loadNibs {
    currentPage = 0;

    for (int i = 0; i < NUM_VIEWS; i++) {
        loadedNibView = [self getNibView:i];        //load the UIView from the associated nib file
        loadedNibView.tag = i;                      //used later to retrieve view for current page
        [scrollView addSubview:loadedNibView];
    }

    //Set the content size to sum of the widths of the all UIViews
    scrollView.contentSize = CGSizeMake(self.view.frame.size.width * NUM_VIEWS, self.view.frame.size.height);
    scrollView.pagingEnabled = YES;
    scrollView.bounces = YES;
    scrollView.clipsToBounds = YES;                 
    //scrollView.alwaysBounceVertical = YES;

    //zoom features
    scrollView.maximumZoomScale = 5.0;
    scrollView.minimumZoomScale = 1;                

    scrollView.delegate = self;                     
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)myScrollView {   
    return [myScrollView viewWithTag:(currentPage)];
}

- (void)scrollViewDidScroll:(UIScrollView *)myScrollView {
    CGFloat pageWidth = myScrollView.frame.size.width;
    currentPage = floor((myScrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
}

- (void)scrollViewDidZoom:(UIScrollView *)myScrollView {
}

- (void)scrollViewWillBeginZooming:(UIScrollView *)myScrollView withView:(UIView *)view
{   
    //zooming & paging do not work well together; disable paging while we're zooming
    myScrollView.pagingEnabled = NO;
}

- (void)scrollViewDidEndZooming:(UIScrollView *)myScrollView withView:(UIView *)view atScale:(float)scale  
{   
    if(scale == 1)  //if we're zoomed entirely back out
    {
    //re-enable paging & reset the content size
    myScrollView.pagingEnabled = YES;
    scrollView.contentSize = CGSizeMake(self.view.frame.size.width * NUM_VIEWS, self.view.frame.size.height);  //without this line, can no longer page through scrollview after zooming
    }
} 


@end

And it's .h:

@interface MainViewController_iPhone : MainViewController <UIScrollViewDelegate> {  
    IBOutlet UIScrollView *scrollView;          //The main ScrollView that scrolls between pages of different images to search
    UIView *loadedNibView;                      //The UIView that we load from it's corresponding nib (i.e. IMG1_iPhone.xib)
    int currentPage;
}

//methods
-(void) loadNibs;
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)myScrollView;
- (void)scrollViewWillBeginZooming:(UIScrollView *)myScrollView withView:(UIView *)view;
- (void)scrollViewDidEndZooming:(UIScrollView *)myScrollView withView:(UIView *)view atScale:(float)scale;
- (void)scrollViewDidZoom:(UIScrollView *)myScrollView;
- (void)scrollViewDidScroll:(UIScrollView *)myScrollView;

//properties
@property (nonatomic, retain) UIScrollView *scrollView;
@property (nonatomic, retain) UIView *loadedNibView;

@end

Any ideas/advice would be greatly appreciated...Thanks!

NMS NMS · Accepted Answer · 2011-03-09T16:33:59

Ok, I figured out what my problem was.

I realized that when I zoomed-in on the first image, it was giving me the weird behaviour with the scrollview background growing as I zoom, but if I zoomed-in on the second image - no weird behaviour. So I started wondering what is the difference between the two images... and came to realize it must be the tags. In the for loop where I load the views & set their tags I was setting the first one to zero, and incrementing from there. Oops - kinda forgot that there are a bunch of other views & objects that have a default tag of zero! So later on when it asked for the view with tag 0 - it was returning some other view & that was the one getting resized instead of my image.

Fix:

#define ZOOM_TAG 1000

...


for (int i = 0; i < NUM_VIEWS; i++) {
    loadedNibView = [self getNibView:i];
    //loadedNibView.tag = i
    loadedNibView.tag = i + ZOOM_TAG;  //used later to retrieve view for current page
    [scrollView addSubview:loadedNibView];
}

...

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)myScrollView {

    //return [myScrollView viewWithTag:(currentPage)];
    return [myScrollView viewWithTag:(currentPage + ZOOM_TAG)];

}

Seeing large area of UIScrollView background when zoomed-in & pan down

1 Answers