A third way that we can fit more into a single view—by making it scroll. Using an instance of the UIScrollView
class, you can add controls and interface elements out beyond the
physical boundaries of the iPhone screen. Unfortunately, Apple provides
access to this object in Interface Builder but leaves out the ability to
actually make it work.
Before closing out this hour, I want to show you how to start using simple scrolling views in a mini-project.
Implementation Overview
When I say simple, I mean it. This project will consist of a scroll view (UIScrollView) with content added in Interface Builder that extends beyond the physical screen, as shown in Figure 1.
To enable scrolling in the view, we need to define a property called contentSize, which describes how large the content is that needs to be scrolled. That’s it.
Setting Up the Project
Begin by creating another View-Based Application. Name the new project Scroller. For this example, we’re going to be adding the scroll view (UIScrollView) as a subview to the existing view (UIView)
in ScrollerViewController.xib. This is a perfectly acceptable approach,
but as you get more experienced with the tools, you might want to just
replace the default view entirely.
Preparing the Outlet
There’s only one thing we need
to do programmatically in this project, and that’s set a property on the
scroll view object. To access the object, we need to create an outlet
for it. Open ScrollerViewController.h and add an outlet for a UIScrollView instance called theScroller, and then declare it as a property. The finished header is shown in Listing 1.
Listing 1.
#import <UIKit/UIKit.h>
@interface ScrollerViewController : UIViewController {
IBOutlet UIScrollView *theScroller;
}
@property (nonatomic, retain) UIScrollView *theScroller;
@end
|
Update the ScrollerViewController implementation file (ScrollerViewController.m) with the corresponding @synthesize directive added after the @implementation directive:
Now that we’ll be able to easily access the scroll view, let’s go ahead and add it in Interface Builder.
Adding a Scroll View
Open the
ScrollerViewController.xib file in Interface Builder, making sure that
the Document window is open (Window, Document) and the view is visible.
Using the Object Library (Tools, Library), drag an instance of a scroll
view into your view. Position the view however you’d like it to appear
and place a label above it that reads Scrolling View (just in case you forget what we’re building).
Adding Objects to the Scroll View
Now that your scroll view is
included in the XIB file, you need to populate it with something!
Objects are often placed in scroll views by writing code that calculates
their position. In Interface Builder, Apple could add the ability to visually position objects in a larger virtual scroll view canvas, but they haven’t.
So, how do we get our
buttons and other widgets onscreen? First, start by dragging everything
that you want to present into the scroll view object. For this example,
I’ve added six labels. You can use buttons, images, or anything else
that you’d normally add to a view.
When the objects are in the
view, you have two options. First, you can select the object, and then
use the arrow keys to position the objects outside of the visible area
of the view to “guesstimate” a position. Or second, you can select each
object in turn and use the Size Inspector (Command+3) to set their X and
Y coordinates manually, as shown in Figure 2.
By the Way
The coordinates of objects
are relative to the view they are in. In this example, left corner of
our scrolling view defines 0,0 (called the “origin point”) for
everything we add to it.
To help you out, these are the X,Y coordinates left centers of my six labels:
Label 1 110,45
Label 2 110,125
Label 3 110,205
Label 4 110,290
Label 5 110,375
Label 6 110,460
As you can see from my final view, shown in Figure 3, the sixth label isn’t visible, so we’ll certainly need some scrolling if we’re going to be able to view it!
Connecting to the Outlet
To connect the scrolling view to theScroller
outlet defined earlier, control-drag from the File’s Owner icon in the
Document window to the scroll view rectangle. When prompted, choose theScroller as your outlet, as shown in Figure 4.
That finishes up our work in Interface Builder. Be sure to save the XIB file, and then switch back into Xcode.
Implementing Scrolling Behavior
For fun, try using Build and
Run to run the application as it stands. It will compile and launch, but
it doesn’t scroll. In fact, it behaves just like we’d expect a typical nonscrolling view to behave. The reason for this is because we need to tell it the horizontal and vertical sizes of the region it is going to scroll. To do this, we need to set the contentSize attribute to a CGSize value. CGSize is just a simple C data structure that contains a height and a width, and we can easily make one using the CGSizeMake(<width>,<height>) function. For example, to tell our scroll view (theScroller) that it can scroll up to 280 points horizontally and 600 points vertically, we could enter the following:
theScroller.contentSize=CGSizeMake(280.0,600.0);
Guess what? That isn’t just what we could do, it’s what we will do! Edit the ScrollerViewController.m file’s viewDidLoad method to read as follows:
- (void)viewDidLoad {
theScroller.contentSize=CGSizeMake(280.0,600.0);
[super viewDidLoad];
}
Where Did You Get the Width and Height Values?
The width we used in this
example is just the width of the scroll view itself. Why? Because we
don’t have any reason to scroll horizontally. The height is just a nice
number we chose to illustrate that, yes, the view is scrolling. In other
words, these are pretty arbitrary! You’ll need to choose them to fit
your own content in the way that works best for your application.
Releasing the Object
Edit the dealloc method to release the scroll view, and we’re done:
- (void)dealloc {
[theScroller release];
[super dealloc];
}
Building the Application
The moment of truth has
arrived. Does the single line of code make magic? Choose Build and Run,
and then try scrolling around the view you created. Everything should
work like a charm.
Yes, this was a quick and dirty project, but there seems to be a lack of information on getting started with UIScrollView,
and I thought it was important to run through a short tutorial. I hope
this gives you new ideas on what you can do to create more feature-rich
iPhone interfaces.
