UIScrollView with UIPageControl in UITableViewCell

Question

I am trying to create something like this here.

Here is the sample code which I tried:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *simpleTableIdentifier = @"RefundMeCell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

if (cell == nil)
{
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    cell.selectionStyle=UITableViewCellSelectionStyleNone;
}

UIImageView *rowImageView=(UIImageView*)[cell viewWithTag:1];
UILabel *questionOptionLabel=(UILabel*)[cell viewWithTag:2];
UIImageView *collapseImageView=(UIImageView*)[cell viewWithTag:3];
UIScrollView *scrollView=(UIScrollView*)[cell viewWithTag:4];
UIImageView *sampleImageView=(UIImageView*)[cell viewWithTag:5];
UIButton *sampleButton=(UIButton*)[cell viewWithTag:6];
UILabel *instructionHeaderLabel=(UILabel*)[cell viewWithTag:7];
UILabel *instructionsLabel=(UILabel*)[cell viewWithTag:8];
UIPageControl *pgCntrl=(UIPageControl*)[cell viewWithTag:9];

[rowImageView setImage:[UIImage imageNamed:@"normalcell.png"]];
questionOptionLabel.text = @"";
collapseImageView.image = nil;
scrollView.hidden = YES;
sampleImageView.image = nil;sampleImageView.hidden = YES;
sampleButton.hidden = YES;
instructionHeaderLabel.text = @"";instructionHeaderLabel.hidden = YES;
instructionsLabel.text = @"";instructionsLabel.hidden = YES;
pgCntrl.hidden = YES;


[sampleButton addTarget:self action:@selector(userImageButtonTapped:) forControlEvents:UIControlEventTouchUpInside];


sampleImageView.image = nil;

[collapseImageView setImage:[UIImage imageNamed:@"down.png"]];
questionOptionLabel.text=@"";
instructionHeaderLabel.text=@"Instructions";

if (indexPath.row == 0)
{
    instructionHeaderLabel.hidden = NO;
    sampleImageView.image = self.barcodeImage;
    scrollView.hidden = NO;
    scrollView.delegate = self;
    pgCntrl.hidden = NO;
    sampleImageView.hidden = NO;
    sampleButton.hidden = NO;
    pgCntrl.numberOfPages = 5;
    pgCntrl.currentPage = 0;
    for (int i = 0; i<5; i++)
    {
        [scrollView addSubview:sampleImageView];
        [scrollView addSubview:sampleButton];
    }
    scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * 5, scrollView.frame.size.height);
}
else
{
    instructionHeaderLabel.hidden = NO;
    sampleImageView.image = nil;
    scrollView.hidden = NO;
    scrollView.delegate = self;
    pgCntrl.hidden = NO;
    sampleImageView.hidden = NO;
    sampleButton.hidden = NO;
    pgCntrl.numberOfPages = 3;
    pgCntrl.currentPage = 0;
    scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * 3, scrollView.frame.size.height);
}

return cell;

}

My problem is, how I can add UIImageView, UILabel, etc when UIScrollView is scrolled to second page?

It should look like this

Currently UIImageView, UILabel is shown only first time. when I scroll to second page, UIImageView and UILabel scroll back and nothing is shown on second page.

Why do you need to add images when you scroll? Can you just add it right away and scroll will just reveal them? — Oleg Fedorov, Jan 30 '14 at 11:48
@ image, you can upload an image to websites like tinypic and share the link to it. @ second page, do you want to lazy-load the data? If that is what you want, you might find some open-source libraries for that. :) — Sufian, Jan 30 '14 at 12:04
@OlegFedorov I need to take product images from different dimensions(top,bottom,etc) and label provides instructions. — Maverick, Jan 30 '14 at 12:13
@Sufian this is the tinyurl link [here](http://tinypic.com/view.php?pic=97snib&s=8) — Maverick, Jan 30 '14 at 12:17
@Maverick, you can add this link to your question. http://oi60.tinypic.com/97snib.jpg — Sufian, Jan 30 '14 at 12:23
@Maverick so you want each page to have an image and a label? — Alexis, Jan 30 '14 at 12:33
@jafar yes u are correct, each image and label text would be different and this will depend on the data that I receive from server. — Maverick, Jan 30 '14 at 12:41
@Maverick if jafar has answered your question, accept the answer by clicking on the tick. — Sufian, Jan 30 '14 at 14:22

score 1 · Answer 1 · answered Mar 09 '15 at 12:50

Here is my code

- (void)viewDidLoad
{
    [super viewDidLoad];
  tableObj.dataSource = self;
  tableObj.delegate = self;
  scrollView.delegate = self;
    // customObj = [[customCellForText alloc]init];
   imageArray = [[NSMutableArray alloc]initWithObjects:[UIImage imageNamed:@"image1.jpg"],
  [UIImage imageNamed:@"image2.jpg"],
  [UIImage imageNamed:@"man-actor-Ashton-Kutcher-Wallpaper.jpg"],
  [UIImage imageNamed:@"Man-Booker-Prize-judges-p-011.jpg"],
  [UIImage imageNamed:@"man-curl.jpg"]
  ,nil];

    // pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(170, 180, 100, 30)];

}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
  return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
  return 5;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
  static NSString *cellIdentifier = @"cell";
  customCellForText *cell = [tableObj dequeueReusableCellWithIdentifier:cellIdentifier];
   NSArray *nib = [[NSBundle mainBundle]loadNibNamed:@"customCellForText" owner:self options:nil];
   cell = [nib objectAtIndex:0];

    scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(130, 80, 150, 100)];
    scrollView.pagingEnabled = YES;
    scrollView.delegate = self;
    [scrollView setShowsHorizontalScrollIndicator:NO];
    //[scrollView setShowsVerticalScrollIndicator:NO];
   self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * imageArray.count, self.scrollView.frame.size.height);
    [cell.contentView addSubview:scrollView];

    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;

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

    }

  pageControl = [[UIPageControl alloc]init];
  pageControl.frame = CGRectMake(170, 180, 100, 30);
  pageControl.numberOfPages = imageArray.count;
  pageControl.currentPage = 0;
  pageControl.hidesForSinglePage = YES;
  [cell.contentView addSubview:pageControl];
  [pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];

  cell.nameLabel.text=@"amol";

  return cell;
}

- (void)scrollViewDidScroll:(UIScrollView *)sender{

    CGFloat pageWidth = sender.frame.size.width;
     int newPage = floor((sender.contentOffset.x - pageWidth / 2) / pageWidth) + 1;

  self.pageControl.currentPage = newPage;

  }

score 0 · Accepted Answer · answered Jan 30 '14 at 12:46

I would recommend you to use a different approach because your solution is not scalable. If you want n pages you'll have to add n images & label to your scroll view which will be a mess and also not memory efficient.

Give a look at this library I think it will suit your need.

UIScrollView with UIPageControl in UITableViewCell

2 Answers2