Swipegesture Recognize in IOS

Question

I am new to iOS.

I am developing an app where I have 2 NSMutableArray. I want to load the array images into ImageView.

I want to take the first image and add it to an ImageView. When the use swipes to the left, I then want to add the next image from the array in to a new ImageView and show that. If they swipe back, load the previous e.t.c

I also would like to load an image from the second array in to an ImageView when a user double-taps an image.

i tried this one

AppDelegate * delegate=(AppDelegate *)[[UIApplication sharedApplication]delegate];

    NSLog(@"%lu",(unsigned long)[delegate.FrontsCards count]);
    ImgView= [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];

    //ImgView.image=[UIImage imageNamed:@"cloub1.png"];

    int random=arc4random()%[delegate.FrontsCards count];
     NSLog(@"%d",random);

    ImgView.image=[delegate.FrontsCards objectAtIndex:random];
    [self.view addSubview:ImgView];
    currentImageIndex = 0;
    ImgView.userInteractionEnabled = YES;

    UISwipeGestureRecognizer *recognizer;

    recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)];
    [recognizer setDirection:(UISwipeGestureRecognizerDirectionLeft)];
    [[self view] addGestureRecognizer:recognizer];

    [super viewDidLoad];

}

-(void)handleSwipeFrom:(UISwipeGestureRecognizer *)recognizer
{
    NSLog(@"Swipe received.");

    AppDelegate * delegate=(AppDelegate *)[[UIApplication sharedApplication]delegate];

    for(int i=0;i<52;i++)
    {
        NSLog(@"%d",i);
        ImgView.image=[delegate.FrontsCards objectAtIndex:i];
    }

    ImgView.image=[UIImage imageNamed:@"cloub3.png"];
}

Could anyone help me do this? Thank you in advance.

Answer 1

A couple of approaches:

1. Swipe gesture: If you want to write your own swipe gestures, you might do something like this:

   • Define properties not only the array of image names, but also an index that shows you which card you're looking at:

     @property (nonatomic, strong) NSMutableArray *imageNames;
     @property (nonatomic) NSInteger imageIndex;
     

   • Add the gestures to your image view:

     UISwipeGestureRecognizer *swipe;
     
     // by the way, if not using ARC, make sure to add `autorelease` to
     // the following alloc/init statements
     
     swipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
     swipe.direction = UISwipeGestureRecognizerDirectionLeft;
     [self.imageView addGestureRecognizer:swipe];
     
     swipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
     swipe.direction = UISwipeGestureRecognizerDirectionRight;
     [self.imageView addGestureRecognizer:swipe];
     

   • Write the gesture recognizer handler:

     - (void)handleSwipe:(UISwipeGestureRecognizer *)gesture
     {
         UIViewAnimationOptions option = kNilOptions;
     
         if (gesture.direction == UISwipeGestureRecognizerDirectionRight)
         {
             // if we're at the first card, don't do anything
     
             if (self.imageIndex == 0)
                 return;
     
             // if swiping to the right, maybe it's like putting a card
             // back on the top of the deck of cards
     
             option = UIViewAnimationOptionTransitionCurlDown;
     
             // adjust the index of the next card to be shown
     
             self.imageIndex--;
         }
         else if (gesture.direction == UISwipeGestureRecognizerDirectionLeft)
         {
             // if we're at the last card, don't do anything
     
             if (self.imageIndex == ([self.imageNames count] - 1))
                 return;
     
             // if swiping to the left, it's like pulling a card off the 
             // top of the deck of cards
     
             option = UIViewAnimationOptionTransitionCurlUp;
     
             // adjust the index of the next card to be shown
     
             self.imageIndex++;
         }
     
         // now animate going to the next card; the view you apply the 
         // animation to is the container view that is holding the image
         // view. In this example, I have the image view on the main view,
         // but if you want to constrain the animation to only a portion of
         // the screen, you'd define a simple `UIView` that is the dimensions
         // that you want to animate and then put the image view inside
         // that view, and replace the `self.view` reference below with the
         // view that contains the image view.
     
         [UIView transitionWithView:self.view
                           duration:0.5
                            options:option
                         animations:^{
                             self.imageView.image = [UIImage imageWithContentsOfFile:self.imageNames[self.imageIndex]];
                         }
                         completion:nil];
     }
     

2. Obviously, if you want to write your own double tap gesture, go ahead and create a gesture for that, as well as a handler for that gesture, too, e.g.:

   UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
   tap.numberOfTapsRequired = 2;
   [self.imageView addGestureRecognizer:tap];
   

3. As others have suggested, if you don't want to write your own image handling code like above, you could use a variety of other controls, e.g. a UIPageViewController, a UICollectionView, or any of a dozen other classes that facilitate navigation between a group of images.

Answer 2

First of all, are you building the app for iOS 6 and above only? If yes, you can use UICollectionView with paging enabled and only one item visible at a time. The blog post "Creating a Paged Photo Gallery With a UICollectionView" explains how to do it.

If you are building app for below iOS 6, you can find similar custom grid view to replace UICollectionView like GMGridView or AQGridView. Another option is to build a custom UIScrollView with 3 UIImageView in it, and then you adjust scroll view offset accordingly when user scrolls to the end of the list. However, it takes some time to make the custom UIScrollView optimized like other existing open source grid views or UICollectionView.

For the double tap, you can have UITapGestureRecognizer with numberOfTapsRequired = 2 in the UICollectionView or grid view or the custom scroll view. Once the double tap happens, calculate on which index path did the tap happen (using indexPathForItemAtPoint: of UICollectionView, or indexForItemAtPoint: of AQGridView, or any other similar ways). Once you get the index, you can do things you want with the second array.

Answer 3

one way:

you need to put a swipe gesture recognizer onto the imageView and when you get the callback, choose the right image from the array.

UISwipeGestureRecognizer *g = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeDetected:)];

--

'better IMO would be a scrollview -- that would get you the animation when swiping'