ios UIImageView 和 UIScrollView 缩放

UIImageView and UIScrollView zooming

提问by adit

Do I actually need a UIPinchGestureRecognizer inside a UIScrollView to have the pinch working? If yes how do I do it? I am trying to implement what flipboard has, where it basically zooms in an image and have the scroll capability after zooming in. How do I do that?

我真的需要在 UIScrollView 中使用 UIPinchGestureRecognizer 才能使捏合工作吗？如果是，我该怎么做？我正在尝试实现翻转板的功能，它基本上可以放大图像并在放大后具有滚动功能。我该怎么做？

UPDATE:

更新：

Here's some code that I have which doesn't call the scroll view delegate

这是我没有调用滚动视图委托的一些代码

CGRect imgFrame;
imgFrame.size.width = originalImageSize.width;
imgFrame.size.height = originalImageSize.height;
imgFrame.origin.x = imageOriginPoint.x;
imgFrame.origin.y = imageOriginPoint.y;

NSData *data = [request responseData];
UIImage * image = [UIImage imageWithData:data];
imageView = [[UIImageView alloc] initWithImage:image];
[imageView setUserInteractionEnabled:YES];
[imageView setBackgroundColor:[UIColor clearColor]];
[imageView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
[imageView setFrame:CGRectMake(0, 0, imgFrame.size.width, imgFrame.size.height)];

UIScrollView * imgScrollView = [[UIScrollView alloc] initWithFrame:imageView.frame];
imgScrollView.delegate = self;
imgScrollView.showsVerticalScrollIndicator = NO;
imgScrollView.showsHorizontalScrollIndicator = NO;
[imgScrollView setScrollEnabled:YES];
[imgScrollView setClipsToBounds:YES];
[imgScrollView addSubview:imageView];
[imgScrollView setBackgroundColor:[UIColor blueColor]];
[imgScrollView setMaximumZoomScale:1.0];

回答by Ignacio Inglese

All you need to do is add your UIImageView(or any view you want to zoom) inside your UIScrollView.

您需要做的就是将您的UIImageView（或您想要缩放的任何视图）添加到UIScrollView.

Set your maximumZoomScaleon your UIScrollViewto any value higher than 1.0f.

将您的maximumZoomScaleon your设置UIScrollView为高于 1.0f 的任何值。

Set yourself as the delegate of your UIScrollViewand return the UIImageViewin the viewForZooming delegate method.

将自己设置为您的委托UIScrollView并UIImageView在 viewForZooming 委托方法中返回。

That's it. No pinch gesture needed, no nothing. UIScrollViewhandles pinch zooming for you.

就是这样。不需要捏手势，什么都不需要。UIScrollView为您处理捏合缩放。

回答by Shrikant Tanwade

Objective C

目标 C

Pinch-zoom Image in Scrollview Steps (Objective C)

滚动视图步骤中的双指缩放图像（目标 C）

1. Scroll View Constraints

1. 滚动视图约束

2. Add ImageView In ScrollView and set Constraints

2.在ScrollView中添加ImageView并设置Constraints

3. Take IBOutlets

3.拿IBOutlets

IBOutlet UIScrollView * bgScrollView;
IBOutlet UIImageView * imageViewOutlet;

4. viewDidLoad Method

4. viewDidLoad 方法

- (void)viewDidLoad
 {
    [super viewDidLoad];

    float minScale=bgScrollView.frame.size.width / imageViewOutlet.frame.size.width;
    bgScrollView.minimumZoomScale = minScale;
    bgScrollView.maximumZoomScale = 3.0;
    bgScrollView.contentSize = imageViewOutlet.frame.size;
    bgScrollView.delegate = self;
}

5. Scroll View Delegate Method

5.滚动视图委托方法

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return imageViewOutlet;
}

Swift

迅速

Pinch-zoom Image in Scrollview Steps (Swift)

滚动视图步骤中的捏缩放图像 (Swift)

1. Scroll View Constraints

1. 滚动视图约束

2. Add ImageView In ScrollView and set Constraints

2.在ScrollView中添加ImageView并设置Constraints

