Question

I have 8 images in the array and UIImageView that displays one image from the array at a time. I also have UIPanGestureRecognizer on UIImageView so when user moves their finger sideways on the image it changes (kind a like invisible scroller top of the image). I’m using pan gesture’s translation value to change the image. This all works but not the way I want it to. The images change way too quickly, just short finger pan scrolls through the images. Is there a way to require longer pan to change the images? Or any other ways to make this “smoother” for the user?

.h

@interface FirstViewController : UIViewController
    @property (nonatomic, retain) IBOutlet UIImageView *imageView;
    - (IBAction)pan:(UIGestureRecognizer *)panGesture;

.m

@interface FirstViewController () {
    NSArray * imageArray;
    int _currentIndex;
}

@end

@implementation FirstViewController

- (IBAction)pan:(UIPanGestureRecognizer *)panGesture {
  //  NSLog(@"panned");
    CGPoint translation = [panGesture translationInView:self.view];
    [self.panLabel setText: NSStringFromCGPoint(translation)];
    NSLog(@"%@ translation", NSStringFromCGPoint(translation));

    if (translation.x<-1) {
        _currentIndex=(_currentIndex<=0)?0:_currentIndex-1;
        UIImage *img = [UIImage imageNamed:[imageArray objectAtIndex:_currentIndex]];
        [self.imageView setImage:img];
    }
    else if(translation.x>1){
        _currentIndex=(_currentIndex>=7)?7:_currentIndex+1;
        UIImage *img = [UIImage imageNamed:[imageArray objectAtIndex:_currentIndex]];
        [self.imageView setImage:img];
    }
    [panGesture setTranslation:CGPointZero inView:self.view];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    imageArray = [[NSArray alloc]
                  initWithObjects:@"image1.jpg", @"image2.jpg", @"image3.jpg", @"image4.jpg", @"image5.jpg", @"image6.jpg", @"image7.jpg", @"image8.jpg", nil];
}

Answer 1

You could modify your code to track X pan over time. This would allow you to set a variable for your pan amount. Modified code for this is below:

@interface FirstViewController () {
    NSArray * imageArray;
    int _currentIndex;

    CGFloat _currentPanXAmount;
    CGFloat _panThreshold;
}

@end

@implementation FirstViewController

- (IBAction)pan:(UIPanGestureRecognizer *)panGesture {
    CGPoint translation = [panGesture translationInView:self.view];

    _currentPanXAmount += translation.x;

    [self.panLabel setText: NSStringFromCGPoint(translation)];
    NSLog(@"%@ translation", NSStringFromCGPoint(translation));

    if (_currentPanXAmount < (-1 * _panThreshold)) {
        _currentIndex=(_currentIndex<=0)?0:_currentIndex-1;
        UIImage *img = [UIImage imageNamed:[imageArray objectAtIndex:_currentIndex]];
        [self.imageView setImage:img];
        _currentPanXAmount = 0.0;
    }
    else if(_currentPanXAmount > _panThreshold){
        _currentIndex=(_currentIndex>=7)?7:_currentIndex+1;
        UIImage *img = [UIImage imageNamed:[imageArray objectAtIndex:_currentIndex]];
        [self.imageView setImage:img];
        _currentPanXAmount = 0.0;
    }
    [panGesture setTranslation:CGPointZero inView:self.view];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    imageArray = [[NSArray alloc]
                  initWithObjects:@"image1.jpg", @"image2.jpg", @"image3.jpg", @"image4.jpg", @"image5.jpg", @"image6.jpg", @"image7.jpg", @"image8.jpg", nil];

    // Make this larger for slower transitions and smaller for faster transitions.
    _panThreshold = 10.0;
}