How To Use UIScrollView in Your iPhone App

Matthew Campbell, December 7th

Sometimes you would like to be able to display an image or view that is larger than the iPhone or iPod screen. UIScrollView gives you this ability plus the feature of zooming using the pinch gesture. This video will show you how to implement this in your own iPhone app. Source Code follows video.

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.

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

Finish implementing the IBOutlet and property in the implementation file.

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.

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

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.

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.

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!

Discuss in the comments below!

Learn How To Make Your Own iPhone and iPad iOS apps!

If you are completely new to iPhone programming and want to start to developing iPhone apps this ebook will give you everything you need to get started today.

You Get the 5 Essential Things You Need to Make iPhone Apps

This ebook is much different than the other books out there: it really is a *system* that includes ONLY what you need to know to make iPhone applications. Not only that, but you will get some real insight on how to make a product and how to set up your code in the best way the first time.

Plus, you will get plenty of bonuses including exclusive source code projects. For more information, head on over to the website for the ebook:

Head over to How To Make An iPhone App eBook Website website to find out how to get Matt’s eBook and the bonus source code.

Is there a specific reason for not using IB to add your image view with the image to the scrollview?

I tried to add an imageview to the scrollview, added an image using attributes inspector to the image view, connected the file’s owner using an outlet. Then I changed the ViewDidLoad method to remove image view creation and addition statements. But my example doesn’t work. Can you suggest other changes that I may have to make?

Thank you.

This is an AWESOME tutorial. Very easy to understand and EXACTLY what I was looking for. One thing. When the image loads into the UIScrollview, is there a way to make it look to fit the screen? I would like the image loaded to by default zoom to the size of the window it is in. Then allow zooming in. I don’t want to start zoomed in.

Does that make sense?


Great tutorial, really easy to follow.
I have built this “UIscrollview” and one other – “UIpopover” tutorial as separate files but would like to combine both, but I’m running into a spot of bother though combining these to files into one app. Basically would like a scroll view to one side of the interface and a pop up on the other. Just cant seem to get them to work together. Im sure its something to do with the views or delegate, but hoping you could point me in the right direction please?


You must be logged in to post a comment.

  • Hours of videos, demos & screen casts
  • Detailed HANDS-ON Exercises
  • Much Much Much More
  • UIKit
  • Objective-C
  • Core Data
  • More!
  • Learn How To Make An iPhone App right now using my proven system.

    PS: Tons of us are having a blast living off our own code, join us now. Click here to get all the details.