This post deals with using UIScrollView for the contents which are larger than iPhone Screen.

Scroll views have two main purposes

1)To let users drag the area of the content they want to display.

2)To let users zoom into or out of the displayed content using pinch gestures.

We are going to see both of the above functionalities in this tutorial.

Lets say we have an image waterfall-wallpaper.jpg, with a size of 1024×768, which is bigger than iPhone screen and we want to display it on screen such that every potion of image can be seen by dragging.

Open .xib file

Drag a UIScrollView and arrange it as shown in figure. You may add a navigation bar also. In this tutorial navigation bar is added.

Now come to .h file and write the following highlighted lines of code

Now move to .m file and write the following code in viewDidLoad method

tempScrollView.minimumZoomScale=0.5;

    tempScrollView.maximumZoomScale=6.0;
	tempScrollView.delegate=self;
    tempScrollView.contentSize=CGSizeMake(1024,768);
	UIImage *image=[UIImage imageNamed:@"waterfall-wallpaper.jpg"];
	imview=[[UIImageView alloc] initWithImage:image];
	[tempScrollView addSubview:imview];

Here maximumZoomScale and minimumZoomScale are maximum and minimun amount of zooming a user can do.

contentSize is the size of the content to be scrolled. In this exanple image size is 1024×768

Also add the following delegate method for pinch gestures

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

{

    return imview;

}

Now it’s time to connect tempScrollView outlet to UIScrollView in .xib file

Connect as shown in figure.

Save and Build the application.

Now try to move the image and you will be able to see any portion of the image.

Pinching in causes the image to zoom in and pinching out causes the image to zoom out.

For those of you testing on simulator, pinching can be performed by holding the “option”  key and moving the finger on trackpad.