xcode 如何将可滚动/可缩放图像添加到基于实用程序的 iPhone 应用程序的 MainView.xib 中

How do I add a scrollable/zoomable image into the MainView.xib of a Utility Based iPhone Application

提问by James Hunt

I have created a Utility based application for the iphone in xcode. Basically i have a mainview and a flipside view.

我在 xcode 中为 iphone 创建了一个基于实用程序的应用程序。基本上我有一个主视图和一个反面视图。

On the main view i have an image as well as a button and a label to go to the flipside view.

在主视图上，我有一个图像以及一个按钮和一个标签，可以转到另一面视图。

However, how do i make the image zoomable/pinchable? All the tutorials and code i have seen has been based on a View Based Application and when i come to copy it in it just comes up with tonnes of errors.

但是，如何使图像可缩放/可捏合？我看到的所有教程和代码都基于基于视图的应用程序，当我将其复制到其中时，会出现大量错误。

For example, i don't have a Classes folder. Can somebody please provide some sample code for this when you choose Utility Based Application from the new project window when you open xcode.

例如，我没有 Classes 文件夹。当您在打开 xcode 时从新项目窗口中选择基于实用程序的应用程序时，有人可以为此提供一些示例代码。

回答by CodaFi

OK, seeing as you want some code, I see it fitting to do a full tutorial (I'm bored, let's do this!).

好的，既然你想要一些代码，我认为做一个完整的教程很合适（我很无聊，让我们这样做吧！）。

Open up Xcode and start a new Utilities based project (DO NOT TRASH THE OLD ONE)and name it 'PinchZoomingImages' (without the quotes). Make sure ARC is turned OFF, I like to code the old fashioned way ;).

打开 Xcode 并启动一个新的基于 Utilities 的项目（不要删除旧项目）并将其命名为“PinchZoomingImages”（不带引号）。确保 ARC 已关闭，我喜欢用老式的方式编写代码；)。

We will be using a UIScrollViewwith a UIImagein it. Go into the appropriately named 'MainViewController.h" and paste in this code:

我们将使用带有UIImage的UIScrollView。进入适当命名的“MainViewController.h”并粘贴以下代码：

    #import "FlipsideViewController.h"

@interface MainViewController : UIViewController <FlipsideViewControllerDelegate, UIScrollViewDelegate> {
    //Both of these iVars are unnecessary with or without ARC, 
    IBOutlet UIScrollView *scrollView;
    IBOutlet UIImageView * demoImageView;
}
//You can use 'strong' instead of retain, they both mean the same thing
@property (nonatomic, retain) IBOutlet UIImageView * demoImageView;
@property (nonatomic, retain) IBOutlet UIScrollView *scrollView;

- (IBAction)showInfo:(id)sender;

@end

We need the UIImageViewand UIScrollViewpointers because we will be defining them in the .m file. Speak of the devil, in the .m, paste this in over the whole thing:

我们需要UIImageView和UIScrollView指针，因为我们将在 .m 文件中定义它们。说到魔鬼，在 .m 中，把这个贴在整个事情上：

#import "MainViewController.h"

@implementation MainViewController
//It is not necessary to @synthesize any properties if your Xcode version is >=4.5
@synthesize scrollView, demoImageView;

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [scrollView setBackgroundColor:[UIColor blackColor]];
    [scrollView setCanCancelContentTouches:NO];
    scrollView.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
    scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    demoImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"PDF-icon.png"]];
    [scrollView addSubview:demoImageView];
    [scrollView setContentSize:CGSizeMake(demoImageView.frame.size.width, demoImageView.frame.size.height)];
    scrollView.minimumZoomScale = 1;
    scrollView.maximumZoomScale = 3;
    scrollView.delegate = self;
    [scrollView setScrollEnabled:YES];

    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}
    - (void)scrollViewDidZoom:(UIScrollView *)aScrollView {
? ? CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)? 
? ? ? ? ? ? ? ? ? ? ? (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;
? ? CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)? 
? ? ? ? ? ? ? ? ? ? ? (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;
? ? mySubView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX, 
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?scrollView.contentSize.height * 0.5 + offsetY);
}
- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for everything but the portrait-upside-down orientation
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

#pragma mark - Flipside View

- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller
{
    [self dismissModalViewControllerAnimated:YES];
}

- (IBAction)showInfo:(id)sender
{    
    //Code created by the Utilities Template
    FlipsideViewController *controller = [[[FlipsideViewController alloc] initWithNibName:@"FlipsideViewController" bundle:nil] autorelease];
    controller.delegate = self;
    controller.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self presentModalViewController:controller animated:YES];
}
-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return demoImageView;
}
@end

SCREECH!Did you notice this line here?:

尖叫！你注意到这里的这条线了吗？：

demoImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"PDF-icon.png"]];

That willcrash your project. you need to drag in an image and copy it's name verbatim (it's cAsE SeNsTiVe) in the [UIImage imageNamed:@"//your image name + extension"]message.

那会使您的项目崩溃。您需要拖入图像并在[UIImage imageNamed:@"//your image name + extension"]消息中逐字复制其名称（视情况而定）。

Also, notice this line in the -(void)viewDidLoadmethod:

另外，请注意-(void)viewDidLoad方法中的这一行：

scrollView.delegate = self;  

This is why we put UIScrollViewDelegatein a pair of these: "<>" in the .h file, because we need to announce to the compiler that we want to "conform" to the UIScrollViewDelegateprotocol.

这就是为什么我们UIScrollViewDelegate在 .h 文件中放入一对这样的：“<>”，因为我们需要向编译器声明我们想要“符合”UIScrollViewDelegate协议。

And finally, hook up those IBOutlets (Please, Please hook up the view one first if it isn't already there. It's a basic and easily forgettable thing):

最后，连接那些 IBOutlets（如果视图不存在，请先连接它。这是一个基本且容易忘记的事情）：

and here's what the final product looks like (Upon Launch):

这是最终产品的样子（发布时）：

(Upon zooming, which you can do by holding down the 'option' button in the simulator and dragging the mouse):

（缩放时，您可以通过按住模拟器中的“选项”按钮并拖动鼠标来实现）：