ScrollView of images in ios

Question

Hi my requirement is showing image in scrollview along with that it should display next and previous button.User can scroll the image as well as use buttons to move images.

I have doubt about how to get the index/tag/imagename or anything else when user scroll based on that values buttons should be updated.

Here is my Code

[self arrayInitiaisation];  
scrollview.pagingEnabled = YES;
scrollview.alwaysBounceVertical = NO;
scrollview.alwaysBounceHorizontal = YES;
NSInteger numberOfViews = 4;

for (int i = 0; i < numberOfViews; i++) {

    CGFloat xOrigin = i*320;
    imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"image%d",i+1]];
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.scrollview addSubview:imageView];
    imageView.tag = i;
    ...  

Array Initialisation method

-(void) arrayInitialisation {

  count=0;
  [super viewDidLoad];
  images=[NSMutableArray arrayWithObjects : [UIImage imageNamed:@"image1.png"],
    [UIImage imageNamed :@"image2.png"],
    [UIImage imageNamed :@"image3.png"],
    [UIImage imageNamed :@"image4.png"],nil];
    [imageView setImage:[images objectAtIndex:0]];
    NSLog(@"Array Length :%d",images.count);
    [previous setEnabled:NO];
} 

Action Methods

- (IBAction)nextButton:(id)sender {}
- (IBAction)prevButton:(id)sender {}

scroll is working correctly but when user clicks on prev and next image is not updating on 'imageview'

Here is my updated code

    int count=0;

    - (void)viewDidLoad
    {
    [super viewDidLoad];
    [self arrayInitialisation];
    [scrollview setScrollEnabled:YES];
    self.scrollview =[[UIScrollView alloc] initWithFrame:CGRectMake(30 , 30, 320, 412)];
    self.scrollview.delegate=self;
    scrollview.pagingEnabled = YES;
    scrollview.alwaysBounceVertical=NO;
    scrollview.alwaysBounceHorizontal=YES;
    scrollview.showsHorizontalScrollIndicator=NO;
    NSInteger numberOfViews = 4;
    for (int i = 0; i < numberOfViews; i++) {
    CGFloat xOrigin = i*320;
    imageView = [[UIImageView alloc]initWithFrame:CGRectMake(xOrigin, 0, 320, 412)];
    imageView.image = [images objectAtIndex:i];
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.scrollview addSubview:imageView];
    imageView.tag=i;


}

scrollview.contentSize = CGSizeMake(320*numberOfViews, 412);
scrollview.contentOffset = CGPointMake(0,0);
[self.view addSubview:self.scrollview];
}

    - (void)didReceiveMemoryWarning
      {
         [super didReceiveMemoryWarning];
         }
      -(void) arrayInitialisation{
       count=0;
        [super viewDidLoad];
       images=[NSArray arrayWithObjects :  [UIImage imageNamed:@"image1.png"],
        [UIImage imageNamed :@"image2.png"],
        [UIImage imageNamed :@"image3.png"],
        [UIImage imageNamed :@"image4.png"],nil];
     [imageView setImage:[images objectAtIndex:0]];
     NSLog(@"Array Length :%d",images.count);
    [previous setEnabled:NO];
    }


   - (IBAction)nextButton:(id)sender {
    if(count==0){
    count++;
    NSLog(@"Next Button : if Loop %d",count);
    [imageView setImage:[images objectAtIndex:count]];
    [previous setEnabled:YES];

      }
       else{

    [previous setEnabled:YES];
    count++;
     NSLog(@"Next Button : else Loop %d",count);
    if(count <images.count){
        [imageView setImage:[images objectAtIndex:count]];
    }
    else{
        [next setEnabled:NO];

    }
    }

     }

      - (IBAction)prevButton:(id)sender {
       if(count==0){
      //count--;
       NSLog(@"prev Button : if Loop %d",count);
     [imageView setImage:[images objectAtIndex:count]];
     [previous setEnabled:NO];
    [next setEnabled:YES];
    }
    else{
    count--;
     NSLog(@"prev Button : else Loop %d",count);
    [imageView setImage:[images objectAtIndex:count]];
    [previous setEnabled:YES];
    //[next setEnabled:YES];
   }
  }
    #pragma mark - ScrollView Delegate

    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:    (BOOL)decelerate{
    //NSLog(@"scrollViewDidEndDragging");
    /* count=count+1;
    NSLog(@"scrollViewDidEndDragging : %d",count);*/
   }
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //NSLog(@"scrollViewDidScroll");

    }
     - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset NS_AVAILABLE_IOS(5_0){
    //NSLog(@"scrollViewWillEndDragging");
    count=count+1;
    NSLog(@"scrollViewWillEndDragging : %d",count);

       }  

