How To Use UIScrollView in Your iPhone App

http://content.screencast.com/users/AppShop/folders/public/media/8ee80a69-f7a3-496e-9970-1d8cd58c7da4/mp4h264player.swf




Implementing UIScrollView in Cocoa-Touch

This example starts with a View Based Application with the image already in the Resources group. You can create this yourself using XCode’s “New Project” menu item.

Add IBOutlets

Select the view controller interface file and add the scroll view IBOutlet and the image view property:

#import <UIKit/UIKit.h>

        @interface UseScrollViewViewController : UIViewController {
                IBOutlet UIScrollView *scrollView;
                UIImageView *imageView;
        }

        @property (nonatomic, retain) UIScrollView *scrollView;
        @property (nonatomic, retain) UIImageView *imageView;

        @end

Finish implementing the IBOutlet and property in the implementation file.

#import "UseScrollViewViewController.h"

        @implementation UseScrollViewViewController
        @synthesize scrollView, imageView;

        - (void)dealloc {
                [super dealloc];
                [imageView release];
                [scrollView release];
        }

        @end

Adopt the Delegate Protocol

To use UIScrollView we must adopt the UIScrollViewDelegate protocol. Once we do our view controller may act on behalf of our scroll view. Simple add this after the UIViewController sublcass: <UIScrollViewDelegate&gt.

#import <UIKit/UIKit.h>

        @interface UseScrollViewViewController : UIViewController
<UIScrollViewDelegate> {
                IBOutlet UIScrollView *scrollView;
                UIImageView *imageView;
        }

        @property (nonatomic, retain) UIScrollView *scrollView;
        @property (nonatomic, retain) UIImageView *imageView;

        @end

Implement the Delegate Method viewForZoomingInScrollView

Implementing this method will allow the scroll view to provide the pinching and zooming behavior demonstrated in the video.

#import "UseScrollViewViewController.h"
        @implementation UseScrollViewViewController

...

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

...

        @end

Create the Image View

The image view will be used to display the image on the view. This is pretty straightforward: you will simple create the object and set it to the property we defined earlier in the viewDidLoad method.

- (void)viewDidLoad {
            [super viewDidLoad];
                UIImageView *tempImageView = [[UIImageView alloc] 
                initWithImage:[UIImage imageNamed:@"Beer-Sign-On-Wall.jpg"]];
                self.imageView = tempImageView;
                [tempImageView release];

        }

Set the UIScrollView Properties

Since we are using Interface Builder to add the scroll view we do not need to create it here. But, we will be setting some of the scroll view properties. Note that we add the image view to the scroll view’s subview collection.

- (void)viewDidLoad {

...

                scrollView.contentSize = CGSizeMake
          (imageView.frame.size.width, imageView.frame.size.height);
                scrollView.maximumZoomScale = 4.0;
                scrollView.minimumZoomScale = 0.75;
                scrollView.clipsToBounds = YES;
                scrollView.delegate = self;
                [scrollView addSubview:imageView];
        }

Add Scroll View in Interface Builder

Now all you need to do is add your scroll view in interface builder and hook it up to the IBOutlet you defined in the view controller!

A good article on UIScrollView

Advertisements
This entry was posted in General and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s