how to zoom in or out in uipageviewcontroller?

Question

I have an uipageviewcontroller and set a child viewcontroller in uipageviewcontroller named as contentviewcontroller.

thePageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl navigationOrientation: UIPageViewControllerNavigationOrientationHorizontal options:nil];

    thePageViewController.delegate = self;
    thePageViewController.dataSource = self;

    thePageViewController.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    contentViewController = [[HBDocumentChildViewController alloc] initWithPDF:PDFDocument];
    contentViewController.page = [modelArray objectAtIndex:0];
    NSArray *viewControllers = [NSArray arrayWithObject:contentViewController];
    [thePageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];

    [self addChildViewController:thePageViewController];
    [self.view addSubview:thePageViewController.view];
    thePageViewController.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    [thePageViewController didMoveToParentViewController:self];
    self.view.gestureRecognizers = thePageViewController.gestureRecognizers;
    self.view.backgroundColor = [UIColor underPageBackgroundColor];

I had done to load pdf files into pages in uipageviewcontroller with the help of a scroll view class(pdfScrollView).The followig is the content class of uipageviewcontroller and initializing the uiscrollview class.

#import "HBDocumentChildViewController.h"

@interface HBDocumentChildViewController ()<UIWebViewDelegate>
{
    int currentPage;
    NSString*localPath;
}

@end

@implementation HBDocumentChildViewController

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Create our PDFScrollView and add it to the view controller.
    CGPDFPageRef PDFPage = CGPDFDocumentGetPage(thePDF, [_page intValue]);
    pdfScrollView = [[PDFScrollView alloc] initWithFrame:self.view.frame];
    [pdfScrollView setPDFPage:PDFPage];
    [self.view addSubview:pdfScrollView];
    self.view.backgroundColor = [UIColor whiteColor];
    self.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    pdfScrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
}

The following is the uiscrollview class,

/*
     File: PDFScrollView.m
 Abstract: UIScrollView subclass that handles the user input to zoom the PDF page.  This class handles swapping the TiledPDFViews when the zoom level changes.
  Version: 2


 */

#import "PDFScrollView.h"
#import "TiledPDFView.h"
#import <QuartzCore/QuartzCore.h>


@interface PDFScrollView ()

// A low resolution image of the PDF page that is displayed until the TiledPDFView renders its content.
@property (nonatomic, weak) UIImageView *backgroundImageView;

// The TiledPDFView that is currently front most.
@property (nonatomic, weak) TiledPDFView *tiledPDFView;

// The old TiledPDFView that we draw on top of when the zooming stops.
@property (nonatomic, weak) TiledPDFView *oldTiledPDFView;

@end



@implementation PDFScrollView
{
    CGPDFPageRef _PDFPage;

    // Current PDF zoom scale.
    CGFloat _PDFScale;
    CGFloat _PDFScaleH;
}


@synthesize backgroundImageView=_backgroundImageView, tiledPDFView=_tiledPDFView, oldTiledPDFView=_oldTiledPDFView;


- (id)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        self.decelerationRate = UIScrollViewDecelerationRateFast;
        self.delegate = self;
    }
    return self;
}


