Scrolling top to bottom using UIScrollView

Question

I am looking for an example that show just vertical scrolling in iPhone.

• The Apple supplied Scrolling example allows swiping of images left to right.

  1. Example Link
  2. Example Link

• I want to have my images scroll top to bottom like Instagram App.

• I research about it and found lots of example, but they all show horizontal scrolling.

  1. Example
  2. Example
  3. Example

Does anyone know how to do this?

I appreciate if you send me a link to a tutorial.

Answer 1

There are several ways of doing this for example:

1. Using the UITableView with Custom cell
2. Adding UIScrollingView & adding the content/images & increasing the height of scrollview according to number of objects in array.

Here is the code snippet which creates a 2*2 Grid for images :

//Over here adding the image names into the Array
NSMutableArray *imageArray=[[NSMutableArray alloc]init];
    [Arr addObject:[UIImage imageNamed:@"image_1.png"]];
    [Arr addObject:[UIImage imageNamed:@"image_2.png"]];
    [Arr addObject:[UIImage imageNamed:@"image_3.png"]];
    [Arr addObject:[UIImage imageNamed:@"image_4.png"]];
    [Arr addObject:[UIImage imageNamed:@"image_5.png"]];

// Initlaizing the ScrollView & setting the frame :

scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0,320, 460)];
[scrollView setBackgroundColor:[UIColor clearColor]];
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
int row = 0;
int column = 0;
for(int i = 0; i < imageArray.count; i++) {

    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.backgroundColor=[UIColor clearColor];
    button.frame = CGRectMake(column*160+0,row*210+10, 160, 190);
    [button setImage:[imageArray objectAtIndex:i] forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor clearColor]];
    [button addTarget:self action:@selector(chooseCustomImageTapped:) forControlEvents:UIControlEventTouchUpInside];
    button.tag = i; 
    [view1 addSubview:button];

    if (column == 1) {
        column = 0;
        row++;
    } else {
        column++;
    }

}

[scrollView setContentSize:CGSizeMake(320, (row+1) * 210)];

[self.view addSubview:view1];

//Here is the method used for Tapping :

- (IBAction)chooseCustomImageTapped:(id)sender
{

} 

Now,once the scrollView is ready for Vertical scrolling, you can do your own customization accordingly. I hope this would work for you.

Answer 2

Hi i solved your problem with apple code,

just change the function with

- (void)layoutScrollImages
{
    UIImageView *view = nil;
    NSArray *subviews = [scrollView1 subviews];

    // reposition all image subviews in a horizontal serial fashion
    CGFloat curXLoc = 0;
    for (view in subviews)
    {
        if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
        {
            CGRect frame = view.frame;
            frame.origin = CGPointMake(0,curXLoc);
            view.frame = frame;

            curXLoc += (kScrollObjHeight);
        }
    }

    // set the content size so it can be scrollable
    [scrollView1 setContentSize:CGSizeMake(([scrollView1 bounds].size.width),kNumImages * kScrollObjHeight)];
}  

or if you want sample then i will give you

Answer 3

You can use the following code to scroll images from top to bottom and vice versa.!!

- (void)viewDidLoad
{
//....
UISwipeGestureRecognizer *recognizer;
//for scrolling up
    recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(SwipeUp)]; // calling method SwipeUp
    [recognizer setDirection:(UISwipeGestureRecognizerDirectionUp)];
    [[self view] addGestureRecognizer:recognizer];


  //for scrolling down  
    UISwipeGestureRecognizer *recognizer1;
    recognizer1 = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(SwipeDown)]; //calling method SwipeDown
    [recognizer1 setDirection:(UISwipeGestureRecognizerDirectionDown)];
    [[self view] addGestureRecognizer:recognizer1];

}

//Initialise and synthesise IBOutlet UIImageView *bgImage;

-(IBAction)SwipeUp
{


        [bgImage setImage:[UIImage imageNamed:@"yourImage1"] ];

          bgImage.opaque=YES;
    [self.view addSubview:bgImage];
}


-(IBAction)SwipeDown
{


        [bgImage setImage:[UIImage imageNamed:@"yourImage2"] ];

        bgImage.opaque=YES;
    [self.view addSubview:bgImage];
}

Answer 4

For your purpose refer your link:

http://idevzilla.com/2010/09/16/uiscrollview-a-really-simple-tutorial/

There is a code like:

scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);

For horizontal scrolling you need to set the width of contentSize property to a higher value than the scroll view's frame width. Likewise for vertical scrolling you need to set the height of contentSize property to a higher value than the scroll view's frame height.

Reference

In the above code it can be done like:

scroll.contentSize = CGSizeMake(self.view.frame.size.width, numberOfViews * self.view.frame.size.height);

Answer 5

I don't know if I understood correctly what you want to accomplish but basically you can set the position of you scrollView using setContentOffset.

CGPoint bottomOffset = CGPointMake(0, scrollView.contentSize.height - self.scrollView.bounds.size.height);
[scrollView setContentOffset:bottomOffset animated:YES];