3. Take IBOutlets

3.拿IBOutlets

@IBOutlet weak var bgScrollView : UIScrollView!
@IBOutlet weak var imageView : UIImageView!

4. viewDidLoad Method

4. viewDidLoad 方法

 override func viewDidLoad() {
    super.viewDidLoad()

    let minScale = bgScrollView.frame.size.width / imageView.frame.size.width;
    bgScrollView.minimumZoomScale = minScale
    bgScrollView.maximumZoomScale = 3.0
    bgScrollView.contentSize = imageView.frame.size
    bgScrollView.delegate = self
}

5. Scroll View Delegate Method

5.滚动视图委托方法

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return imageView
}

回答by Novarg

I did a custom image viewer not a long ago without the pinch recognizers. Just UIImageView on top of UIScrollView. There you pass a string with a link to the image and it also has a progress bar. Once that image is finished loading the image is shown. Here's the code:

不久前，我在没有捏合识别器的情况下做了一个自定义图像查看器。只是在 UIScrollView 之上的 UIImageView。在那里你传递一个带有图像链接的字符串，它还有一个进度条。一旦该图像完成加载，就会显示图像。这是代码：

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

- (CGRect)centeredFrameForScrollView:(UIScrollView *)scroll andUIView:(UIView *)rView {
  CGSize boundsSize = scroll.bounds.size;
  CGRect frameToCenter = rView.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;
  }
  return frameToCenter;
}

-(void)scrollViewDidZoom:(UIScrollView *)scrollView
{
  self.theImageView.frame = [self centeredFrameForScrollView:self.theScrollView andUIView:self.theImageView];                               
}

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
  [self.resourceData setLength:0];
  self.filesize = [NSNumber numberWithLongLong:[response expectedContentLength]];
}

-(void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
  [self.resourceData appendData:data];
  NSNumber *resourceLength = [NSNumber numberWithUnsignedInteger:[self.resourceData length]];
  self.progressBar.progress = [resourceLength floatValue] / [self.filesize floatValue];
}

-(void)connectionDidFinishLoading:(NSURLConnection *)connection
{
  self.theImage = [[UIImage alloc]initWithData:resourceData];
  self.theImageView.frame = CGRectMake(0, 0, self.theImage.size.width, self.theImage.size.height);
  self.theImageView.image = self.theImage;
  self.theScrollView.minimumZoomScale = self.theScrollView.frame.size.width / self.theImageView.frame.size.width;
  self.theScrollView.maximumZoomScale = 2.0;
  [self.theScrollView setZoomScale:self.theScrollView.minimumZoomScale];
  self.theScrollView.contentSize = self.theImageView.frame.size;
  self.theLabel.hidden = YES;
  self.progressBar.hidden = YES;
}

-(void)setImageInImageView
{
  NSURLRequest *req = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:self.imageLink]];
  NSURLConnection *conn = [[NSURLConnection alloc]initWithRequest:req delegate:self];
  if (conn)
  {
    self.resourceData = [NSMutableData data];
  }
  else
  {
    NSLog(@"Connection failed: IMageViewerViewController");
  }
}

-(void)loadView
{
  self.filesize = [[NSNumber alloc]init];
  self.progressBar = [[UIProgressView alloc]initWithProgressViewStyle:UIProgressViewStyleBar];
  self.progressBar.frame = CGRectMake(20, 240, 280, 40);
  [self.progressBar setProgress:0.0];
  self.theImageView = [[[UIImageView alloc]initWithFrame:[[UIScreen mainScreen]applicationFrame]]autorelease];
  self.theScrollView = [[[UIScrollView alloc]initWithFrame:[[UIScreen mainScreen]applicationFrame]]autorelease];
  self.theScrollView.delegate = self;
  [self.theScrollView addSubview:self.theImageView];
  self.view = self.theScrollView;
  self.theLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 200, 320, 40)];
  self.theLabel.font = [UIFont boldSystemFontOfSize:15.0f];
  self.theLabel.text = @"Please wait, file is being downloaded";
  self.theLabel.textAlignment = UITextAlignmentCenter;
  self.theLabel.hidden = NO;
  [self.view addSubview:self.progressBar];
  [self.view bringSubviewToFront:self.progressBar];
  [self.view addSubview:self.theLabel];
  [self.view bringSubviewToFront:self.    theLabel];
  [self performSelectorOnMainThread:@selector(setImageInImageView) withObject:nil waitUntilDone:NO];
}

