Click here to Skip to main content
15,867,771 members
Articles / Mobile Apps / iOS
Tip/Trick

Enable scrolling to View to allow multiple elements #iOS

Rate me:
Please Sign up or sign in to vote.
4.10/5 (5 votes)
6 May 2014CPOL3 min read 17.5K   55   4   3
This tip shows how you can add scrolling to a view in iOS to allow multiple elements on the screen that won't fit in one screen.

Introduction

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 scrolling

First select the View controller by clicking on it in the storyboard, then uncheck the check box on the right.

Image 1

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

Image 2

3. Increase the height of the view to required dimensions

It is important to note that BEFORE the size is changed to Freeform, the dimensions of the view will be disabled as shown below

Image 3

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

Image 4

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.

Image 5

4. Add a scroll view to the view

From 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.

Image 6

5. Enable scrolling to scrollview and set the dimensions of it

This 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.

Image 7

Image 8

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

Image 9

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.

Image 10

Image 11

I have uploaded the sample project here. Please let me know if there are any changes or improvements that can be done here.

I hope this helps!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 1 Pin
maq_rohit8-May-14 7:04
professionalmaq_rohit8-May-14 7:04 
poor article
QuestionRe: My vote of 1 Pin
Amogh Natu8-May-14 7:08
professionalAmogh Natu8-May-14 7:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.