ios - Picture slideshow with swipe and page control

Question

I'm creating a "how-to"view where I show the user 5-6 pictures on how to use the app. I want it to be like a container inside the real view. Also I want it to have a transition with swipe and a page control. Something like the AppStore has on the pictures with screenshots of an app if you know what I mean?

Is there an easy way to do this? All help highly appreciated!

Answer 1

here a simple code, but you can customize it with loop, animation or what you want to do ;) ...

- (void)viewDidLoad
{
    [super viewDidLoad];

    //init scollview
    scrollView = [[UIScrollView alloc] initWithFrame:myBounds];
    scrollView.delegate = self;
    scrollView.pagingEnabled = YES;

    //Ajout des covers classiques
    for (int i = 0; i < [myCovers count]; i++) {
        CGRect frame;
        frame.origin.x = scrollView.frame.size.width * i;
        frame.origin.y = 0;
        frame.size = scrollView.frame.size;

        //Vue 1
        UIView *subview1 = [[UIView alloc] initWithFrame:frame];
        [subview1 addSubview:[myCovers objectAtIndex:i]];
        [scrollView addSubview:subview1];
    }

    //Content Size Scrollview
    scrollViewBack.contentSize = CGSizeMake(scrollViewBack.frame.size.width * ([myCovers count]), scrollViewBack.frame.size.height);
    [self.view addSubview:scrollViewBack];
    scrollView.contentSize = CGSizeMake(scrollView.frame.size.width*([myCovers count]), scrollView.frame.size.height);
    [self.view addSubview:scrollView];

    //Page Control
    pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, scrollView.frame.size.height - PAGECONTROL_HEIGTH - myBaseline, scrollView.frame.size.width, PAGECONTROL_HEIGTH)];
    pageControl.numberOfPages = [myCovers count];
    [self.view addSubview:pageControl];
}


#pragma mark -
#pragma mark Params setting

- (void) setObjects:(NSArray *)covers {
    myCovers = [[NSArray alloc] initWithArray:covers];
}


#pragma mark -
#pragma mark Scrollview delegate

- (void)scrollViewDidEndDecelerating:(UIScrollView *)sender {
    CGFloat pageWidth = scrollView.frame.size.width;
    NSInteger offsetLooping = 1;
    int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + offsetLooping;
    pageControl.currentPage = page % [myCovers count];
}

Answer 2

1. You can create UIImageView for the 'n' number of images you have.
2. Add this images on UIScrollView. Keep the size of your scrollview same as your UIImageView size.
3. Most important thing, enable the Paging property of UIScrollView

It should give you the look same as AppStore screen shot screen.