iPhone show photos/images sliding (like photo library and Facebook app)?

Question

I started developing to iOS just a couple of days ago, so everything is very new to me! I need to show in an application a "photo slider" as we've in the iPhone library or Facebook application. After some research, I reached a dead end. My goal is to show a set of photos, one by one, and having the user slide the finger from right to left, or vice versa :-)

Does anyone has an example or knows of one?

Thanks to all.

Solution 1

Well Three20 is famous but I would discourage you from using it. If all you need is a photo slider then putting the entire Three20 framework into your project and trying to figure out how the URL-based navigation thing works can be a real pain.

Here is a better alternative, https://github.com/enormego/PhotoViewer. It's a standalone implementation of the photo slider and a corresponding image cache. You can read more about how the code works on the author's blog, http://developers.enormego.com/.

Solution 2

you can use below sample code for image slideshow..Here 'scr' is the scrollview object.

NSMutableArray *imgs=[[NSMutableArray  alloc]init]; 
                         // arrayWithObjects:[UIImage @"abc1.jpg"],[UIImage @"abc2.jpg"],[UIImage @"abc3.jpg"], [UIImage@"abc4.jpg"],
//                [ UIImage @"abc5.jpg"],nil];

                      [imgs addObject:[UIImage imageNamed:@"abc1.jpg"]];
                      [imgs addObject:[UIImage imageNamed:@"abc2.jpg"]];
                       [imgs addObject:[UIImage imageNamed:@"abc3.jpg"]];
                        [imgs addObject:[UIImage imageNamed:@"abc4.jpg"]];
                         [imgs addObject:[UIImage imageNamed:@"abc5.jpg"]];
for(int i=0;i<imgs.count;i++)
{
    CGRect frame;
    frame.origin.x=self.scr.frame.size.width *i;
    frame.origin.y=0;
    frame.size=self.scr.frame.size;
    UIImageView *subimg=[[UIImageView alloc]initWithFrame:frame];
    subimg.image=[imgs objectAtIndex:i];
    [self.scr  addSubview:subimg];
    [subimg release];
    self.scr.contentSize=CGSizeMake(self.scr.frame.size.width*imgs.count, self.scr.frame.size.height);

}

Solution 3

Building on yhpets response, this supports orientation changes too by applying tags to each ImageView and using them to reference each ImageView and resize when the device is rotated...

In your ViewController.h file you'll need to set up your Array and ScrollView...

@interface ViewController : UIViewController{
    NSMutableArray *imgs;
    IBOutlet UIScrollView *scr;
}
@property (strong, nonatomic) IBOutlet UIScrollView *scr;

And in your ViewController.m you need to listen for didRotateFromInterfaceOrientation and resize the ImageViews to fit the new screen. We need to set the screenWidth and screenHeight variables depending on if we are portrait or landscape and use these to resize each imageview and the scrollview.

@implementation ViewController
@synthesize scr;

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation{
        CGRect screenRect = [[UIScreen mainScreen] bounds];
        CGFloat screenWidth = screenRect.size.width;
        CGFloat screenHeight = screenRect.size.height;
    if ((self.interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown)||(self.interfaceOrientation == UIInterfaceOrientationPortrait)){
//screenWidth and screenHeight are correctly assigned to the actual width and height
    }else{
        screenHeight = screenRect.size.width;
        screenWidth = screenRect.size.height;
        screenRect.size.width = screenWidth;
        screenRect.size.height = screenHeight;
    }
    NSLog(@"see it's right now= (%f,%f)",screenWidth,screenHeight);
    self.scr.contentSize=CGSizeMake(screenWidth*imgs.count, screenHeight);
    for(int i=0;i<imgs.count;i++){
        UIImageView *targetIV = (UIImageView*)[self.view viewWithTag:(i+1)];
        CGRect frame;
        frame.origin.x=screenWidth *i;
        frame.origin.y=0;
        frame.size=CGSizeMake(screenWidth, screenHeight);
        targetIV.frame = frame;
    }
}///////////////////////////////////////////////////////////////////////////
- (void)viewDidLoad{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    imgs=[[NSMutableArray  alloc]init];
    [imgs addObject:[UIImage imageNamed:@"1001.png"]];
    [imgs addObject:[UIImage imageNamed:@"1002.png"]];
    [imgs addObject:[UIImage imageNamed:@"1003.png"]];
    [imgs addObject:[UIImage imageNamed:@"1004.png"]];
    for(int i=0;i<imgs.count;i++){
        CGRect frame;
        frame.origin.x=self.scr.frame.size.width *i;
        frame.origin.y=0;
        frame.size=self.scr.frame.size;
        UIImageView *subimg=[[UIImageView alloc]initWithFrame:frame];
        subimg.image=[imgs objectAtIndex:i];
        subimg.tag = (i+1);
        subimg.contentMode = UIViewContentModeScaleAspectFit;
        [self.scr  addSubview:subimg];
    }
    self.scr.contentSize=CGSizeMake(self.scr.frame.size.width*imgs.count, self.scr.frame.size.height);
}

Comments

[timothy5216]

Yeah, I was going to say the same thing about Three20. The URL-Based navigation is a real pain.

[Admin]

Those are great example of great apps but it would be more useful with some step-by-step explanation of how to do it. Maybe a video or text tutorials? Thanks though for those great sources.

[Jim True]

This is great, new folks may want to turn off "Use Autolayout" in Storyboard View Controller and turn on "paging enabled." Also the last line setting the contentSize should be placed outside the for loop since you only need it once. self.scr.contentSize=CGSizeMake(self.scr.frame.size.width*im‌​gs.count, self.scr.frame.size.height); I like this answer but wanted to expand on it to allow for orientation changes, see my answer for more. (Hard to put code in here).

[Viper]

This is fantastic. But how can you add elasticity to make it so that when you scroll, the image stops? Like the app store does

[PAC]

No more support for this project so doesn't try and waste your time.