How to change image from UIImageView by sliding right or left from UIViewController

Question

I have a UIViewController with a UIImageView in it and a array of UIImage. How Can I develop slide feature to right or left in order to change the image to the next array position?

Answer 1

The common approach is a UIScrollView the size of one of the images, with paging enabled.

Add the images as subviews and set the content size like this...

NSArray *images;
CGSize imageSize;

self.scrollView.frame = CGRectMake(10,10,imageSize.width,imageSize.height);
self.scrollView.contentSize = CGSizeMake(imageSize.width * images.count, imageSize.height);
self.scrollView.pagingEnabled = YES;

CGFloat xPos = 0.0;

for (UIImage *image in images) {
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.frame = CGRectMake(xPos, 0.0, imageSize.width, imageSize.width);
    [self.scrollView addSubview:imageView];
    xPos += imageSize.width;
    // assuming ARC, otherwise release imageView
}

You might also turn off bounce, scrolling indicators, etc. depending on the details of the effect you want.

Answer 2

By using UIScrollView and UIPageControl, drag n drop UIScrollView and UIPageControl make sure they does not overlap,create IBoutLet of both.Set

- (void)viewDidLoad
{
    [super viewDidLoad];
    // 1
imageArray = [NSArray arrayWithObjects:
                     [UIImage imageNamed:@"image2.jpg"],
                     [UIImage imageNamed:@"man-actor-Ashton-Kutcher-Wallpaper.jpg"],
                     [UIImage imageNamed:@"image1.jpg"],
                     [UIImage imageNamed:@"man-curl.jpg"],
                     [UIImage imageNamed:@"man-in-suit.jpg"],
                     nil];


  for (int i = 0; i < imageArray.count; i++) {
    CGRect frame;
    frame.origin.x = self.scrollView.frame.size.width * i;
    frame.origin.y = 0;
    frame.size = self.scrollView.frame.size;

    UIImageView *subview = [[UIImageView alloc] initWithFrame:frame];
    subview.image = [imageArray objectAtIndex:i];
    subview.contentMode = UIViewContentModeScaleAspectFit;
    [self.scrollView addSubview:subview];
  }

  self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * imageArray.count, self.scrollView.frame.size.height);
  pageControl.numberOfPages = imageArray.count;
}

- (void)scrollViewDidScroll:(UIScrollView *)sender {
    // Update the page when more than 50% of the previous/next page is visible
  CGFloat pageWidth = self.scrollView.frame.size.width;
  int page = floor((self.scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
  self.pageControl.currentPage = page;
}

Answer 3

You can simply get swipe direction is left or right with UISwipeGestureRecognizer like this

swipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(detectSwipe:)];
[swipeGesture setNumberOfTouchesRequired:1];
[swipeGesture setDirection:UISwipeGestureRecognizerDirectionDown | UISwipeGestureRecognizerDirectionUp];
[appView addGestureRecognizer:swipeGesture];

The Method detectSwipe declare for handle your forward and backward to play with UIImage array. You can also check the Apple's SimpleGestureRecognizers Demo

Hope it helps you !