How to create paging UIScrollView with "oversized" pages

Question

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

I need something like this.

normal scrolling within the page2 and swap mode with the effect of "rubber band" at the edges of the pages.

The paging effect looks a little more complicated for me, if you scroll quickly, you go to the next page, if you move slowly, you see a new page on the edge and only after a certain point change the page.

Maybe someone can shed some light on a way to handle this, is this even possible using the UIScrollViewDelegate methods, or do I need subclasses?

Answer 1

I'm impressed. It was a lot easier than I thought at the beginning.

A simple solution was to encapsulate each page as a scroll without swapping. And done. There is no need to implement UIScrollViewDelegate, no subclass needed. Three additional lines of code

For 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

---

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

Answer 2

As far as I know, there is no way to achieve this directly using the pagingviews paging property.

You will need to implement your own subclass of UIScrollView in your implementation file, which you need to implement:

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

Determine how many scrolls are viewed using the contentOffset property.

And use UIScrollViews scrollRectToVisible: to implement your own custom scroll functions.

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

The chain of events will be something like this: write down the location of the initial touch, if the touch is moving, find out in which direction it was moving, checking if its x / y coordinate is more or less than its initial position, if the touch moved a sufficient amount across the screen, then scroll view at the specified search call size using scrollRectToVisible:

Answer 3

I used this tutorial -

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

if you want to make a large page, you can increase the size of the PageControlExampleViewControl view in this tutorial. Suppose its width is 360, not 320 by default.