The UIScrollView Class: Before You Begin

If you are a new visitor to our site, please read the Getting Started guide.

A Scroll View is a container for holding other controls (buttons, text fields, images, etc.) that scroll up and down the iDevice’s screen. You drag it from the Object Library and place it on a View. Once you’ve place the Scroll View on the View, you adjust it to make room for control (s) that you don’t want to be inside the Scroll View control. A Scroll View control provides these functions:

  1. Scrolling Content: This function enables the user to scroll vertically content that will not fit in the viewing area of a View.
  2. Zooming Content: This function enables the user to use pinch gestures to zoom in and out. For example, an image.
  3. Paging Content: This function enable the user to scroll back and forth to a single screen of content at a time. This gesture is known as paging.

Take a look at Figure 1, the Label control that says First Scene is outside the Scroll View control, so when you scroll it will stay put at the top of the view and controls place on the Scroll View will scroll beneath it. As you can see in Figure 1, a scroll bar appear on the right edge of the view when you click-drag the view to scroll it.

scrollcontent-fig7

Making the Scroll View scroll is a two-step process. First you’ll have to declare and connect an IBOutlet property in your view controller’s header file for the scroll view control.

@property (strong, nonatomic) IBOutlet UIScrollView *theScroller;

Second, you’ll have to set the scroll view’s control contentSize property in the view controller implementation file’s viewDidAppear method.

self.scrollView.contentSize = CGSizeMake(320,700);

The CGSizeMake() is a C data structure for setting the Scroll View control’s width and height. The number 320 is the control’s width and 700 is the control’s height. Basically, these numbers tells the Scroll View that it can scroll up to 320 points horizontally and 700 points vertically. If you want the Scroll View to scroll horizontally or vertically, you’ll have to set its width or height to a number greater than 320 or 568. These numbers (320 and 568) are the iPhone view’s width and height. As you can see from source code above, the Scroll View control will not scroll horizontally; however, it will scroll vertically up to 700 points. If you are developing for the iPad, you’ll have to set the Scroll View control’s width and height to any number greater than 320 and 600.

Say you placed several controls on a view only to realize that the view should be scrollable. Well, Interface Builder has built-in support for taking an existing view and wrapping it in a Scroll View. You do that by highlighting all the controls you’ve place on a view, then select Editor→Embed→Scroll View. Interface Builder will automatically create a new Scroll View and stick all the UI controls in the same location on the Scroll View.

Create an Xcode Project

In this workshop series you will learn how to implement above mentioned scroll view functions by first executing steps laid out below to create a new Xcode project.

  1. Launch Xcode and press (command + shift + N) keys on your keyboard or select File→New→Project.. Xcode will display a window asking you to choose a template for your new project. Select the Tabbed Application template, then click the Next button.
  2. Xcode display a window asking you to choose options for your new project, as shown step 2 of the image below. Enter ScrollContent in the Product Name field. Enter The App Lady in the Organization Name field. Don’t type anything in the Class Prefix field; however, select iPhone from the Devices menu. When you are done, click the Next button.
    scrollcontent-fig00
    Figure 1
  3. The last window Xcode display is asking you where you’d like to save the project on your computer. Select the iOS7 Projects folder, then click the Create button. Xcode goes to work to create the project files and resource and display them in the Project Navigator pane.
    scrollcontent-fig01
    Figure 2

Now that you’ve created the Xcode project you’ll use throughout this series, you are ready to learn how to implement the “Scrolling Content” function of the scroll view control.

Workshop Objective

In the first workshop of the UIScrollView Class series, you will learn how to make the Scroll View scroll it content vertically and horizontally.

Add Label On The View

The first thing I want you to do is click the Main.storyboard file, then replace the first scene’s controls with a Label control. In the Attribute Inspector pane, change the the control’s Color and Font attribute to what’s shown in Figure 3.

 scrollcontent-fig02
Figure 3: The Label control and its attributes

Add a Scroll View on The View

Drag a Scroll View control from the Object Library and place it beneath the Label control, as shown in Figure 4. Since the Label control is outside the Scroll View control it will won’t scroll with controls you’ll put on the Scroll View. You will see this in action in a minute.

scrollcontent-fig03
Figure 4: Adding a Scroll View on scene 1

Add Controls on The Scroll View

Now that you’ve added a Scroll View control on the first scene, add controls shown in Figure 5 on the Scroll View.

scrollcontent-fig04
Figure 5: Connect the Scroll View in IB

Create an Outlet For The Scroll View Control

Use the Assistant Editor to create an outlet for the Scroll View control. There’s no need to create outlets for controls you placed on the Scroll View though; they are only for demonstrating the scrolling ability of the Scroll View control.

scrollcontent-fig05
Figure 6: Scroll View connection

Set The Image View Attribute

You have to add an image in the Image View control you placed on the Scroll View. You could use your own or this one.

fish

To add above image in the Image View control you’ll have to do the following.

  1. Click the Images.xcassets folder.
  2. Click-drag the fish image and drop it in the right hand pane of the Images folder, as shown in Figure A.
  3. Figure B shows what the Images.xcassets folder look like now that you’ve added an image in it.
  4. Click the Main.storyboard file, then click the first scene’s Image View control.
  5. In the Attribute Inspector pane, select fish from the Image attribute’s menu. As you can see in Figure C, the image is loaded in the Image View control.
scrollcontent-fig06a scrollcontent-fig06b scrollcontent-fig06c
Figure A Figure B Figure C

Set The Scroll View ContentSize Attribute

In order for the Scroll View to scroll, you must set its contentSize attribute in the viewDidAppear method. Click the FirstViewController.m file and add this statement in the viewDidAppear method.

- (void)viewDidAppear:(BOOL)animated
{
  self.scrollView.contentSize = CGSizeMake(320,700);
}

What you’ve done is set the Scroll View’s width (320) and height (700). Since we want the Scroll View to scroll vertically, we must set its height to a number greater than the View’s height, which is 568.

Take The App For a Spine

Now is a good time as any to take the app for a test drive to see the Scroll View in action. When the app is loaded in the simulator, click-drag the view’s background or the scroll bar up and down to scroll the view (see Figure 7). Next, click a Text Field and scroll the view to see controls hidden by the keyboard.

scrollcontent-fig7
Figure 7: The Scroll View in action

If you want the Scroll View to scroll horizontally, you’d have to set its width to a number greater than the View’s width, which is 320. For example; if you were to replace the statement you entered in the viewDidAppear method with this one, the Scroll View will scroll vertically and horizontally.

self.scrollView.contentSize = CGSizeMake(420,700);

That’s it! Now you know how to make the Scroll View scroll its content vertically and horizontally.