How to make scrolling work on an iOS app screen?

Among many other things, scrolling is one that we take for granted when developing web apps. As soon as content grows beyond visible screen, good browsers themselves add scrollbars to the screen. Try making it work on an iOS app screen, you’ll be surprised how tricky this thing can get.

So after hours of hit and trial, here are my findings:

  1. On a regular View Controller, you cannot add content into it and then expect scroll bars to suddenly appear for themselves. You’ll have to use a special control called Scroll View. Drag the Scroll View on your main View Controller and make sure it spreads across entire screen.
  2. You cannot add Labels, Buttons or other widgets directly on Scroll View. You’ll need to drag View widget and drop it on top of Scroll View. Set the height of View widget as much as you like, for example 1000 pt. Consider Scroll View as a window on your screen which allows you to peek at View.
  3. Now go on and add your Labels, Buttons and other widgets on top of View.
  4. Auto Layout doesn’t work with Scroll View. From the File Inspector of your main View Controller, uncheck Auto Layout.
  5. Make sure you have a custom class associated with your View Controller. In that view controller, create an IBOutlet property UIScrollView (name it ‘scrollView’)and make sure it is associated with your Scroll View widget on storyboard.
  6. In the viewDidLoad method of your custom class, add these two lines:
    - (void)viewDidLoad
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        [self.scrollView setScrollEnabled:YES];
        [self.scrollView setContentSize:(CGSizeMake(320, 1000))];

Now run your app and see your hard work in play. The good thing about this architecture is that it offers a lot of customization possibilities. The bad thing is you’re forced to do so much work for something so trivial.

Did you find any simpler way of doing the job? Please share your thoughts in the comments.

Published by

Umar Ashfaq

Umar Ashfaq is a full-stack web developer. His core strength is building neat UIs with JavaScript on web but he also enjoys server side Java, NodeJS and Objective C. Follow him on twitter @umarashfaq87

Leave a Reply

Your email address will not be published. Required fields are marked *