Iphone – UIScrollView and UIPageControl within UITableView

iphoneuipagecontroluiscrollviewuitableviewxcode

I've seen lots of sources saying it is possible to include a UIScrollView with UIPageControl inside a UITableViewCell to be able to scroll horizontally (through a list of selectable images), but can't find any raw examples that does what I want. I've gotten my scroll view "working", but I am unsure how to go forward – hopefully someone can send me some guidance.

Within my cellForRowAtIndexPath, I create a cell, and add both a scrollView and pageControl as subviews. 

UITableViewCell *cell = [self.challengeListView dequeueReusableCellWithIdentifier:SubmitChallengeCellIdentifier];
    if(cell == nil){
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SubmitChallengeCellIdentifier] autorelease];
        cell.frame = CGRectMake(0, 0, 1000, 50);
    }   

    scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, tv.frame.size.width, 50)];
    [scrollView setContentSize:CGSizeMake(1000, 50)];
    [[cell contentView] addSubview:scrollView];

    pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 50, tv.frame.size.width, 50)];
    [pageControl setNumberOfPages:4];
    [[cell contentView] addSubview:pageControl];

I've attached a screenshot of what's being displayed

something

the bottom portion of the main view is my UITableView that contains the scrollView/pageControl (and it will scroll horizontally, as I can see the scrollerIndicator showing this), and I've got its method's set to the following:

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

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

My Scroll view will indicate a "horizontalScroller" and I am able to scroll back and forth, but obviously there's no content there. How do I go about populating the tableView/scrollView with say, a list of "clickable" images? Any direction would be greatly appreciated – preferably not a "hey this guy's done it somewhat similar, check out this link" but maybe more an explanation of how this functionality should be implemented correctly (ESPECIALLY in regards to iOS 3.0+ – it is my understanding Apple has made our lives easier in implementing this)

Best Answer

I've solved my own problem; maybe the reason no once answered me is because its a minor implementation once you understand each view's purpose.

From within cellForRowAtIndexPath: I created a standard UITableViewCell, however I altered the frame of the cell to my own custom frame of 1000 width by 50 height (catered to my needs for project).

I then created a UIScrollView, set it to the following (keep in mind I have my tableView defined in IB, so I'm mapping some of my height/widths to those values):

scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, tv.frame.size.width, 78)];

I then create the desired image view (I realize I will next create a loop that does many images and lays them out across the scroll view):

UIImage *image = [UIImage imageNamed:@"dummy.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(0, 0, 80, 78);
[scrollView addSubview: imageView];

Here's the part I was missing. After adding the scrollView to the cell contents, you need to use the UIPageControl (which didn't seem obvious to me for this implementation at first) to setup the actual "visual horizonal scrolling" affect:

   [[cell contentView] addSubview:scrollView];

pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 50, tv.frame.size.width, 50)];
[pageControl setNumberOfPages:4];
[[cell contentView] addSubview:pageControl];

Hope that helps someone's search - I spent quite some time on Google looking for the example I just explained and didn't have much luck other than the general overview of how it would work.

Related Topic