ScrollView with multiple pages

Question

Normally, tutorials of UIScrollView talk about multiple pages with the size of the screen.

Beginning with the first page in the screen and the second page appearing a little in the right side:
Ex01

And when scrolled, the same thing occurs with the second page: the first and the third page appears in the left/right side.
Ex02

This scrollView is "implementable"? There's a way to use pages but with not entire screen width?

are you trying to make a scrollview only scroll horizontally? — Yuliani Noriega, Oct 09 '12 at 04:32
I'm sorry for don't say it in the question. Yes, @yulz, just horizontal scroll. — , Oct 09 '12 at 04:34

score 0 · Answer 1 · answered Oct 09 '12 at 04:37

0

try setting your scroll view content size

scrollView.contentSize = CGSizeMake(W, 1);

remember that "W" has to be a number greater then your scroll view's width in order to scroll horizontal. 1 is where you set the hight of your content size, if you'd like it to scroll vertically you'd make the "1" greater then your scrollview's hight.

answered Oct 09 '12 at 04:37

Yuliani Noriega

1,085
12
23

I already did it. Don't worked. It's still considering every page width as the view width. – Oct 09 '12 at 04:38

score 0 · Accepted Answer · answered Oct 09 '12 at 04:39

0

Yes you can do that, just change the size of your scroll view to your desired size, Content Size as (numberOfPages * width) of your scrollview Also enable pagination

scrollView.pagingEnabled = YES;
scrollView.contentSize = CGSizeMake(numberOfPages * scrollView.frame.size.width, 1);

For more idea, refer to this sample project, just change scrollview size in xib :) Hope it helps :)

answered Oct 09 '12 at 04:39

DivineDesert

6,924
1
29
61

Thanks for the answer, but I think that you don't understood my question. Doing it you will create a page with the view width (320 pt), not exactly what I want: pages with another pages in the left/right side (as in the images). – Oct 09 '12 at 04:44
Basically that's the idea, but when the user scrolls, the main page (in the center), goes to the left, and sets the main page to the right side. It's kinda weird to explain with text. Hope you understand. :P – Oct 09 '12 at 04:46
I understood, Do you want this http://www.cocoacontrols.com/controls/icarousel ? Using simple scrollview, that is not possible – DivineDesert Oct 09 '12 at 04:50
Thanks a lot for the class! It'll do the job! :P – Oct 09 '12 at 04:56

score 0 · Answer 3 · edited May 23 '17 at 12:07

You need to implement a scroll view container (e.g. ScrollViewContainer) to handle -hitTest:withEvent: method:

ScrollViewContainer.h:

@interface BookAlbumScrollViewContainer : UIView {
  UIScrollView * theScrollView_;
}

@property (nonatomic, retain) UIScrollView * theScrollView;

@end

ScrollViewContainer.m:

@implementation BookAlbumScrollViewContainer

@synthesize theScrollView = theScrollView_;

//...

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
  UIView * child = [super hitTest:point withEvent:event];
  if (child == self)
    return self.theScrollView;
  return child;
}

@end

HERE is a related QA on -hitTest:withEvent: method.

When you set your scroll view, set it like:

CGFloat yourScrollViewPageWidth = 280.f;
CGRect yourScrollViewFrame = CGRectMake((320.f - yourScrollViewPageWidth) / 2.f, 0.f, yourScrollViewPageWidth, 200.f);
CGRect theScrollViewContainerFrame = CGRectMake(0.f, 0.f, 320.f, 200.f);

// Your scroll view
yourScrollView_ = [[UIScrollView alloc] initWithFrame:yourScrollViewFrame];
//...
[self.view addSubview:bookScrollView_];

// Your scroll view container to handle touches, it should be over |yourScrollView_|
theScrollViewContainer_ = [ScrollViewContainer alloc];
[theScrollViewContainer_ initWithFrame:theScrollViewContainerFrame];
[theScrollViewContainer_ setBookAlbumScrollView:yourScrollView_];
[self.view theScrollViewContainer_];

ScrollView with multiple pages

3 Answers3