image slider with previous and next image visible

Question

What I have is list of images. I was showing those images in scrollview with paging enabled.

Now client came back asking too show next (partly visible), current (fully visible) and previous (partly visible) images as shown in below image.

_{(source: mzstatic.com)}

What I tried is as below.

int mm = 150;
for (int i=0;i<featuredProductArray.count;i++) {
    UIButton *mButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [mButton addTarget:self action:@selector(takeMeToProductDetails:) forControlEvents:UIControlEventTouchUpInside];
    mButton.imageView.contentMode = UIViewContentModeScaleAspectFill;
    [mButton sd_setImageWithURL:[NSURL URLWithString:[[[featuredProductArray objectAtIndex:i] valueForKey:@"Image"] stringByReplacingOccurrencesOfString:@"/Original/" withString:@"/1080/"] ] forState:UIControlStateNormal placeholderImage:[UIImage imageNamed:@"slider_bg.png"]];
    [mButton setAdjustsImageWhenHighlighted:NO];
    mButton.accessibilityValue = [NSString stringWithFormat:@"feat%d", i];
    mButton.frame = CGRectMake(mm*iPhoneFactorX, 0, 780*iPhoneFactorX, iPhoneHeight-(20+(149*iPhoneFactorX)));
    mm = mm + 780+50;
    [yScrollView addSubview:mButton];
}

Now I have paging issue.. when I scroll, the second image is not centered...

Answer 1

First of all disable the scrolling from the IB.

Now add images next to each other using for loop

Set scrollview contentSize

Create variable int myPostForSwipe and initialize to 0

Now add swipe gestures, which are very important

UISwipeGestureRecognizer *sswipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(didSwipeScreen:)];
sswipe.direction = UISwipeGestureRecognizerDirectionLeft;
sswipe.delegate = self;
[yScrollView addGestureRecognizer:sswipe];

sswipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(didSwipeScreen:)];
sswipe.direction = UISwipeGestureRecognizerDirectionRight;
sswipe.delegate = self;
[yScrollView addGestureRecognizer:sswipe];

Implement didSwipeScreen

- (void)didSwipeScreen:(UISwipeGestureRecognizer *)gesture
{
    NSLog(@"didSwipeScreen");
    switch (gesture.direction) {
            NSLog(@"gesture.direction");
        case UISwipeGestureRecognizerDirectionUp:
            // you can include this case too
            NSLog(@"UISwipeGestureRecognizerDirectionUp");
            break;
        case UISwipeGestureRecognizerDirectionDown:
            // you can include this case too
            NSLog(@"UISwipeGestureRecognizerDirectionDown");
            break;
        case UISwipeGestureRecognizerDirectionLeft:

            if (myPostForSwipe<(featuredProductArray.count-1)) {
                myPostForSwipe = myPostForSwipe + 1;
                float myX1 = (myPostForSwipe*830*iPhoneFactorX);
                NSLog(@"UISwipeGestureRecognizerDirectionLeft==%f===%d", myX1, myPostForSwipe);
                [yScrollView setContentOffset:CGPointMake(myX1, 0) animated:YES];
            }
            break;
        case UISwipeGestureRecognizerDirectionRight:
            if (myPostForSwipe>=1) {
                myPostForSwipe = myPostForSwipe - 1;
                NSLog(@"UISwipeGestureRecognizerDirectionRight==%d", myPostForSwipe);
                float myX2 = (myPostForSwipe*830*iPhoneFactorX);
                [yScrollView setContentOffset:CGPointMake(myX2, 0) animated:YES];
            }
            break;
        default:
            break;
    }
}

That's it

---

Another solution

The another solution is more and more simple...

1. Create UIScrollView of the middle image size

2. Un-tick Clip Subviews & tick Paging Enable (this is very important)

3. Fill scrollview with images now.

You are done!!!

This point didn't work with me bcz I had side menu & all the scrollview was spreading over side menu.

Let me know if anyone have any questions.

Answer 2

To make pagingEnabled you have to make sure that the pages are contiguous and the same size. It would be necessary to increase the size of the subviews to include half of the distance between the buttons as well (maybe by creating a containing superview for the buttons).