Swiping Images with Page Control in Iphone (Part 2)

Question

I am trying to make practice app where i can scroll images with page control. I am able to scroll images and able to include the page control. But the problem i face is i am not able to interlink the two. Meaning to say when I scroll the images, the page control is not affected and when i change the page control, the scrolling of the images is unaffected.

I am referring to this website: http://www.raywenderlich.com/10518/how-to-use-uiscrollview-to-scroll-and-zoom-content

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIScrollViewDelegate>

@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;
@property (nonatomic, strong) IBOutlet UIPageControl *pageControl;

@property (nonatomic, strong) NSArray *pageImages;
@property (nonatomic, strong) NSMutableArray *pageViews;

- (void)loadVisiblePages;
- (void)loadPage:(NSInteger)page;
- (void)purgePage:(NSInteger)page;
@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize scrollView = _scrollView;
@synthesize pageControl = _pageControl;

@synthesize pageImages = _pageImages;
@synthesize pageViews = _pageViews;

- (void)loadPage:(NSInteger)page {
    if (page < 0 || page >= self.pageImages.count) {
        // If it's outside the range of what you have to display, then do nothing
        return;
    }

    // 1
    UIView *pageView = [self.pageViews objectAtIndex:page];
    if ((NSNull*)pageView == [NSNull null]) {
        // 2
        CGRect frame = self.scrollView.bounds;
        frame.origin.x = frame.size.width * page;
        frame.origin.y = 0.0f;

        // 3
        UIImageView *newPageView = [[UIImageView alloc] initWithImage:[self.pageImages objectAtIndex:page]];
        newPageView.contentMode = UIViewContentModeScaleAspectFit;
        newPageView.frame = frame;
        [self.scrollView addSubview:newPageView];
        // 4
        [self.pageViews replaceObjectAtIndex:page withObject:newPageView];
    }
}

- (void)loadVisiblePages {
    // First, determine which page is currently visible
    CGFloat pageWidth = self.scrollView.frame.size.width;
    NSInteger page = (NSInteger)floor((self.scrollView.contentOffset.x * 2.0f + pageWidth) / (pageWidth * 2.0f));

    // Update the page control
    self.pageControl.currentPage = page;

    // Work out which pages you want to load
    NSInteger firstPage = page - 1;
    NSInteger lastPage = page + 1;

    // Purge anything before the first page
    for (NSInteger i=0; i<firstPage; i++) {
        [self purgePage:i];
    }

    // Load pages in our range
    for (NSInteger i=firstPage; i<=lastPage; i++) {
        [self loadPage:i];
    }

    // Purge anything after the last page
    for (NSInteger i=lastPage+1; i<self.pageImages.count; i++) {
        [self purgePage:i];
    }
}

- (void)purgePage:(NSInteger)page {
    if (page < 0 || page >= self.pageImages.count) {
        // If it's outside the range of what you have to display, then do nothing
        return;
    }

    // Remove a page from the scroll view and reset the container array
    UIView *pageView = [self.pageViews objectAtIndex:page];
    if ((NSNull*)pageView != [NSNull null]) {
        [pageView removeFromSuperview];
        [self.pageViews replaceObjectAtIndex:page withObject:[NSNull null]];
    }
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // Load the pages that are now on screen
    [self loadVisiblePages];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // 1
    self.pageImages = [[NSArray alloc] initWithObjects:
                       [UIImage imageNamed:@"1.jpeg"],
                       [UIImage imageNamed:@"2.jpeg"],
                       [UIImage imageNamed:@"3.jpeg"],
                       nil];

    NSInteger pageCount = self.pageImages.count;

    // 2
    self.pageControl.currentPage = 0;
    self.pageControl.numberOfPages = pageCount;

    // 3
    self.pageViews = [[NSMutableArray alloc] init];
    for (NSInteger i = 0; i < pageCount; ++i) {
        [self.pageViews addObject:[NSNull null]];
    }
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    // 4
    CGSize pagesScrollViewSize = self.scrollView.frame.size;
    self.scrollView.contentSize = CGSizeMake(pagesScrollViewSize.width * self.pageImages.count, pagesScrollViewSize.height);

    // 5
    [self loadVisiblePages];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

The third image is not appearing and still not able to link the pagecontrol and the scrolling of the images. Need some guidance on this...

put a break point at scrollViewDidScroll method if its calling or not? — Manish Agrawal, Oct 25 '12 at 07:22
I put NSLog(@"Hello"); and it is not appearing in the output... — lakshmen, Oct 25 '12 at 07:28
ok, in your viewDidLoad method put scrollView.delegate = self — Manish Agrawal, Oct 25 '12 at 07:33
solves the current issue of linking the pageControl and scrollView.. but the images are not aligned on the same line... — lakshmen, Oct 25 '12 at 08:06

George · Accepted Answer · 2012-10-25T07:32:20.703

1

In loadVisiblePages , change this line:

NSInteger page = (NSInteger)floor((self.scrollView.contentOffset.x * 2.0f + pageWidth) / (pageWidth * 2.0f));

with this line:

NSInteger page = self.scrollView.contentOffset.x / self.scrollView.frame.size.width;

Hope this helps.

Cheers!

EDIT: I think you haven't set [scrollView setDelegate:self]; in viewDidLoad

edited Oct 25 '12 at 07:32

answered Oct 25 '12 at 07:16

George

4,029
1
23
31

solves the current issue of linking the pageControl and scrollView.. but the images are not aligned on the same line... – lakshmen Oct 25 '12 at 08:05
Ok , so we're making progress. What do you mean on the same line , you want them displayed horizontally , right? Cause I see you are using a static ` y = 0;` which is correct for this case. If you want them vertically , x should be constant and y should vary. – George Oct 25 '12 at 08:09
not on the same line meaning to say that, one image is positioned at y = 0 while the next image is placed at y = -5 for example and the next image is positioned at y = 0 again... btw the images are of different size.. does it matter? – lakshmen Oct 25 '12 at 08:12
Yes , that is what is giving you this difference. If instead of using `newPageView.contentMode = UIViewContentModeScaleAspectFit;` you would be using `UIViewContentModeTop` you would get them aligned on top. – George Oct 25 '12 at 08:38
if i want the image to fill up the wholescreen, how to do it? – lakshmen Oct 25 '12 at 08:49
well , you need to figure out how you want the images to be displayed. If you have the images of the exact dimensions of the screen , you are ok with `UIViewContentModeTop` . Else , you can scale the images to fill the view using `UIViewContentModeScaleAspectFill`. The first requirement would be to make the scrollView as large as the screen and the image views also of that size. – George Oct 25 '12 at 09:59

Swiping Images with Page Control in Iphone (Part 2)

1 Answers1

Linked