ios - 无法将图像加载到 ScrollView 中进行缩放和滚动

Question

我正在尝试将图像加载到 ScrollView 中，并向图像添加手势识别器，以便可以放大和滚动它。但不知何故我无法让这个工作。我已经使用 xib 文件构建了应用程序。起初我将 scrollview 放在 xib 文件中 View 的顶部，但因为它没有成功(给了我一个空白的黑屏)然后我尝试以编程方式将 scrollview 放在 .m 文件上。但现在它给了我一个空白的白屏。我正在使用 SDWebImage 下载图像。这是我的代码:

    #import "ZoomAndPanViewController.h"
#import "UIImageView+WebCache.h"

@interface ZoomAndPanViewController ()
@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) UIImage *image;

- (void)centerScrollViewContents;
- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer;
- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer;

@end

@implementation ZoomAndPanViewController

@synthesize scrollView = _scrollView;

@synthesize imageView = _imageView;

- (void)centerScrollViewContents {
    CGSize boundsSize = self.scrollView.bounds.size;
    CGRect contentsFrame = self.imageView.frame;

    if (contentsFrame.size.width < boundsSize.width) {
        contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
    } else {
        contentsFrame.origin.x = 0.0f;
    }

    if (contentsFrame.size.height < boundsSize.height) {
        contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
    } else {
        contentsFrame.origin.y = 0.0f;
    }

    self.imageView.frame = contentsFrame;
}

- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer {
    // Get the location within the image view where we tapped
    CGPoint pointInView = [recognizer locationInView:self.imageView];

    // Get a zoom scale that's zoomed in slightly, capped at the maximum zoom scale specified by the scroll view
    CGFloat newZoomScale = self.scrollView.zoomScale * 1.5f;
    newZoomScale = MIN(newZoomScale, self.scrollView.maximumZoomScale);

    // Figure out the rect we want to zoom to, then zoom to it
    CGSize scrollViewSize = self.scrollView.bounds.size;

    CGFloat w = scrollViewSize.width / newZoomScale;
    CGFloat h = scrollViewSize.height / newZoomScale;
    CGFloat x = pointInView.x - (w / 2.0f);
    CGFloat y = pointInView.y - (h / 2.0f);

    CGRect rectToZoomTo = CGRectMake(x, y, w, h);

    [self.scrollView zoomToRect:rectToZoomTo animated:YES];
}

- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer {
    // Zoom out slightly, capping at the minimum zoom scale specified by the scroll view
    CGFloat newZoomScale = self.scrollView.zoomScale / 1.5f;
    newZoomScale = MAX(newZoomScale, self.scrollView.minimumZoomScale);
    [self.scrollView setZoomScale:newZoomScale animated:YES];
}


- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    CGRect scrollFrame = [[UIScreen mainScreen]applicationFrame];
    self.scrollView = [[UIScrollView alloc]initWithFrame:scrollFrame];
    self.scrollView.delegate = self;

    // Set a nice title
    self.title = @"Image";
    self.imageView = [[UIImageView alloc] init];
    self.image = [[UIImage alloc]init];
    __block UIActivityIndicatorView *activityIndicator;
    [self.imageView setImageWithURL:[NSURL URLWithString:@"http://blablabla"] placeholderImage:nil options:SDWebImageProgressiveDownload progress:^(NSUInteger receivedSize, long long expectedSize)
     {
         if (!activityIndicator)
         {
             NSLog(@"setting up the indicator");
             [self.imageView addSubview:activityIndicator = [UIActivityIndicatorView.alloc initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray]];
             activityIndicator.center = self.imageView.center;
             [activityIndicator startAnimating];
             NSLog(@"indicator start animating");
         }
     }
                          completed:^(UIImage *uiimage, NSError *error, SDImageCacheType cacheType)
     {
         NSLog(@"download image completed");
         [activityIndicator removeFromSuperview];
         activityIndicator = nil;
         self.image = uiimage;
         [self.imageView setImage:self.image];
         NSLog(@"image vs uiimage : %f x %f vs %f vs %f", self.image.size.width, self.image.size.height, uiimage.size.width, uiimage.size.height);
     }];

    // Set up the image we want to scroll & zoom and add it to the scroll view


    self.imageView.frame = (CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=self.image.size};
    [self.scrollView addSubview:self.imageView];

    // Tell the scroll view the size of the contents
    self.scrollView.contentSize = self.image.size;
    NSLog(@"scrollview contentsize %f x %f",  self.image.size.width,  self.scrollView.contentSize.height);
    UITapGestureRecognizer *doubleTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewDoubleTapped:)];
    doubleTapRecognizer.numberOfTapsRequired = 2;
    doubleTapRecognizer.numberOfTouchesRequired = 1;
    [self.scrollView addGestureRecognizer:doubleTapRecognizer];

    UITapGestureRecognizer *twoFingerTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewTwoFingerTapped:)];
    twoFingerTapRecognizer.numberOfTapsRequired = 1;
    twoFingerTapRecognizer.numberOfTouchesRequired = 2;
    [self.scrollView addGestureRecognizer:twoFingerTapRecognizer];
    //[self.view addSubview:self.scrollView];
    [SDWebImageManager.sharedManager.imageDownloader setValue:@"SDWebImage Demo" forHTTPHeaderField:@"AppName"];
    SDWebImageManager.sharedManager.imageDownloader.queueMode = SDWebImageDownloaderLIFOQueueMode;

}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

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

    // Set up the minimum & maximum zoom scales
    CGRect scrollViewFrame = self.scrollView.frame;
    CGFloat scaleWidth = scrollViewFrame.size.width / self.scrollView.contentSize.width;
    CGFloat scaleHeight = scrollViewFrame.size.height / self.scrollView.contentSize.height;
    CGFloat minScale = MIN(scaleWidth, scaleHeight);

    self.scrollView.minimumZoomScale = minScale;
    self.scrollView.maximumZoomScale = 1.0f;
    self.scrollView.zoomScale = minScale;

    [self centerScrollViewContents];
}

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

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    // Return the view that we want to zoom
    return self.imageView;
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    // The scroll view has zoomed, so we need to re-center the contents
    [self centerScrollViewContents];
}

@end

任何关于我在我的代码中做错了什么的线索和任何帮助将不胜感激。

谢谢!

Answer 1

只需创建两个名为 CustomScroll.h 和 .m 的类

在CustomScroll.h中写入

@interface CustomScroll : UIScrollView
{

}

@property (nonatomic,strong) IBOutlet UIView *imageContainer;

并在.m中写入如下代码:

@synthesize imageContainer;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{

 //self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;

}

// Override layoutSubviews to center content

- (void)layoutSubviews 
{

    [super layoutSubviews];

    // center the image as it becomes smaller than the size of the screen

    CGSize boundsSize = self.bounds.size;

    CGRect frameToCenter = imageContainer.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;

    imageContainer.frame = frameToCenter;

    NSLog(@"imageContainer.frame.height=== %f",imageContainer.frame.size.height);

}

-(BOOL)shouldAutorotateToInterfaceOrientation:UIInterfaceOrientation)interfaceOrientation
{

    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);

}

并且在你想要在 .h 文件中滚动图像的类中导入 CustomScroll.h 并制作类似的对象

CustomScroll *customScrl;

并在您的 View 中获取 ScrollView 并将 imageview 放入其中并将 ScrollView 与 customScrl 绑定(bind)(不要忘记绑定(bind)委托(delegate)并在 .h 文件中添加 UIScrollViewDelegate)并在自定义类选项卡中将 CustomScroll 写为类。

现在在 .m 文件中写当你想显示图像或者在 viewDidLoad 中:

// Zoom image inside Scrol view //
// outputImage is my imageview inside Scrollview
    self.customScrl.contentSize= CGSizeMake(outputImage.frame.size.width, outputImage.frame.size.height);
    self.customScrl.maximumZoomScale=5.0;
    self.customScrl.minimumZoomScale=1.0;
    self.customScrl.clipsToBounds=YES;
    self.customScrl.delegate=self;
    [self.customScrl addSubview:outputImage];
    self.customScrl.imageContainer=outputImage;

    [self.view addSubview:customScrl];


#pragma ImageZooming Function

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    UIImageView *zoomImg = outputImage;
    //NSLog(@"zoom img=== %@",zoomImg);

    return zoomImg;
}

按照写的去做。它肯定也对你有用。 :)