- (void)setPDFPage:(CGPDFPageRef)PDFPage;
{
    CGPDFPageRetain(PDFPage);
    CGPDFPageRelease(_PDFPage);
    _PDFPage = PDFPage;

    // Determine the size of the PDF page.
    CGRect pageRect = CGPDFPageGetBoxRect(_PDFPage, kCGPDFMediaBox);
    float actualHeight = pageRect.size.height;
    float actualWidth = pageRect.size.width;
    float imgRatio = actualWidth/actualHeight;
    float maxRatio = 768.0/911.0;

    if(imgRatio!=maxRatio){
        if(imgRatio < maxRatio){
            imgRatio = 911.0 / actualHeight;
            actualWidth = imgRatio * actualWidth;
            actualHeight = 911.0;
        }
        else{
            imgRatio = 768.0 / actualWidth;
            actualHeight = imgRatio * actualHeight;
            actualWidth = 768.0;
        }
    }
    pageRect.size = CGSizeMake(actualWidth, actualHeight);
    UIGraphicsBeginImageContext(pageRect.size);

    /*
     Create a low resolution image representation of the PDF page to display before the TiledPDFView renders its content.
     */
    UIGraphicsBeginImageContext(pageRect.size);

    CGContextRef context = UIGraphicsGetCurrentContext();

    // First fill the background with white.
    CGContextSetRGBFillColor(context, 1.0,1.0,1.0,1.0);
    CGContextFillRect(context,pageRect);

    CGContextSaveGState(context);
    // Flip the context so that the PDF page is rendered right side up.
    CGContextTranslateCTM(context, 0.0, pageRect.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    // Scale the context so that the PDF page is rendered at the correct size for the zoom level.
    CGContextScaleCTM(context, imgRatio,imgRatio);
    CGContextDrawPDFPage(context, _PDFPage);
    CGContextRestoreGState(context);

    UIImage *backgroundImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();


    if (self.backgroundImageView != nil) {
        [self.backgroundImageView removeFromSuperview];
    }

    UIImageView *backgroundImageView = [[UIImageView alloc] initWithImage:backgroundImage];
    backgroundImageView.frame = pageRect;
    backgroundImageView.contentMode = UIViewContentModeScaleAspectFit;
    [self addSubview:backgroundImageView];
    [self sendSubviewToBack:backgroundImageView];
    self.backgroundImageView = backgroundImageView;

    // Create the TiledPDFView based on the size of the PDF page and scale it to fit the view.
    TiledPDFView *tiledPDFView = [[TiledPDFView alloc] initWithFrame:pageRect scale:imgRatio];
    [tiledPDFView setPage:_PDFPage];

    [self addSubview:tiledPDFView];
    self.tiledPDFView = tiledPDFView;
}


- (void)dealloc
{
    // Clean up.
    CGPDFPageRelease(_PDFPage);
}


#pragma mark -
#pragma mark Override layoutSubviews to center content

// Use layoutSubviews to center the PDF page in the view.
- (void)layoutSubviews 
{
    [super layoutSubviews];

    // Center the image as it becomes smaller than the size of the screen.

    CGSize boundsSize = self.bounds.size;
    CGRect frameToCenter = self.tiledPDFView.frame;

    // Center horizontally.

    if (frameToCenter.size.width < boundsSize.width)
        frameToCenter.origin.x = (boundsSize.width - frameToCenter.size.width) / 2;
    else
        frameToCenter.origin.x = 0;

    // Center vertically.

    if (frameToCenter.size.height < boundsSize.height)
        frameToCenter.origin.y = (boundsSize.height - frameToCenter.size.height) / 2;
    else
        frameToCenter.origin.y = 0;

    self.tiledPDFView.frame = frameToCenter;
    self.backgroundImageView.frame = frameToCenter;

    /*
     To handle the interaction between CATiledLayer and high resolution screens, set the tiling view's contentScaleFactor to 1.0.
     If this step were omitted, the content scale factor would be 2.0 on high resolution screens, which would cause the CATiledLayer to ask for tiles of the wrong scale.
     */
    self.tiledPDFView.contentScaleFactor = 1.0;
}


#pragma mark -
#pragma mark UIScrollView delegate methods

/*
 A UIScrollView delegate callback, called when the user starts zooming.
 Return the current TiledPDFView.
 */
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.tiledPDFView;
}

/*
 A UIScrollView delegate callback, called when the user begins zooming.
 When the user begins zooming, remove the old TiledPDFView and set the current TiledPDFView to be the old view so we can create a new TiledPDFView when the zooming ends.
 */
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
{
    // Remove back tiled view.
    [self.oldTiledPDFView removeFromSuperview];

    // Set the current TiledPDFView to be the old view.
    self.oldTiledPDFView = self.tiledPDFView;
    [self addSubview:self.oldTiledPDFView];
}


/*
 A UIScrollView delegate callback, called when the user stops zooming.
 When the user stops zooming, create a new TiledPDFView based on the new zoom level and draw it on top of the old TiledPDFView.
 */
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
    // Set the new scale factor for the TiledPDFView.
    _PDFScale *= scale;
    // Calculate the new frame for the new TiledPDFView.
    CGRect pageRect = CGPDFPageGetBoxRect(_PDFPage, kCGPDFMediaBox);
    pageRect.size = CGSizeMake(pageRect.size.width*_PDFScale, pageRect.size.height*_PDFScale);

    // Create a new TiledPDFView based on new frame and scaling.
    TiledPDFView *tiledPDFView = [[TiledPDFView alloc] initWithFrame:pageRect scale:_PDFScale];
    [tiledPDFView setPage:_PDFPage];

    // Add the new TiledPDFView to the PDFScrollView.
    [self addSubview:tiledPDFView];
    self.tiledPDFView = tiledPDFView;
}


