How to change UIImageView image using SwipeGestureRecognizer?

Question

Hello everyone I have a UIViewController and UIImageView and i have a SwipeGestureRecognizer in it. So if the user swipe left or right it will change the UIImageView image.So far its working. I cannot use a UIScrollView the size of one of the images, with paging enabled.I want to achieve the effect of drag and see part the the next UIImageView as in the UIScrollView of images would do.

Answer 1

Implement Horizontal Table Scrolling

Create a TableView and transform the table

self.horizontalTableView.transform = CGAffineTransformMakeRotation(-M_PI * 0.5);

Then, you apply the transform in reverse on the content inside the cell.

CGAffineTransformMakeRotation(M_PI * 0.5)

If you want, you can then put it into another TableView inside a custom UITableViewCell, and have a vertical table of horizontal tables.

You get all the benefits of Native Scrolling

See this Tutorial:

http://www.raywenderlich.com/4723/how-to-make-an-interface-with-horizontal-tables-like-the-pulse-news-app-part-2

Answer 2

Simple answer :

Add two gesture for the image view and place one count variable, toggle the count variable based on the swipe and no. of the images. Finally change the image based on the count.

Use this code its working fine and simple too.

- (void)addAnimationPresentToView:(UIView *)viewTobeAnimated
{
    CATransition *transition = [CATransition animation];
    transition.duration = 0.30;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [transition setValue:@"IntroSwipeIn" forKey:@"IntroAnimation"];
    transition.fillMode=kCAFillModeForwards;
    transition.type = kCATransitionPush;
    transition.subtype =kCATransitionFromRight;
    [viewTobeAnimated.layer addAnimation:transition forKey:nil];

}

- (void)addAnimationPresentToViewOut:(UIView *)viewTobeAnimated
{
    CATransition *transition = [CATransition animation];
    transition.duration = 0.30;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [transition setValue:@"IntroSwipeIn" forKey:@"IntroAnimation"];
    transition.fillMode=kCAFillModeForwards;
    transition.type = kCATransitionPush;
    transition.subtype =kCATransitionFromLeft;
    [viewTobeAnimated.layer addAnimation:transition forKey:nil];

}
                - (void)viewDidLoad
                {
                    [super viewDidLoad];
                    count = 0;
                    // Do any additional setup after loading the view from its nib.
                    [self.imageViewSwipe setUserInteractionEnabled:YES];
                    UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
                    UISwipeGestureRecognizer *swipeRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeRight:)];

                    // Setting the swipe direction.
                    [swipeLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
                    [swipeRight setDirection:UISwipeGestureRecognizerDirectionRight];

                    // Adding the swipe gesture on image view
                    [self.imageViewSwipe addGestureRecognizer:swipeLeft];
                    [self.imageViewSwipe addGestureRecognizer:swipeRight];


                }
                -(void)changeImage
                {
                    switch (count) {
                        case 1:
                            self.imageViewSwipe.image = [UIImage imageNamed:@"Screen Shot 2013-09-17 at 10.57.51 AM.png"];
                            break;
                        case 2:
                            self.imageViewSwipe.image = [UIImage imageNamed:@"Screen Shot 2013-09-17 at 10.58.04 AM.png"];
                            break;
                        case 3:
                            self.imageViewSwipe.image = [UIImage imageNamed:@"Screen Shot 2013-09-17 at 10.58.00 AM.png"];
                            break;

                        default:
                            break;
                    }
                }
                -(void)handleSwipe:(id)sender
                {
                 if(count < 4)
                 {
                     count++;
                     UIImageView *moveIMageView = self.imageViewSwipe;
                     [self addAnimationPresentToView:moveIMageView];
                     [self changeImage];
                 }

                }
                -(void)handleSwipeRight:(id)sender
                {
                    if(count>0)
                    {
                        count--;
                  UIImageView *moveIMageView = self.imageViewSwipe;
                 [self addAnimationPresentToViewOut:moveIMageView];
                        [self changeImage];
                    }

                }
                    -(void)handleSwipe:(id)sender
                    {
                     if(count < 4)
                     {
                         count++;
                         [self changeImage];
                     }

                    }
                    -(void)handleSwipeRight:(id)sender
                    {
                        if(count>0)
                        {
                            count--;
                            [self changeImage];
                        }

                    }

