iOS ScrollView Example with Paging

UIScrollView lets a user display content that is larger than the device window. You can create a Scroll View either programmatically or using the Interface Builder. Setting up a scroll view is easy, all you have to do a put other views inside the scroll view and set the size of the scroll view using the contentSize property. As long as the size of the scroll views is bigger than the screen window it will scroll. But its always recommended to set the scroll view width or the height same as the window so that scroll happens only in one direction such as horizontally or vertically for better user experience.

You can create a paging scroll view by setting the pagingEnabled property to true. In addition to that the scroll view can be positioned to a specific page in case there is paging or to a given origin using the contentOffset property or the setContentOffset method. It has a bunch of delegate methods to notify us about the state of the view such as
  • scrollViewDidScroll 
    • Gets called when the contents of the scroll view get scrolled. 
  • scrollViewDidEndDecelerating 
    • Gets called when the contents stop scrolling. 
  • scrollViewWillEndDragging 
    • Gets called when the dragging is finished. Dragging not same as scrolling basically the user moves the finger from one to location to another without giving any momentum to the move. 
In this example we generate the scroll view programmatically and add some other views such as labels and text. Also we create about 10 pages and set the paging to true. When the user scrolls or drags we listen to the delegate methods and then try to calculate the page number they are on and print that to the console log.

iOS ScrollView Example with horizontal scrolling
iOS ScrollView with paging enabled

Interface file for the view controller - MyScrollViewController.h

#import <UIKit/UIKit.h>

@interface UITextFieldViewController : UIViewController <UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *myScrollView;


Implementation file for the view controller - MyScrollViewController.m

#import "UITextFieldViewController.h"

@interface UITextFieldViewController ()


@implementation UITextFieldViewController

@synthesize myScrollView;

- (void)viewDidLoad
    [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
    //set the background to white color
    self.view.backgroundColor = [UIColor whiteColor];
    //initialize and allocate your scroll view
    self.myScrollView = [[UIScrollView alloc]
                         initWithFrame:CGRectMake(0, 0,
    //set the paging to yes
    self.myScrollView.pagingEnabled = YES;
    //lets create 10 views
    NSInteger numberOfViews = 10;
    for (int i = 0; i < numberOfViews; i++) {
        //set the origin of the sub view
        CGFloat myOrigin = i * self.view.frame.size.width;
        //create the sub view and allocate memory
        UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(myOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
        //set the background to white color
        myView.backgroundColor = [UIColor whiteColor];
        //create a label and add to the sub view
        CGRect myFrame = CGRectMake(10.0f, 10.0f, 200.0f, 25.0f);
        UILabel *myLabel = [[UILabel alloc] initWithFrame:myFrame];
        myLabel.text = [NSString stringWithFormat:@"This is page number %d", i];
        myLabel.font = [UIFont boldSystemFontOfSize:16.0f];
        myLabel.textAlignment =  NSTextAlignmentLeft;
        [myView addSubview:myLabel];
        //create a text field and add to the sub view
        myFrame.origin.y += myFrame.size.height + 10.0f;
        UITextField *myTextField = [[UITextField alloc] initWithFrame:myFrame];
        myTextField.borderStyle = UITextBorderStyleRoundedRect;
        myTextField.placeholder = [NSString stringWithFormat:@"Enter data in field %i", i];
        myTextField.tag = i+1;
        [myView addSubview:myTextField];
        //set the scroll view delegate to self so that we can listen for changes
        self.myScrollView.delegate = self;
        //add the subview to the scroll view
        [self.myScrollView addSubview:myView];
    //set the content size of the scroll view, we keep the height same so it will only
    //scroll horizontally
    self.myScrollView.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews,
    //we set the origin to the 3rd page
    CGPoint scrollPoint = CGPointMake(self.view.frame.size.width * 2, 0);
    //change the scroll view offset the the 3rd page so it will start from there
    [myScrollView setContentOffset:scrollPoint animated:YES];
    [self.view addSubview:self.myScrollView];

//scrolling ends
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //find the page number you are on
    CGFloat pageWidth = scrollView.frame.size.width;
    int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    NSLog(@"Scrolling - You are now on page %i",page);

//dragging ends, please switch off paging to listen for this event
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
            targetContentOffset:(inout CGPoint *) targetContentOffset
    //find the page number you are on
    CGFloat pageWidth = scrollView.frame.size.width;
    int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    NSLog(@"Dragging - You are now on page %i",page);


- (void)didReceiveMemoryWarning
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.




  1. hey, this REALLY helped me out. Thanks !!!

  2. This comment has been removed by the author.

  3. This is awesome. Very simple and understandable. Thanks a lot

  4. It was really helpful. Best part is that it was simple and easy to understand for me.

  5. really helpfull.simple and easy to understand.good work

  6. I chose to investigate each substance and I read yours. My compliment about this blog is exceptionally positive I visit this blog first time and inspire by this good stuff work. Incredible post keeps up posting such great information. If you like to travel then you can use munnar call taxi for a trust worthy travel.

  7. I really like the dear information you offer in your articles.

  8. I’m able to bookmark your site and show the kids check out up here generally.

  9. Im fairly positive theyre likely to be informed a great deal of new stuff here than anyone

  10. I think your post is very interesting and mostly i keep looking for like this type of websites where i learn or get new concept. I am happy to visit on your site. Thanks to share it.

  11. this is one of the cult game now, a lot of people enjoy playing them . Also you can refer to the game :
    age of war | red ball | earn to die 5 | Tank trouble | happy wheels | earn to die 6
    The game controls are shown just under . Movement mechanisms primarily include acceleration and tilting controls.
    tank trouble unblocked | wings io | strike force heroes | age of war | hotmail login

  12. Thanks. This tutorial helped me a lot.

  13. The blog or and best that is extremely useful to keep I can share the ideas of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    animal jam | five nights at freddy's | hotmail login

  14. Good thing that iOs is protected from such apps like this, android users can suffer a lot because of them.