This chapter is from the book
This chapter is from the book
This chapter is from the book
Scrolling
Often your views will be larger than the visible area, and you need a way to scroll. For this, you use the UIScrollView class.
A scroll view acts as a container for a larger subview, allowing you to pan around the subview by touching the screen. Vertical and horizontal scroll bars indicate the position in the subview.
Code Listing 4.10 shows an example of using a scroll view.
)
Code Listing 4.10 Using a scroll view.
To create a scroll view:
- Set the frame as usual:
CGRect scrollFrame = CGRectMake(20,90,280,280); UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:scrollFrame];
- Create an image view, assigning it an image that is larger than the scroll view:
UIImage *bigImage = [UIImage imageNamed:@"appleLogo.jpg"]; UIImageView *largeImageView = [[UIImageView alloc] initWithImage:bigImage];
Add the image view to the scroll view, and set the contentSize property of the scroll view:
[scrollView addSubview:largeImageView]; scrollView.contentSize = largeImageView.frame.size;
This is an important step: If you don't tell the scroll view how large its subview is, it won't know how to scroll at all.
Finally, add the scroll view to the main view:
[self.view addSubview:scrollView];
Figure 4.15 shows the scroll view with horizontal and vertical scroll bars indicating the current position in the image view. You can hide these scroll bars using the showsHorizontalScrollIndicator and showsVerticalScrollIndicator properties.
Figure 4.15 Using a scroll view to pan around a large image.
)
Tip
- If you play around with the previous code, you'll notice that if you scroll quickly to the edge of the subview, the scroll view actually moves a little too far before springing back. This behavior is controlled by the bounce property. You can restrict bouncing to the x- or y-axis using the alwaysBounceHorizontal and alwaysBounceVertical properties, or you can disable it entirely by setting bounce to NO.
Zoom
You can also zoom in and out of an image using a scroll view. The minimumZoomScale and maximumZoomScale properties control the scale by which you can zoom in and out. By default, both of these properties are set to the same value (1.0), which disables zooming. You must implement one of the UIScrollViewDelegate methods to return the view that is being zoomed.
To enable zooming:
- Add the UIScrollViewDelegate protocol in the controller.h file:
@interface UITestViewController : UIViewController<UIScrollViewDelegate>
Update the scroll view code to allow you to zoom out by 1/2 and in by 2x:
scrollView.minimumZoomScale = 0.5; scrollView.maximumZoomScale = 2.0; scrollView.delegate = self;
You've also set the delegate to be the controller (self).
- Implement the -viewForZoomingInScrollView: delegate method, and return the image view. Code Listing 4.11 shows the updated code.
Code Listing 4.11 Adding zoom to the scroll view.
)
Paging
Scroll views support the paging of their content—the ability to add multiple subviews as "pages" and then scroll between them as you might turn the pages of a book. Adding a UIPageControl will provide a visual depiction of your current page (Figure 4.16).
)
Figure 4.16 The page control indicating the total number of pages and the current page as a series of dots at the bottom of the iPhone's screen.
To create a page control:
Update the code to remove the image from the scroll view, and set some new properties:
float pageControlHeight = 18.0; int pageCount = 3; CGRect scrollViewRect = [self.view bounds]; scrollViewRect.size.height -= pageControlHeight; myScrollView = [[UIScrollView alloc] initWithFrame:scrollViewRect]; myScrollView.pagingEnabled = YES;
The pagingEnabled property turns paging on for the scroll view.
- Since you have three pages, set the contentView of the scroll view to be three times wider than its frame. You'll also turn off the scroll view indicators:
myScrollView.contentSize = CGSizeMake(scrollViewRect.size.width * pageCount,1); myScrollView.showsHorizontalScrollIndicator = NO; myScrollView.showsVerticalScrollIndicator = NO; myScrollView.delegate = self;
- Set up the page control by creating a frame below the scroll view, and add a target to the page control so that when it is tapped, it will call the changePage: method:
CGRect pageViewRect = [self.view bounds]; pageViewRect.size.height = pageControlHeight; pageViewRect.origin.y = scrollViewRect.size.height; myPageControl = [[UIPageControl alloc] initWithFrame:pageViewRect]; myPageControl.backgroundColor = [UIColor blackColor]; myPageControl.numberOfPages = pageCount; myPageControl.currentPage = 0; [myPageControl addTarget:self action:@selector(changePage:)orControlEvents:UIControlEventValueChanged];
- Call the createPages method by adding three UIViews side by side to the scroll view to represent the three pages.
Set the backgroundColor property of the views.
In a real-world application, these would be more interesting! At this stage, your scroll view will actually work, but you need some more work to get the page control to reflect the current page.
Implement the scrollViewDidScroll: delegate method:
CGFloat pageWidth = sender.frame.size.width; int page = floor((sender.contentOffset.x - pageWidth / 2) / pageWidth) + 1; myPageControl.currentPage = page;
This simply does some math to calculate your current page during the scroll and then updates the page control accordingly.
Finally, implement the changePage: method called when the page control is tapped:
int page = myPageControl.currentPage; CGRect frame = myScrollView.frame; frame.origin.x = frame.size.width * page; frame.origin.y = 0; [myScrollView scrollRectToVisible:frame animated:YES];
This scrolls the scroll view horizontally based on the page you have selected in the page control. Code Listing 4.12 shows the completed code.
Code Listing 4.12 Implementing a page control.
)