This tutorial will guide you through the process of creating a scrolling paged photo gallery  using UIScrollView.

Specifically you’ll learn how to set up the UIScrollView in programmatically, and how to add the no of UIImageView as a subview and represent as a GRID.

Steps To Make A Scrolling Photo Gallery With UIScrollView

Create New Project

Open Xcode

Select iOS -> Application -> Single View Application

Create Project 1

Create Project 1

Click Next and modify below things

Create Project 2

Create Project 2

Product Name : SampleGallery
Device Name : iPhone
Use Automatic Reference Counting : CHECK

Click Next and save the project at your desired place.

This is how your project looks initially. Uncheck options for “Landscape Left” and “Landscape Right“.

Now Go to ViewController.h

Add following line of code

UIScrollView *scrollView; 
UIImageView *imageView; 
NSMutableArray*images;

This how your ViewController.h file looks. i have added comments in the code to understand the use of variables. incase of any query feel free to comment.

@interface ViewController : UIViewController
{
<span style="color: #ff6600;">// Scrollview
</span>UIScrollView *scrollView;

<span style="color: #ff6600;">// Imageview (which we are goging to create dynamically and add in scrollview)
</span>UIImageView *imageView;

<span style="color: #ff6600;">// Array of imagename
</span>NSMutableArray*images;

}

@end

In ViewController.m file viewDidLoad method

Add an image to the project. drag and drop it in to the project and add it. name it as “sample.png”

Initialize the array and add the image name “sample.png” in to array. This is how your method looks.

- (void)viewDidLoad
{
    [super viewDidLoad];
<span style="color: #ff6600;">    // Initialize the array and add the image name "sample.png" in to array.
</span>
    images = [[NSMutableArray alloc] init];

    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];
    [images addObject:@"sample.png"];

<span style="color: #ff6600;">    // Call Method "CreateImageGallery" here
</span>
}

Create a method and give the name “CreateImageGallery”.and modify the code like below. i have mentiod the coments for each peace of code in case of any query feel free to comment.

This how your method looks

-(void) CreateImageGallery
{

<span style="color: #ff6600;">    // Create and set scrollview properties
</span>
    scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0,20,320,548)];

    scrollView.showsVerticalScrollIndicator=NO;
    [scrollView setBackgroundColor:[UIColor clearColor]];

    scrollView.pagingEnabled=YES;
    scrollView.directionalLockEnabled=YES;
    scrollView.bounces=YES;
    [scrollView setCanCancelContentTouches:YES];
    scrollView.userInteractionEnabled = YES;
    [self.view addSubview:scrollView];

<span style="color: #ff6600;">    //The x and y view location coordinates for your menu items
</span>    int x = 20, y = 20;

<span style="color: #ff6600;">    //The number of images you want
</span>    int numOfItemsToAdd = [images count];

<span style="color: #ff6600;">    //The height and width of your images are the screen width devided by the number of columns
</span>    int imageHeight = (240/3), imageWidth = (256/3);

    int counter=0;
    int decrement=numOfItemsToAdd;
    int lastx=0;
    int lasty=0;
    int contentwidth;
    int contentheight;

<span style="color: #ff6600;">    //The content seize needs to refelect the number of items that will be added
</span>
    for(int i=1; i&lt;=numOfItemsToAdd;i++)
    {
        x=15;
        for(int j=1;j&lt;=3;j++)                      {             if(j!=1)                                  x=x+20+imageHeight;                          if(decrement&gt;=1)
            {
                imageView = [[UIImageView alloc] initWithFrame: CGRectMake(x, y, imageWidth, imageHeight)];

<span style="color: #ff6600;">                //set image to each imageview
</span>
                imageView.image = [UIImage imageNamed:[images objectAtIndex:counter]];
                imageView.userInteractionEnabled=YES;
                imageView.multipleTouchEnabled=YES;

<span style="color: #ff6600;">                //add tag to each imageview in grid
</span>
                imageView.tag=counter;
                NSLog(@"%d",imageView.tag);

<span style="color: #ff6600;">                //add tap gesture to each image view in grid
</span>
                UITapGestureRecognizer *tapRecognizer =
                [[UITapGestureRecognizer alloc] initWithTarget:self
                                                        action:@selector(handleSingleTap:)];
                [tapRecognizer setNumberOfTouchesRequired:1];

                [imageView addGestureRecognizer:tapRecognizer];

<span style="color: #ff6600;">                //add each imageview to grid  scrollview
</span>
                [scrollView addSubview:imageView];

                counter=counter+1;

<span style="color: #ff6600;">                //for scrollview widh and height set
</span>                if(decrement==1)
                {
                    lastx+=x;
                    lasty+=y;

                }
            }
            decrement=decrement-1;

        }
        y=y +imageHeight+20;
    }

<span style="color: #ff6600;">    //last image x and y coordinate
</span>
    NSLog(@"%d  %d",lastx,lasty);
    contentheight=lasty+120;
    contentwidth=lastx;

<span style="color: #ff6600;">    //set scrollview contentsize
</span>
    [scrollView setContentSize:CGSizeMake(contentwidth ,contentheight)];

}

Add following method from where you can get the “TAG” for each imageview.

- (void)handleSingleTap:(UITapGestureRecognizer *)recognizer
{
    UIImageView *currentimage = (UIImageView *)[recognizer view];
    NSLog(@"%d",currentimage.tag);
}

Call the method “CreateImageGallery” in viewDidLoad method. write below line in viewDidLoad method

[self CreateImageGallery];

Now save and run your program. This will look like below.

Output

Output

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

If you click on any image, in the console you can see the log which print the TAG associated with imageview.

Output with Log

Output with Log

Thats it 🙂 Have fun and in case of any query feel free to comment. you can download the source code from Here.