Answer 1

I have left and right button for scroll images, and imageview width is same.

I am writing code for scroll image at pressing button.

int pos=0;// ViewDiaLoad

- (IBAction)OnClickLeftButton:(UIButton*)sender
{
    if(pos>0)
    {
        pos -=1;
        [scrlDemandMenu scrollRectToVisible:CGRectMake(pos*scrlDemandMenu.frame.size.width, 0, scrlDemandMenu.frame.size.width, scrlDemandMenu.frame.size.height) animated:YES];

    }
}

- (IBAction)OnClickRightButton:(UIButton*)sender
{
    if(pos<numberOfImages)
    {
        pos +=1;
        [scrlDemandMenu scrollRectToVisible:CGRectMake(pos*scrlDemandMenu.frame.size.width, 0, scrlDemandMenu.frame.size.width, scrlDemandMenu.frame.size.height) animated:YES];
    }
} 

Set scrollView Deleagte

Scroll View delegate Method

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
   pos=scrollView.contentOffset.x/scrollView.frame.size.width;
}

Answer 2

You can use UIPageControl and set and get image according to page index. For more information check out this link

Answer 3

Try below piece of code. I hope it will help. Put this in your .h file

IBOutlet UIScrollView *scrollView;
IBOutlet UIPageControl *pageControl;

NSMutableArray *arrImages;
NSInteger page;

Now in your - (void)viewDidLoad put following lines.

int x = 30;
for (int i=0; i< arrImages.count; i++)
{
    UIImageView *imgShow = [[UIImageView alloc]initWithFrame:CGRectMake(x+20, 50, self.view.frame.size.width-100, self.view.frame.size.height-180)];
    imgShow.backgroundColor = [UIColor whiteColor];
    imgShow.image = [UIImage imageNamed:[arrImages objectAtIndex:i]];
    imgShow.contentMode = UIViewContentModeScaleAspectFit;
    [scrollView addSubview:imgShow];

    x = x+scrollView.frame.size.width;
}
scrollView.contentSize = CGSizeMake(5*self.view.frame.size.width, 0);

pageControl.backgroundColor = [UIColor clearColor];
pageControl.pageIndicatorTintColor = [UIColor grayColor];
pageControl.currentPageIndicatorTintColor = [UIColor blueColor];
[pageControl setTintAdjustmentMode:UIViewTintAdjustmentModeDimmed];
pageControl.numberOfPages = arrTitle.count;
pageControl.currentPage = 0;

implement scroll view delegate.

#pragma mark - ScrollView Delegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView1
{
    CGFloat pageWidth = scrollView.frame.size.width;
    float fractionalPage = scrollView.contentOffset.x / pageWidth;
    page = lround(fractionalPage);
    pageControl.currentPage = page;
}

- (IBAction)prevButton:(UIButton *)sender
{
    page = page-1;

    UIButton *btn = (UIButton *)[sender viewWithTag:sender.tag];
    // write your code

    for (id obj in btn.subviews)
   {
        if ([obj isKindOfClass:[UIImageView class]])
        {
            // write your code
        }
        else
        {
            // write your code
        }
    }
}

- (IBAction)nextButton:(UIButton *)sender
{
    page = page+1;

    UIButton *btn = (UIButton *)[sender viewWithTag:sender.tag];
    // write your code

    for (id obj in btn.subviews)
    {
        if ([obj isKindOfClass:[UIImageView class]])
        {
            // write your code
        }
        else
        {
            // write your code
        }
    }
 }