How to create a paging UIScrollView with "oversized" pages

Question

Is there a suggested way to create a paging UIScrollView that has pages wider than the bounds of the UISrollView?

I would need something like this.

normal scrolling within page2 and paging mode with the "rubberband" effect on the edges of the pages.

The paging effect looks a bit complicated for me, if you flick fast you go to the next page, if you slide slow you see the new page at the edge and only after a certain point the page is changed.

Maybe somebody can shed some light on the way to handle this, is this even possible with the sole use of UIScrollViewDelegate methods or do I have to subclass?

Fascist

Answer 1

I'm impressed. This was actually much much easier than I thought in the beginning.

The simple solution was to encapsulate each page in a non-paging scrollview. And done. No need to implement UIScrollViewDelegate, no need to subclass. Three extra lines of code

For the regular sized pages I had something like this:

UIView *myCustomView = [[[UIView alloc] initWithFrame:CGRectMake(totalWidth, 0, width, height)] autorelease];
[mainScroller addSubview:myCustomView];
totalWidth += width;

and now I have this:

UIView *myCustomView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, bigWidth, height)] autorelease];
UIScrollView *secondaryScroller = [[[UIScrollView alloc] initWithFrame:CGRectMake(totalWidth, 0, width, height)] autorelease];
[secondaryScroller setContentSize:myCustomView.frame.size];
[secondaryScroller addSubview:myCustomView];
[mainScroller addSubview:secondaryScroller];
totalWidth += width;

Three lines. Amazing.

---

The view hierarchy:

<UIScrollView: 0x4b32eb0; frame = (0 0; 768 1004); clipsToBounds = YES; autoresize = W+H; layer = <CALayer: 0x4b32d00>; contentOffset: {0, 0}>
   | <UIScrollView: 0x4b32710; frame = (0 0; 768 1004); clipsToBounds = YES; layer = <CALayer: 0x4b35580>; contentOffset: {0, 0}>
   |    | <UIView: 0x4b33f70; frame = (0 0; 1352 1004); layer = <CALayer: 0x4b16c20>>
   | <UIScrollView: 0x4b34790; frame = (768 0; 768 1004); clipsToBounds = YES; layer = <CALayer: 0x4b33e10>; contentOffset: {0, 0}>
   |    | <UIView: 0x4b30fa0; frame = (0 0; 789 1004); layer = <CALayer: 0x4b329f0>>
   | <UIScrollView: 0x4b34920; frame = (1536 0; 768 1004); clipsToBounds = YES; layer = <CALayer: 0x4b33180>; contentOffset: {0, 0}>
   |    | <UIView: 0x4b30d00; frame = (0 0; 1398 1004); layer = <CALayer: 0x4b33120>>
   | <UIScrollView: 0x4b31fe0; frame = (2304 0; 768 1004); clipsToBounds = YES; layer = <CALayer: 0x4b32170>; contentOffset: {0, 0}>
   |    | <UIView: 0x4b34c50; frame = (0 0; 863 1004); layer = <CALayer: 0x4b31f80>>
   | <UIScrollView: 0x4b32460; frame = (3072 0; 768 1004); clipsToBounds = YES; layer = <CALayer: 0x4b325f0>; contentOffset: {0, 0}>
   |    | <UIView: 0x4b323d0; frame = (0 0; 1064 1004); layer = <CALayer: 0x4b32400>>

Fascist

Answer 2

As far as I know, there is no way of achieving this directly by using the scrollviews paging property.

You would have to implement your own UIScrollView subclass and within your implementation file you would need to implement:

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
-(void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event; 

Work out how much the scroll view has scrolled using the contentOffset property.

And make use of UIScrollViews's scrollRectToVisible: to implement your own custom scrolling functionality.

[self scrollRectToVisible:CGRectMake(horizontalScrollAmount,virticalScrollAmount,rectWidth,rectHeight) animated:NO];

The chain of events would be something like: record the location of a beginning touch, if the touch moves, find out which direction it moved by checking to see if its x/y coordinate is greater than or less than its starting position, if the touched moved a sufficient amount across the screen, then scroll the view by your designated paging size using scrollRectToVisible:.

Jacklyn

Answer 3

I used this tutorial -

http://www.edumobile.org/iphone/iphone-programming-tutorials/pagecontrol-example-in-iphone/

if you want to make a larger page, you can increase the size of view of PageControlExampleViewControl in this tutorial. Lets say make its width to 360 instead of default 320.

Gluey