@end

The page rendering is working correctly,but i didn't get the zoom in/out in the page displayed view.The uiscrollview delegate method not working in uipageviewcontroller.Please help me to find the solution for this problem.

Furfur

Answer 1

I have done the scroll and zoom in the uipageviewcontroller. I have changed the above UIPinchGestureRecognizer method for zoomIn and zoom out to the current page size.

-(void)pinchDetected:(UIPinchGestureRecognizer *)pinchRecognizer

{   
    if([pinchRecognizer state] == UIGestureRecognizerStateBegan) {
        // Reset the last scale, necessary if there are multiple objects with different scales
        lastScale = [pinchRecognizer scale];
    }

    if ([pinchRecognizer state] == UIGestureRecognizerStateBegan ||[pinchRecognizer state] == UIGestureRecognizerStateChanged)
    {
        CGFloat currentScale = [[[pinchRecognizer view].layer valueForKeyPath:@"transform.scale"] floatValue];
        // Constants to adjust the max/min values of zoom
        const CGFloat maxScale = 1.5;
        const CGFloat minScale = 1.0;

        CGFloat newScale = 1 -  (lastScale - [pinchRecognizer scale]);
        newScale = MIN(newScale, maxScale / currentScale);
        newScale = MAX(newScale, minScale / currentScale);
        thePageViewController.view.transform = CGAffineTransformScale(thePageViewController.view.transform, newScale, newScale);
        lastScale = [pinchRecognizer scale];  // Store the previous scale factor for the next pinch gesture call
    }
}

Then,I have added the [pdfScrollView setScrollEnabled:YES];,[pdfScrollView setContentSize:CGSizeMake(768, 1100)];code in the viewDidLoad of the content viewcontroller(HBDocumentChildViewController)for scrolling the contentview in the uipageviewcontroller class.

 - (void)viewDidLoad
    {
        [super viewDidLoad];

        // Create our PDFScrollView and add it to the view controller.
        CGPDFPageRef PDFPage = CGPDFDocumentGetPage(thePDF, [_page intValue]);
        pdfScrollView = [[PDFScrollView alloc] initWithFrame:self.view.frame];
         pdfScrollView.bouncesZoom = YES;
        [pdfScrollView setScrollEnabled:YES];
        [pdfScrollView setContentSize:CGSizeMake(768, 1100)];
        [pdfScrollView setPDFPage:PDFPage];
        [self.view addSubview:pdfScrollView];
        self.view.backgroundColor = [UIColor whiteColor];
        self.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        pdfScrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        pdfScrollView.delegate = pdfScrollView;

    }

Try this code for zoomin and zoomout to the current page size and scrolling the content of the uipageviewcontroller.

Furfur

#29788041 I am using similar code, but in Swift. mind helping me out – Drawers

Answer 2

Try This

UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchDetected:)];
[thePageViewController addGestureRecognizer:pinchRecognizer];
pinchRecognizer.delegate=self;

The Method Is

-(void)pinchDetected:(UIPinchGestureRecognizer *)pinchRecognizer
{
    CGFloat scale = pinchRecognizer.scale;
    thePageViewController.transform = CGAffineTransformScale(thePageViewController.transform, scale, scale);
    pinchRecognizer.scale = 1.0;
}

Figge

@shailni: where can i write this code in my project will u please tell me i'm new in developement – Enginery

in viewdidload after creating pageview controller you can write the code and check it... – Figge

@shalini: Thank you for your valuable reply.I had tried this and could zoom the page.But there is a problem that,when it is zoom in there is no zoom limit. I need to zoomin a limit and zoomout is in the current page size,that means no zoom out from the current page size and also need to scroll the page,when it is zooming and lock the scroll in the zoomout to the current page. Can you help me to find the answer? – Furfur

@shalini can u please tell me how did you implement this i'm writing this code in viewDidLoad Of PageViewController but getting some errors that is : "no visible interface for UIPageViewController decleares the selector 'addGestureRecognizer". And one more error when writing the method of pinchDeteched there is an error that is "property transform not found on object of type 'UIPageViewController", plese tell me how can i fix this. – Enginery

You have to include the 'UIGestureRecognizerDelegate' in the class interface.Then 'thePageViewController.transform = CGAffineTransformScale(thePageViewController.transform, newScale, newScale);' changed to, thePageViewController.view.transform = CGAffineTransformScale(thePageViewController.view.transform, newScale, newScale);.Hope this is help to you. – Furfur