Enable scrolling to View to allow multiple elements #iOS

Hi,

In this post, I’ll show how to enable scrolling in a particular view in iOS. That is, say if you have many elements to be added in a view and that won’t fit in one screen of the phone. In that case there will be a need for adding scrolling to the view.

By default, a view will have a fixed height (the height of the screen). But most of the times, there are way too many UI elements like textboxes, labels, etc. that need to be added to the view.

So in order to do that, we need to follow the below 5 steps :

  1. Remove Auto-layout for the view controller of the view that needs to have scrolling
  2. Set the “Size” attribute of the View to “Freeform
  3. Increase the height of the view to required dimensions
  4. Add a scroll view to the view
  5. !important Enable scrolling to scrollview and set the dimensions of it

The above steps are shown below through screen shots:

  1. Remove Auto-layout for the view controller of the view that needs to have scrollingFirst select the View controller by clicking on it in the storyboard, then uncheck the check box on the right.

    Un-Check auto layout

  2. Set the “Size” attribute of the View to “Freeform”In the Attributes inspector, under the Simulated Metrics section, change the value of Size attribute to Freeform

    change size

  3. Increase the height of the view to required dimensionsIt is important to note that BEFORE the size is chanegd to Freeform, the dimensions of the view will be disabled as shown below

    Disabled dimensions

    After the size is changed to “Freeform”, we can see that the dimensions are enabled to change as shown below.

    Enabled Dimensions

    Increase the value of the Height element as required and hit enter. This will make the view to the changed size. A sample is shown below.

    Increased Height

  4. Add a scroll view to the viewFrom the objecct library, drag and drop a scroll view on to the view. By default, it will occupy the entire space of the view. Re size it as required.

    Added ScrollView

  5. Enable scrolling to scrollview and set the dimensions of itThis step is very important and needs to be done in order to enable scrolling for the view. We have to add an outlet for the scroll view and synthesize the same in the implementation. This is to give ourselves a reference to the scrollview for programatically enabling scrolling and setting it’s dimensions. The steps are shown below.

    Add outlet

    Synthesize Property

    Now, enable the scrolling and set the dimensions. Sample code shown below:

    enable scrolling

Now, all the required steps are done. Only thing that needs to be done is add the elements to the screen and run it. For the purpose of this post, I’m randomly dragging some elements on to the view and running the app.

Now, run the app and verify that scrolling has been enabled.

Running app with scrolling
Scrolling working!

I have put the above sample project for download here. You can download the zip file by clicking on File–>Download. Please let me know if there are any changes or improvements that can be done here.

Hope this helps!

Advertisements

About Amogh Natu

Technology enthusiast, Associate Consultant @ Microsoft, music lover, love my guitar, Microsoft.NET, ASP.NET, C#.NET Professional.
This entry was posted in General, iOS, Mobile Application Development and tagged , , , , , , , , , , . Bookmark the permalink.

4 Responses to Enable scrolling to View to allow multiple elements #iOS

  1. Dhawal says:

    Hi Amogh,
    Nice tutorial but I would like to point out something.
    The contentSize of the scroll view need not be equal to the height of the parent view. It is completely independent.
    The scrolling of scroll view depends only on the contentSize specified. To make sure that the scrolling takes place, just make sure that the contentSize of scroll view is greater that the scroll view frame.

Your comments or opinions.....

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s