How to add a scrollable / scalable image to the MainView.xib utility application for iPhone

Question

I created an application based utility for iphone in xcode. Basically, I have a view of the main and flipside.

In the main view, I have an image, as well as a button and a shortcut, to go back.

However, how to make the image scalable / readable? All the tutorials and code I saw were based on a view-based application, and when I come to copy it, it just contains tons of errors.

For example, I do not have a Classes folder. Can someone please give some sample code for this when you select an application-based utility from a new project window when opening xcode.

Answer 1

OK, seeing that you need some kind of code, I see that it is suitable for a complete tutorial (I'm bored, let it do it!).

Open Xcode and run a new Utility-based project (DON'T MISS THE OLD ONE) and name it "PinchZoomingImages" (without quotes). Make sure ARC is off, I like to code the old fashioned way;).

We will use UIScrollView with UIImage . Go to the appropriate name "MainViewController.h" and paste this code:

#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 UIImageView and UIScrollView pointers because we will define them in the .m file. Talk about the devil, in .m, paste this into everything:

 #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. // eg 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"]]; 

What will break your project. you need to drag the image and copy its name verbatim (this is cAsE SeNsTiVe) into the message [UIImage imageNamed:@"//your image name + extension"] .

Also pay attention to this line in the method -(void)viewDidLoad :

 scrollView.delegate = self; 

This is why we put UIScrollViewDelegate in a couple of them: "<>" in the .h file, because we need to tell the compiler that we want to "conform" to the UIScrollViewDelegate protocol.

And finally, plug in these IBOutlets (please plug in the view first, if it does not already exist. This is a simple and easily forgotten thing):

and here is what the final product looks like (after launch):

(When scaling, which you can do by holding the “option” button in the simulator and dragging the mouse):