CODEWITHSUNDEEP
iosuiimageviewuigesturerecognizersubview
tnek316
tnek316

Reputation: 640

Making an image view with the ability to swipe to a next image

I can not show the pictures because I don't have enough reputation but I am trying to have an imageview within the view that has a series of pictures that you can swipe to transition from one image to the next. But the only thing changing being the image in the image view, not the entire view.

enter image description here enter image description here

I think it is similar to this question on stack overflow here

I understand the gesture part and it works but it doesn't animate like i would like it too. I want it to work like when you're swiping through photos on the photos app. Any help?

This is the code I have but I think I just need to make the image view the subview

#import "PizzaViewController.h"

@interface PizzaViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *myImageView;
@property (nonatomic, strong) NSMutableArray *imgArray;
@end

@implementation PizzaViewController
@synthesize imgArray;

- (void)viewDidLoad
{
    [super viewDidLoad];
    imgArray = [[NSMutableArray alloc] initWithObjects:@"recipe instructions 1-01.png",@"recipe instructions 2-01.png",@"recipe instructions 3-01.png", nil];
    indexToShow = 0;
    UISwipeGestureRecognizer *gestureRight;
    UISwipeGestureRecognizer *gestureLeft;
    gestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self      action:@selector(swipeRight:)];
    gestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeLeft:)];
    [gestureLeft setDirection:(UISwipeGestureRecognizerDirectionLeft)];
    [[self view] addGestureRecognizer:gestureRight];
    [[self view] addGestureRecognizer:gestureLeft];
    self.myImageView.image = [UIImage imageNamed:[imgArray objectAtIndex:indexToShow]];
}

- (void)swipeRight:(UISwipeGestureRecognizer *)gesture
{
    if ((gesture.state == UIGestureRecognizerStateChanged) ||
        (gesture.state == UIGestureRecognizerStateEnded)) {

        if ((indexToShow-1) < -1) {
            indexToShow = imgArray.count-1;
        }
        self.myImageView.image = [UIImage imageNamed:[imgArray objectAtIndex:indexToShow]];
        indexToShow--;
    }
}

- (void)swipeLeft:(UISwipeGestureRecognizer *)gesture
{
    if ((gesture.state == UIGestureRecognizerStateChanged) ||
        (gesture.state == UIGestureRecognizerStateEnded)) {

        if ((indexToShow+1) > imgArray.count ) {
            indexToShow = 0;
        }
        self.myImageView.image = [UIImage imageNamed:[imgArray objectAtIndex:indexToShow]];
        indexToShow++;
    }
}

@end

Upvotes: 1

Views: 3448

Answers (1)

Wyetro
Wyetro

Reputation: 8588

To make it move like in photos you will need to put the UImageView into a UIScrollView

If you don't want it to move like photos do this:

Make an NSArray that contains UImages. Create an int that will be the index of the image in the array that you want to show. Have it so the gesture recognizer changes an int value (when swipe right increase by one, when swipe left decrease by one). And after each swipe change the image in the UImageView to the object at the index of the int value.

Code example:

Setting the array

- (void) setImages
{
        UIImage *image1 = [UIImage imageNamed:@"1.png"];
        UIImage *image2 = [UIImage imageNamed:@"2.png"];
        UIImage *image3 = [UIImage imageNamed:@"3.png"];
        UIImage *image4 = [UIImage imageNamed:@"4.png"];
        UIImage *image5 = [UIImage imageNamed:@"5.png"];
        UIImage *image6 = [UIImage imageNamed:@"6.png"];
        UIImage *image7 = [UIImage imageNamed:@"7.png"];
        UIImage *image8 = [UIImage imageNamed:@"8.png"];

        NSArray *pictuesArray = [[NSArray alloc] initWithObjects:image1, image2, image3, image4, image5, image6, image7, image8, nil];
self.pictures = pictuesArray;

}

Back and next buttons

- (IBAction)backButton:(UIButton *)sender
{
    if (self.arrayPosition > 0) {
        self.arrayPosition--;
        [self.image setImage:[self.pictures objectAtIndex:self.arrayPosition]];
    }

}

- (IBAction)nextButton:(UIButton *)sender
{
    if (self.arrayPosition < self.pictures.count - 1){
        self.arrayPosition++;
        [self.image setImage:[self.pictures objectAtIndex:self.arrayPosition]];
    }
}

self.pictures //is an array of the images
self.arrayPosition //is the index
self.image //is the UImageView

Upvotes: 1

Related Questions