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?

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>>