Answer 3

-(void)panTableView:(UISwipeGestureRecognizer *)pan{
    if (pan.state==UIGestureRecognizerStateEnded) {
        int curr=currentPage;

        if (pan==self.panGestureLeft)
        {
            // user dragged towards the right

                CATransition *transition = [CATransition animation];
                transition.duration = 0.35;
                transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
                transition.type = kCATransitionPush;
                transition.subtype =kCATransitionFromRight;
                transition.delegate = self;
                [scrollview.layer addAnimation:transition forKey:nil];


        }
        else if (pan==self.panGestureRight)
        {
            // user dragged towards the left

                CATransition *transition = [CATransition animation];
                transition.duration = 0.35;
                transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
                transition.type = kCATransitionPush;
                transition.subtype =kCATransitionFromLeft;
                transition.delegate = self;
                [scrollview.layer addAnimation:transition forKey:nil];


        }



}

}

Answer 4

I think the best is use UIPanGestureRecognizer:

UIPanGestureRecognizer * pan1 = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(moveObject:)];
pan1.minimumNumberOfTouches = 1;
[image1 addGestureRecognizer:pan1];

-(void)moveObject:(UIPanGestureRecognizer *)pan;
{
 image1.center = [pan locationInView:image1.superview];
}

when you start dragging check the somehow the direction. if the direction is left to right, add the "before" image to the screen with -image.width , and in the move method, move this imageBefore.center = [pan locationInView:image1.superview]; too. If the direction is right to left, add the "next" image to the scree with +screensize+image.width, and int he move method, move this imageNext.center = [pan locationInView:image1.superview]; too.

I haven't tried this, but i think it should work. I hope it helps

EDIT:

I found for you how to detect the direction:

-(void)moveObject:(UIPanGestureRecognizer *)pan;
{

    CGPoint vel = [pan velocityInView:self.view];
    if (vel.x > 0)
    {
        // user dragged towards the right
        counter++;
    }  
    else
    {
        // user dragged towards the left
        counter--;
    }
}

Answer 5

Add scroollview to mainview(set frame appropriately)

[mainview addSubview:scr];

write a method like:

- (void)setupScrollView:(UIScrollView*)scrMain {
}

Then in viewDidLoad pass scrollview to method,

 [self setupScrollView:scr];



- (void)setupScrollView:(UIScrollView*)scrMain {
    // we have 10 images here.
    // we will add all images into a scrollView & set the appropriate size.

    for (int i=1; i<=5; i++) {
        // create image
//        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"sti%02i.png",i]];
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"sti%02i.png",i]];
        // create imageView
//        NSLog(@"===============>%d",i);
        UIImageView *imgV = [[UIImageView alloc] initWithFrame:CGRectMake((i-1)*scrMain.frame.size.width, 0, scrMain.frame.size.width, scrMain.frame.size.height)];
        // set scale to fill
        imgV.contentMode=UIViewContentModeScaleToFill;
        // set image
        [imgV setImage:image];
        // apply tag to access in future
        imgV.tag=i+1;
        // add to scrollView
        [scrMain addSubview:imgV];
    }
    // set the content size to 10 image width
    [scrMain setContentSize:CGSizeMake(scrMain.frame.size.width*5, scrMain.frame.size.height)];
    // enable timer after each 2 seconds for scrolling.
    // [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:nil userInfo:nil repeats:YES];
}

It let you move in both the directions manually.

Answer 6

*You can try with something imageView.layer to give some animation effect. *