And the header file:

和头文件：

@interface ImageViewerViewController : UIViewController<UIScrollViewDelegate, NSURLConnectionDelegate, NSURLConnectionDataDelegate>

@property (nonatomic, retain) IBOutlet UIImageView *theImageView;
@property (nonatomic, retain) IBOutlet UIScrollView *theScrollView;
@property (nonatomic, retain) NSString *imageLink;
@property (nonatomic, retain) UIImage *theImage;
@property (nonatomic, retain) UILabel *theLabel;
@property (nonatomic, retain) UIProgressView *progressBar;
@property (nonatomic, retain) NSMutableData *resourceData;
@property (nonatomic, retain) NSNumber *filesize;
@end

Hope it helps

希望能帮助到你

回答by PeterK

I guess this answer may be unnecessary but I have had similar problems as @adit and solved it in a very simple way (I think) and maybe someone with similar challenges can use it:

我想这个答案可能是不必要的，但我遇到了与@adit 类似的问题，并以一种非常简单的方式解决了它（我认为），也许有类似挑战的人可以使用它：

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor yellowColor];

    UIImage *imageToLoad = [UIImage imageNamed:@"background_green"];

    self.myImageView = [[UIImageView alloc]initWithImage:imageToLoad];
    self.myScrollView = [[UIScrollView alloc]initWithFrame:self.view.bounds];
    [self.myScrollView addSubview:self.myImageView];
    self.myScrollView.contentSize = self.myImageView.bounds.size;
    self.myScrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    self.myScrollView.minimumZoomScale = 0.3f;
    self.myScrollView.maximumZoomScale = 3.0f;
    self.myScrollView.delegate = self;
    [self.view addSubview:self.myScrollView];
}

- (UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView {
    NSLog(@"viewForZoomingInScrollView");
    return self.myImageView;
} 

My problem was a very simple I had forgot to add self.myScrollView.delegate = self;, which was the reason why i had problems. It took me forever to figure that simple problem out, i guess I did not see the forrest for all the trees :-)

我的问题很简单，我忘记添加了self.myScrollView.delegate = self;，这就是我遇到问题的原因。我花了很长时间才弄清楚这个简单的问题，我想我没有看到所有树木的森林:-)

回答by Popeye

When I was developing my Zooming PDF viewer in a UIScrollView I found out that when running it on the Phone it actually already has the zooming implemented as part of the phone. But you could have a look at this, http://developer.apple.com/library/ios/#samplecode/ZoomingPDFViewer/Introduction/Intro.htmlit is a piece of sample code that tries to implement the functionality for zooming, this is want got me started.

当我在 UIScrollView 中开发我的 Zooming PDF 查看器时，我发现在手机上运行它时，它实际上已经将缩放作为手机的一部分实现了。但是你可以看看这个，http://developer.apple.com/library/ios/#samplecode/ZoomingPDFViewer/Introduction/Intro.html这是一段试图实现缩放功能的示例代码，这个是想让我开始。

回答by medvedNick

For 'snap-image-to-screen-edges' solution @Shrikant Tanwade's worked well, but I wanted some insets. I tried settings constraints' constants, but that does not worked.

对于“捕捉图像到屏幕边缘”的解决方案，@Shrikant Tanwade 效果很好，但我想要一些插图。我尝试设置约束的常量，但这不起作用。

I ended with following solution:

我以以下解决方案结束：

1. same as for Shrikant's - set scrollView, imageView's constraints, set their constants to 0.

2. set insets with scrollView.contentInset = UIEdgeInsetsMake(....

1. 与 Shrikant 的相同 - 设置scrollView,imageView的约束，将它们的常量设置为0。

2. 设置插图 scrollView.contentInset = UIEdgeInsetsMake(....