19

Can someone please guide me to a tutorial , on how to implement a vertical scrolling view on my iOS app?

I can't believe that the last 2 days , I can't find a single working example on just a vertical scrolling view. All the tutorials are about horizontal scrolling, zooming etc etc.

What I am looking for would be something like this tutorial http://www.edumobile.org/iphone/iphone-programming-tutorials/scrollview-example-in-iphone-2/, which shows how to make a uiscrollView and add objects to it, from the Builder and not programmatically. The only flaw I found was , that when trying to add a map down in the scrolling area, the map would appear up and not in the position I placed it. Maybe any ideas on that too?

Anything in mind?

John Topley
  • 113,588
  • 46
  • 195
  • 237
  • http://idevzilla.com/2010/09/16/uiscrollview-a-really-simple-tutorial/ If you can make a horizontal scrolling view, you automatically have one that can vertically scroll as well. Just manipulate the `contentSize` property correctly. – borrrden Feb 25 '13 at 09:22
  • You should be able to set srcollView.contentSize with a larger width then your scroll view frame which will it let scroll horizontally. In your xib click the scrollview and set Scrolling Enabled and Bounce Horizontally. – BooRanger Feb 25 '13 at 09:25
  • Yes i ve seen this tutorial and done it , doesnt help at all to understand how to make a vertical view. I would prefer something from the interface builder and not so much programming –  Feb 25 '13 at 09:26

4 Answers4

24

So you want to create a scroll view in xib.

  1. Add a scroll view to the nib file

  2. set its size to to whatever you want

    enter image description here

  3. Add your controls (Buttons,labels..)

    enter image description here

  4. Add it as a sub view of main view

    enter image description here

  5. Finally create a property of scroll view and in viewDidLoad set the content size of the scroll view 

     self.scrollView.contentSize =CGSizeMake(320, 700);
Anil Varghese
  • 42,757
  • 9
  • 93
  • 110
  • I followed your instructions to the letter. I did create a scrollView as you said , i did add it as a subview , i did add buttons all over my scrollView , i created a @property (strong, nonatomic) IBOutlet UIScrollView *scrollView; and connected it to my scrollView. However the view is not scrollable :( . Am i missing something here? Do i need to enable some property to get it scrollable or smth? –  Feb 25 '13 at 10:21
  • Did you set content size in viewDidLoad `self.scrollView.contentSize =CGSizeMake(320, 600);` – Anil Varghese Feb 25 '13 at 10:29
  • 1
    Dude give a value higher than 600 :P `self.scrollView.contentSize =CGSizeMake(320, 700)` also adjust view properly in nib by dragging the scroll view – Anil Varghese Feb 25 '13 at 10:36
  • Simply amazing!! Thank you very much man! That was exactly what i was looking for. So so so simple. Unebelievable , that i couldnt find it anywhere , and noone here suggested this simple solution. Thanks a lot! –  Feb 25 '13 at 10:56
  • 1
    I didn't want to make a new answer, but you can also directly make the View itself a scroll view, just select the main View in the storyboard editor, in the Identity Inspector, for Custom Class you can change the class from the default UIView, to UIScrollView. Then follow the same steps in this answer. This worked for me. – ammianus Dec 30 '15 at 12:44
13

It simple, same as horizontal scroll view. Add a scrollview in a view hierarchy,

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:scrollView];

Now to make scroll view scrollable, set its scrollview content size greater than its bound.

[scrollView setContentSize:CGSizeMake(scrollView.bounds.size.width, scrollView.bounds.size.height*3)];

Now it can scroll three time the height of scrollView.

Alex Spencer
  • 834
  • 2
  • 12
  • 23
Atif Khan
  • 125
  • 1
  • 7
  • ok. But how do i place buttons maps textview etc etc to my view? And i dont mean programmaticaly. I mean from the view builder. –  Feb 25 '13 at 09:35
  • In storyboard, or xib. You first drag map view and textview on to scrollview. Set the frame of individual items in scrollview. But to set contentsize you need to do it in code. Just see maximum height and width and set in viewdidload – Atif Khan Feb 25 '13 at 09:41
  • i understand what you are trying to say , but i really cant code it.. Thats why , i asked for a tutorial. Thank you very much though for trying to help :) –  Feb 25 '13 at 09:46
  • that would be really awsome! –  Feb 25 '13 at 09:58
3

I've struggled with this simple issue for a full day. There are most likely benefits to a more sophisticated approach, but unchecking autolayout solved my issue.

For the quick fix, I believe this is the best approach and will save you a HUGE headache.

Matt Perejda
  • 509
  • 5
  • 14
1

Just change the content size of your scrollview.Let's assume you are creating a UIScrollView with the following frame

scl=[[UIScrollView  alloc]initWithFrame:CGRectMake(0, 0, 620, 172)];

Now call the content size property of your scroll view,like i have shown below .

[scl setContentSize:CGSizeMake(700, 172)];

Now add the scroll view on a view / View Controller etc and check it .