Tuesday, December 25, 2012

How To Make Gallery View in iOS

Keywords: Scroll view, gallery, ios, iphone, xcode, image view

How To Make Gallery View in iOS

Get contacts of all your emergency needs on single tap. Download Quick-Finder for iPhone

Code of this sample is available here

1) Take a project of name GallerySample.

2) drag and drop 5 images in your resource folder with name of image1.jpeg,image2.jpeg,image3.jpeg,image4.jpeg and image5.jpeg.

3) Open ViewController.m and modified the code as follows (Modified code is in different color)

#import "ViewController.h"

@interface ViewController ()


@implementation ViewController

- (void)viewDidLoad
    [super viewDidLoad];
    UIScrollView *scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 50, 320, 270)];
    // creating a scroll view
    [scrollView setPagingEnabled:YES];
    // enabled paging of scroll view
    [scrollView setShowsHorizontalScrollIndicator:NO];
    // disabled sliding bar
    NSArray *imageArray=[[NSArray alloc]initWithObjects:@"image1",@"image2",@"image3",@"image4",@"image5", nil];
    // creating an array having the name of all images which are to be shown in gallery
    for( int i=0; i< [imageArray count];i++)
        NSString *imageName=[imageArray objectAtIndex:i];
        // getting the name of image from array
        NSString *fullImageName=[NSString stringWithFormat:@"%@.jpeg",imageName];
        // appending extention to the name of image to complete the image name
        int padding=25;
        // padding is given.
        CGRect imageViewFrame=CGRectMake(scrollView.frame.size.width*i+padding, scrollView.frame.origin.y, scrollView.frame.size.width-2*padding, scrollView.frame.size.height);
        // Getting frame of image so that all images are not overlapped to each other.
        // each frame is distict with other frame
        UIImageView *imageView=[[UIImageView alloc]initWithFrame:imageViewFrame];
        // Setting frame of imageView
        [imageView setImage:[UIImage imageNamed:fullImageName]];
        // setting image to the image view
        [imageView setContentMode:UIViewContentModeScaleAspectFit];
        // setting content mode of image view so that image looks good
        [scrollView addSubview:imageView];
        // adding image view to the scroll view

    CGSize scrollViewSize=CGSizeMake(scrollView.frame.size.width*[imageArray count], scrollView.frame.size.height);
    // getting the content size of scroll view
    [scrollView setContentSize:scrollViewSize];
    // setting content size of scroll view
    [self.view addSubview:scrollView];
    // finally add scroll view to your view

- (void)didReceiveMemoryWarning
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.


Now when you run the code you will get a gallery having 5 images , You can scroll to get all images.

You can download the sample code from here (Media fire link)

1 comment: