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.

Answer 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/.

Answer 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);

}

Answer 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);
}

Answer 4

There's "photo slider" in Three20 if you want to check it out - https://github.com/facebook/three20/tree/master/samples/TTCatalog - just download the source and build TTCatalog