iPhone SDK: How can I add a scroll view to my application?

Question

I am creating an application for the iPhone which involves having buttons which animate a image view, I created another view in which the buttons are held, however I would like to be able to horizontally or vertically, scroll this view of buttons. I have looked into adding scroll views and I have even followed a tutorial, But I just can't figure out how to add it to my app. Any Ideas anyone? In the tutorial I followed the guy adds the scroll view to the MainWindow.xib, now my app is created and designed in the viewcontroller.xib. So after following the tutorial when I hit build and go it loads that nib and all you see is a white background and a scroll view. (also in that tutorial he scrolled an image where as i would like to scroll a long view of buttons) I realize the newbie-ness of my question could be crazy, but I'm new to programming all together. Here's another additional question, if some one helped me get this scroll view working where would you design the contents of that scrolled view if it's length is longer than the iphone screen? Because It is my understanding that the space to design with in interface builder is the size of the iphone screen and designing interfaces longer than the iphone screen isn't do-able. (of course i know it is do-able i just don't know how to do it) Any help will be appreciated.

Answer 1

You can set the content view (scrolling area) dimensions programmatically:

[scrollView setContentSize:CGSizeMake(contentViewWidth, contentViewHeight)];

And then add you view components to the scroll view using the coordinate system of the content view. So say your scroll view was 100x100 pixels and you wanted the scroll view to be twice as wide:

[scrollView setContentSize:CGSizeMake(200.0f, 100.0f)];

You could then add a button to appear on each half of the scroll view:

// First half of content view
button1.frame.origin.x = 10.0f;
button1.frame.origin.y = 50.0f;
[scrollView addSubView:button1];

// First half of content view
button2.frame.origin.x = 110.0f; // NOTE that 110 is outside of
button2.frame.origin.y = 50.0f;  // the scroll view frame
[scrollView addSubView:button2];

You could probably design each page of the scroll view as a separate sub view in the NIB and then shift the sub views origin to the correct page location either in Interface Builder or programmatically - but I have never tried this. If this works you'd then be able to layout your buttons using IB.

I would be interested to know if this works.

Answer 2

most views have a .hidden property.

set it to NO to hide -> myscrollview.hidden = NO; set to YES to show -> myscrollview.hidden = YES;

you can put this hide/show inside an animation and fade out the scrollview.

look-up "simple quartz animation" - it only a few lines of code.

Answer 3

wow ... it worked for me ... thanks teabot for the solution and thanks samantha for putting forth this problem ... I had the exact same problem and I would have never been able to put it so nicely :)