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.
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];
Code Listing 4.10 Using a scroll view.
- 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];
You’ll now see 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.
)
)
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 viewForZoomingInScroll View: delegate method, and return the image view. Code Listing 4.11 shows the updated code.
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 
.
)
)
Code Listing 4.11 Adding zoom to the scroll view.
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.showsHorizontal ScrollIndicator = NO; myScrollView.showsVertical ScrollIndicator = 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:UIControlEvent ValueChanged];
- 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.content Offset.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.