In this section, you are going to add an instance of UIScrollView to Hypnosister. This scroll view will be a direct subview of the window, and the instance of BNRHypnosisView will be a subview of the scroll view, as shown in Figure 5.2.
Scroll views are typically used for views that are larger than the screen. A scroll view draws a rectangular portion of its subview, and moving your finger, or panning, on the scroll view changes the position of that rectangle on the subview. Thus, you can think of the scroll view as a viewing port that you can move around (Figure 5.3). The size of the scroll view is the size of this viewing port. The size of the area that it can be used to view is the UIScrollView’s contentSize, which is typically the size of the UIScrollView’s subview.
UIScrollView is a subclass of UIView, so it can be initialized using initWithFrame: and it can be added as a subview to another view.
In BNRAppDelegate.m, put a super-sized version of BNRHypnosisView inside a scroll view and add that scroll view to the window:
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch
CGRect firstFrame = self.window.bounds;
BNRHypnosisView *firstView = [[BNRHypnosisView alloc] initWithFrame:firstFrame];
[self.window addSubview:firstView];
// Create CGRects for frames
CGRect screenRect = self.window.bounds;
CGRect bigRect = screenRect;
bigRect.size.width *= 2.0;
bigRect.size.height *= 2.0;
// Create a screen-sized scroll view and add it to the window
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:screenRect];
[self.window addSubview:scrollView];
// Create a super-sized hypnosis view and add it to the scroll view
BNRHypnosisView *hypnosisView = [[BNRHypnosisView alloc] initWithFrame:bigRect];
[scrollView addSubview:hypnosisView];
// Tell the scroll view how big its content area is
scrollView.contentSize = bigRect.size;
self.window.backgroundColor = [UIColor whiteColor];
Build and run your application. You can pan your view up and down, left and right to see more of the super-sized BNRHypnosisView.
When you go to pan around the BNRHypnosisView, the circle color changes. You cannot pan without beginning a touch, so the run loop sends touch events to the UIScrollView and to the BNRHypnosisView. In Chapter 13, you will see how to recognize and handle a “tap” gesture so that it can be distinguished from a touch or a drag.
“Pinch-to-zoom” is also implemented using UIScrollView. It does not take many lines of code, but it involves a technique that we have not covered yet. So adding pinch-to-zoom to Hypnosister will be a challenge in Chapter 7.
Another use for a scroll view is panning between a number of view instances.
In BNRAppDelegate.m, shrink the BNRHypnosisView back to the size of the screen and add a second screen-sized BNRHypnosisView as another subview of the UIScrollView. Set the scroll view’s contentSize to be twice as wide as the screen, but the same height.
// Create CGRects for frames CGRect screenRect = self.window.bounds; CGRect bigRect = screenRect; bigRect.size.width *= 2.0;bigRect.size.height *= 2.0;// Create a screen-sized scroll view and add it to the window UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:screenRect]; [self.window addSubview:scrollView];// Create a super-sized hypnosis view and add it to the scroll viewBNRHypnosisView *hypnosisView = [[BNRHypnosisView alloc] initWithFrame:bigRect];// Create a screen-sized hypnosis view and add it to the scroll view BNRHypnosisView *hypnosisView = [[BNRHypnosisView alloc] initWithFrame:screenRect]; [scrollView addSubview:hypnosisView]; // Add a second screen-sized hypnosis view just off screen to the right screenRect.origin.x += screenRect.size.width; BNRHypnosisView *anotherView = [[BNRHypnosisView alloc] initWithFrame:screenRect]; [scrollView addSubview:anotherView]; // Tell the scroll view how big its content area is scrollView.contentSize = bigRect.size;
Build and run the application. Pan from left to right to see each instance of BNRHypnosisView. Notice that you can stop in between the two views.
Sometimes you want this, but other times, you do not. To force the scroll view to snap its viewing port to one of the views, turn on paging for the scroll view in BNRAppDelegate.m.
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:screenRect]; scrollView.pagingEnabled = YES; [self.window addSubview:scrollView];
Build and run the application. Pan to the middle of two views and notice how it snaps to one or the other view. Paging works by taking the size of the scroll view’s bounds and dividing up the contentSize it displays into sections of the same size. After the user pans, the view port will scroll to show only one of these sections.