Tuesday, June 4, 2013

UIScrollView pagingEnabled example in Objective C (iOS).

UIScrollView pagingEnabled

A Boolean value that determines whether paging is enabled for the scroll view.

@property(nonatomic, getter=isPagingEnabled) BOOL pagingEnabled

Discussion of [UIScrollView pagingEnabled]
If the value of this property is YES, the scroll view stops on multiples of the scroll view’s bounds when the user scrolls. The default value is NO.

UIScrollView pagingEnabled example.
UIScrollView* containerView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
containerView.backgroundColor = [UIColor blackColor];
containerView.scrollEnabled = YES;
containerView.pagingEnabled = YES;
containerView.bounces = NO;
containerView.directionalLockEnabled = YES;

self.view = containerView;

Example of [UIScrollView pagingEnabled].
- (void)viewDidLoad
    self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];

    // 1. setup the scrollview for multiple images and add it to the view controller
    // note: the following can be done in Interface Builder, but we show this in code for clarity
    [scrollView1 setBackgroundColor:[UIColor blackColor]];
    [scrollView1 setCanCancelContentTouches:NO];
    scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    scrollView1.clipsToBounds = YES;        // default is NO, we want to restrict drawing within our scrollview
    scrollView1.scrollEnabled = YES;

    // pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
    // if you want free-flowing scroll, don't set this property.
    scrollView1.pagingEnabled = YES;

    // load all the images from our bundle and add them to the scroll view
    NSUInteger i;
    for (i = 1; i <= kNumImages; i++)
        NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", i];
        UIImage *image = [UIImage imageNamed:imageName];
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

        // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
        CGRect rect = imageView.frame;
        rect.size.height = kScrollObjHeight;
        rect.size.width = kScrollObjWidth;
        imageView.frame = rect;
        imageView.tag = i;    // tag our images for later use when we place them in serial fashion
        [scrollView1 addSubview:imageView];
        [imageView release];

    [self layoutScrollImages];    // now place the photos in serial layout within the scrollview


UIScrollView pagingEnabled example.
#define kViewFrameWidth 330; // i.e. more than 320

CGRect scrollFrame;
scrollFrame.origin.x = 0;
scrollFrame.origin.y = 0;
scrollFrame.size.width = 480;
scrollFrame.size.height = kViewFrameWidth;

UIScrollView* myScrollView = [[UIScrollView alloc] initWithFrame:scrollFrame];
myScrollView.bounces = YES;
myScrollView.pagingEnabled = YES;
myScrollView.backgroundColor = [UIColor redColor];

UIImage* leftImage = [UIImage imageNamed:@"ScrollTestImageL.png"];
UIImageView* leftView = [[UIImageView alloc] initWithImage:leftImage];
leftView.backgroundColor = [UIColor whiteColor];
leftView.frame = CGRectMake(0,0,320,480);

UIImage* rightImage = [UIImage imageNamed:@"ScrollTestImageR.png"];
UIImageView* rightView = [[UIImageView alloc] initWithImage:rightImage];
rightView.backgroundColor = [UIColor blackColor];
rightView.frame = CGRectMake(0, kViewFrameWidth * 2 ,320,480);

UIImage* centerImage = [UIImage imageNamed:@"ScrollTestImageC.png"];
UIImageView* centerView = [[UIImageView alloc] initWithImage:centerImage];
centerView.backgroundColor = [UIColor grayColor];
centerView.frame = CGRectMake(0, kViewFrameWidth ,320,480);

[myScrollView addSubview:leftView];
[myScrollView addSubview:rightView];
[myScrollView addSubview:centerView];

[myScrollView setContentSize:CGSizeMake(kViewFrameWidth * 3, 0)];
[myScrollView setContentOffset:CGPointMake(kViewFrameWidth, 0)];

[leftView release];
[rightView release];
[centerView release];

End of UIScrollView pagingEnabled example article.