© 2011 Eric Knapp

Home Simple ScrollView Example

Simple Scrolling View Example

Many of the examples of using UIScrollView for iOS development seem too complicated to me. Here's a simple one to show the basics.

Our goal

  • What we want to do looks like this.

  • We want to be able to scroll around on an image that's bigger than the screen. Lots of apps can do this, what are they doing?

Here's the finished project source code.

Start a Project

  • For this first example of a UIScrollView, I'm going to use the mostly-code approach. There will another version using Interface Builder.
  • Create a new Window-based Application project in Xcode. (I'm using Xcode 4.)

  • Give it a relevant name. This example will be for the iPad.

  • I'm going to pick some settings that will simplify the example. Here I'm setting the app for use in Landscape mode only.

  • Set the compiler to LLVM 2.0

  • The project should be set up now. On to the code.

The Main View Controller

  • Create a UIViewController class. I usually just press Cmd.-N to bring up this.

  • I'm creating mine for the iPad without an XIB file.

  • It will get saved with the project files.

  • Our new UIViewController

Layout the View Controller

  • Since we're not using an XIB file, we have to initialize the views in the loadView method.
  • What does it take to display an image that is bigger than the iPad screen and be able to scroll it so you can see it all?
  • It takes this:
  • That's it! Let's look at the code in detail. The line numbers in the following snippets match the method above except for the comments //... before and after the line we are focused on.
    • To make the code simpler, I am hard-coding the rect for the views. I also have fixed the app in landscape so this will work. This rect will become the frame of the first UIView we add to the controller.
    • The first value in the rect is the x position with respect to the underlying window. It is 0 because the view is all the way to the left.
    • The second value is the y position and is shifted 20 points to account for the top bar on the iPad.
    • The third value, 1024, is the width of the view, which is also the width of the screen.
    • The fourth value, 748, is the height of the view, which is the height of the screen in landscape mode minus 20 for the top bar.
  • Create the first view.
    • Initialize the view object using the frame into a temporary local variable.
    • Then set its backgroundColor to black.
  • Set the view
    • Assign the new view to the controller's view.
    • Release the temporary variable.
  • Load the image.
    • Create an instance of UIImageView with the image named leaves2-50.png.
    • This image is 1512 by 1003 pixels.
    • This view will have a frame of 1512 by 1003. (But, the screen isn't that big. How can we see it all?)
  • Image size
    • Get the size of the image and assign values to local variables for convenience and cleaner code.
  • The Rect for the scroll view.
    • Make the rect for the scroll view. Since it will be added to the first view the origin of the rect is 0, 0.
  • The Scroll View
    • Create an instance of UIScrollView with the scroll rect.
    • The frame of the view is what is visible on the screen.
  • Content size
    • A scroll view's frame is what you can see on the screen. A scroll view's content is what holds the full image. That's what makes a scroll view different, it has a contentSize property. The trick is to set the contentSize to the size of what we want to display. In this example, that is the image view that holds the picture we want to see.
    • That above code sets the contentSize of the scroll view to the full size of the image.
  • Nesting the image view.
    • Add the image view to the scroll view.
  • Nesting the scroll view.
    • Add the scroll view to the base view.
  • Release!
    • Release the image view and the scroll view. We used alloc to make them!

The proof's in the...

  • Here it is scrolled to the right and up.

How does it work?

  • All UIView instances have a frame property. This defines what will show on the screen. The frame values are in coordinate system of the parent view.

  • A UIScrollView has a frame and we set it to the same size as the underlying view's frame.

  • A UIScrollView also has a property named contentSize which is bigger than the frame. This holds whatever content we want.

  • The result! We add our image and image view to the scroll view and we can scroll our picture and see it all.

What's next? That's seems too simple.

  • You are right, it's too simple.
  • What if we wanted to do this?

  • This image is too big to load on the iPad, it would use way too much memory.
  • The solution is to tile the image and only load the tiles that are showing on the screen. That's the topic of another post, stay tuned.