How to create swipe for next/back UIImageView

Question

I have UIImageView like simple Gallery which get data from JSON.

-(void)connectionDidFinishLoading:(NSURLConnection *)connection
{
    NSDictionary *allDataDictionary = [NSJSONSerialization JSONObjectWithData:webdata options:0 error:nil];
    NSArray *tmp =[allDataDictionary objectForKey:@"gallery"];
    if (tmp.count>0){

        for (NSDictionary *diction in tmp) {
            [self.patternImagesArray addObject:diction];
        }

        NSLog(@"%@", self.patternImagesArray);
      //  [loading stopAnimating];

    }

    [self.collectionView reloadData];
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    PatternView *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"PatternCell" forIndexPath:indexPath];

    NSString *myPatternString = [[self.patternImagesArray objectAtIndex:indexPath.row] valueForKey:@"thumb"];

    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:myPatternString]];
    cell.patternImageView.image = [UIImage imageWithData:data];

    return cell;


}

For give full image i use this:

-(void)viewDidLoad{

    NSString *path=[_newsData valueForKey:@"bigimg"];

    NSData* imageData = [NSData dataWithContentsOfURL: [NSURL URLWithString: path]];

    UIImage* image = [UIImage imageWithData: imageData];

        NSLog(@"%@", image);

    _imageParse.image = image;

    [_PanelTools setHidden:YES];


}

When i push on any image in my CollectionViewCell i can see full image, but how to create swipe left/right for next image or back. I know how to make swipe into the any side but how to create swipe with image next/back.

Answer 1

First, create two methods, -nextImage and -prevImage and put in the code for displaying the next and previous images respectively.

Then add swipe gesture recognizers using the following code in -viewDidLoad:

UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipeImage:)];
swipeLeft.direction = UISwipeGestureRecognizerDirectionLeft;
[_imageParse addGestureRecognizer:swipeLeft];

UISwipeGestureRecognizer *swipeRight = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipeImage:)];
swipeRight.direction = UISwipeGestureRecognizerDirectionRight;
[_imageParse addGestureRecognizer:swipeRight];

To be able to show the images, your need to first send the whole array of data instead of the dictionary with the current item. For this, convert the _newsData property to an NSArray and where you set the current item's dictionary in the new viewController, set the whole data instead. Also, introduce a new variable. Like so:

@property (strong, nonatomic) NSArray *newsData;
@property NSInteger currentIndex;

Introduce a method for showing the image based on index

-(void)showImageAtIndex:(NSInteger)index
{
    NSString *path=[[_newsData objectAtIndex:index] objectForKey:@"bigimg"];
    NSData* imageData = [NSData dataWithContentsOfURL: [NSURL URLWithString: path]];

    UIImage* image = [UIImage imageWithData: imageData];

    NSLog(@"%@", image);

    _imageParse.image = image;
}

Now, in your viewDidLoad method, set the current image as:

[self showImageAtIndex:_currentIndex];

The -swipeImage method should look something like this:

-(void)swipeImage:(UISwipeGestureRecognizer*)recognizer
{
    NSInteger index = _currentIndex;

    if (recognizer.direction == UISwipeGestureRecognizerDirectionLeft)
    {
        index++;
    }
    else if (recognizer.direction == UISwipeGestureRecognizerDirectionRight)
    {
        index--;
    }

    if (index > 0 || index < ([_newsData count] - 1))
    {
        _currentIndex = index;
        [self showImageAtIndex:_currentIndex];
    }
    else
    {
        NSLog(@"Reached the end, swipe in opposite direction");
    }

}

Here's what your -prepareForSegue method of the GalleryControllerCollection class should look like:

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    PatternView *cell = (PatternView *)sender;
    NSIndexPath *indexPath = [self.collectionView indexPathForCell:cell];

    GalleryControllerFullmage *vc = (GalleryControllerFullmage*)segue.destinationViewController;
    vc.newsData = [_patternImagesArray copy];
    vc.currentIndex = indexPath.row;
}

Name the segue which transitions from the collection to the image view as "goToFullImage"

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    [self performSegueWithIdentifier:@"goToFullImage" sender:[collectionView cellForItemAtIndexPath:indexPath]];
}

Answer 2

Enable UIImage view user interaction which is disabled by default.

[imageView setUserInteractionEnabled:YES];

Adding a Swipe Gesture Events

UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];

UISwipeGestureRecognizer *swipeRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];

// Setting the swipe direction.

[swipeLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
[swipeRight setDirection:UISwipeGestureRecognizerDirectionRight];

Handling Swipe Gesture Events

- (void)handleSwipe:(UISwipeGestureRecognizer *)swipe {

    if (swipe.direction == UISwipeGestureRecognizerDirectionLeft) {

        NSLog(@"Left Swipe");

    }

    if (swipe.direction == UISwipeGestureRecognizerDirectionRight) {

        NSLog(@"Right Swipe");   

    } 

}