how to make an ImageView zoomable with or without

2020-03-31 06:44发布

问题:

I have an UImageView in my IB and added a map image on that UImageView. I want to make that image pinch zoomable.

Here is my code:

- (void)viewDidLoad
{
   [super viewDidLoad];
    self.title = @"Map";

   self.mapImageView.contentMode = UIViewContentModeScaleAspectFit;
   [self.mapScrollView addSubview:self.mapImageView];
   [self.mapScrollView setContentSize:CGSizeMake(self.mapImageView.frame.size.width, self.mapImageView.frame.size.height)];
   [self.mapScrollView setMinimumZoomScale:1.0];
   [self.mapScrollView setMaximumZoomScale:4.0];
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
   return self.mapImageView;
}

but this doesn't help, I can see a UIScrollView Coming but nothing happen to my image.
Thanks in advance.

回答1:

Add UIScrollViewDelegate in your ViewController.h file

then add following code to your ViewController.m file

No need to add UIPinchGestureRecognizer if your using this code

    - (void)scrollViewDidZoom:(UIScrollView *)scrollView
    {

    UIView* zoomView = [scrollView.delegate viewForZoomingInScrollView:scrollView];

    CGRect zoomViewFrame = zoomView.frame;

    if(zoomViewFrame.size.width < scrollView.bounds.size.width)

    {

    zoomViewFrame.origin.x = (scrollView.bounds.size.width - zoomViewFrame.size.width) / 2.0;

    }

    else

    {
    zoomViewFrame.origin.x = 0.0;
    }

    if(zoomViewFrame.size.height < scrollView.bounds.size.height)

     {      zoomViewFrame.origin.y = (scrollView.bounds.size.height - zoomViewFrame.size.height) / 2.0;

    }
    else

    {
    zoomViewFrame.origin.y = 0.0;
    }
    zoomView.frame = zoomViewFrame;
    }

change viewDidLoad as follows

- (void)viewDidLoad
 {
     [super viewDidLoad];
    self.mapScrollView.delegate = self;
    self.mapScrollView.minimumZoomScale = 1.0;
    self.mapScrollView.maximumZoomScale = 4.0;
    UIImage * myImage= [UIImage imageNamed:@"Background.png"]; //add your image here
    [self.mapImageView setImage:myImage];
    [self.mapImageView sizeToFit];
    self.mapScrollView.contentSize = myImage.size;

}

Specify the imageView to zoom here

- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.mapImageView;
}

To avoid the strange behaviour of UIScrollView on zoomimg use this method

- (void)view:(UIView*)view setCenter:(CGPoint)centerPoint
{
    CGRect viewFrame = view.frame;
        CGPoint contentOffset = self.mapScrollView.contentOffset;

        CGFloat x = centerPoint.x - viewFrame .size.width / 2.0;
        CGFloat y = centerPoint.y - viewFrame .size.height / 2.0;

    if(x < 0)
    {
        contentOffset.x = -x;
        viewFrame .origin.x = 0.0;
    }
    else
    {
        viewFrame .origin.x = x;
    }
    if(y < 0)
    {
        contentOffset.y = -y;
        viewFrame .origin.y = 0.0;
    }
    else
    {
        viewFrame .origin.y = y;
    }

    view.frame = viewFrame ;
    self.mapScrollView.contentOffset = contentOffset;
}

Then call the above method on viewDidAppear

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    CGPoint centerPoint = CGPointMake(CGRectGetMidX(self.mapScrollView.bounds),
                                  CGRectGetMidY(self.mapScrollView.bounds));
    [self view:self.mapImageView setCenter:centerPoint];
}

have a look at this link if you need more clarification. I learned this technique from that link.



回答2:

try with this

    //At ViewDidLoad (OR whare you create your mapImageView)
   UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(scale:)];
   [pinchRecognizer setDelegate:self];
   [mapImageView addGestureRecognizer:pinchRecognizer];

   mapImageView.userInteractionEnabled=YES;




   -(void)scale:(id)sender {
       [YourView bringSubviewToFront:[(UIPinchGestureRecognizer*)sender view]];

       if([(UIPinchGestureRecognizer*)sender state] == UIGestureRecognizerStateEnded) {
           lastScale = 1.0;  //global float variable.
           return;
       }

       CGFloat scale = 1.0 - (lastScale - [(UIPinchGestureRecognizer*)sender scale]);

       CGAffineTransform currentTransform = [(UIPinchGestureRecognizer*)sender view].transform;
       CGAffineTransform newTransform = CGAffineTransformScale(currentTransform, scale, scale);

       [[(UIPinchGestureRecognizer*)sender view] setTransform:newTransform];
   }


回答3:

to do it without scrollView, Add this Snippet to your class:

-(void) addGesturesTo : (UIImageView *) imageView{
    // Register for double-finger dragging to pan the camera.
    UIPinchGestureRecognizer* pinchGestureReconizer = [[UIPinchGestureRecognizer alloc] initWithTarget: self                                                                                                    action: @selector(handlePich:)];
    [imageView addGestureRecognizer:pinchGestureReconizer];
}
- (void) handlePich: (UIPinchGestureRecognizer *) pinchGestureRecognizer{
    CGFloat scale = pinchGestureRecognizer.scale;
    [[pinchGestureRecognizer view]  setTransform:CGAffineTransformScale([pinchGestureRecognizer view].transform, scale, scale)];
    pinchGestureRecognizer.scale = 1.0;
}

Now call addGesturesTo with imageView. As:

[self addGesturesTo:imageView];

To Do it with ScrollView: Follow These steps:

  • add scrollView set delegate to self
  • Add imageView inside scrolView
  • implement - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView; in your class and return imageView