How to Implement ScrollView In TableViewCell

Question

Hey guys I'm trying to implement a scroll with page control, like the iPhone home screen, but in a uitableview cell.

What I tried to do to attempt this is create a custom table view cell with a xib file, and placed the uipagecontrol and uiscrollview on it, and connected it with iboutlets to the uitableviewcell.

This is the code in the .h file for the custom cell.

@interface ScrollableCell : UITableViewCell <UIScrollViewDelegate>

@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;
@property (nonatomic, strong) IBOutlet UIPageControl *pageControl;
@property (nonatomic, strong) NSMutableArray *viewControllers; 

This is the code from the .m file for the custom cell after synthesizing the properties.

- (CGSize)contentSizeForPagingScrollView {
CGRect bounds = self.scrollView.bounds;
return CGSizeMake(bounds.size.width * [self.viewControllers count] , bounds.size.height );
} 

@- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
    // Initialization code

    UIView *blueView = [[UIView alloc] initWithFrame:CGRectZero];
    [blueView setBackgroundColor:[UIColor blueColor]];

    UIView *redView = [[UIView alloc] initWithFrame:CGRectZero];
    [redView setBackgroundColor:[UIColor redColor]];

    UIView *yellowView = [[UIView alloc] initWithFrame:CGRectZero];
    [yellowView setBackgroundColor:[UIColor yellowColor]]; 

    self.viewControllers = [NSArray arrayWithObjects:blueView, redView, yellowView,nil];

    for (UIView *view in self.viewControllers) {
        [view setFrame:CGRectMake([self.viewControllers indexOfObject:view]*self.scrollView.frame.size.width+5, 
                                  5, 
                                  self.scrollView.frame.size.width-10, 
                                  self.scrollView.frame.size.height-10.0)];
        [self.scrollView addSubview:view];

    }

    self.pageControl.numberOfPages = [self.viewControllers count];
    self.pageControl.currentPage = 0;

    self.scrollView.pagingEnabled = YES;
    self.scrollView.backgroundColor = [UIColor blackColor];
    self.scrollView.showsVerticalScrollIndicator = NO;
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.contentSize = [self contentSizeForPagingScrollView];
    self.scrollView.delegate = self;
    [self.contentView addSubview:self.scrollView];
    [self.contentView addSubview:self.pageControl];
}
return self;
}

-(void) scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat pageWidth = scrollView.frame.size.width;
int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
self.pageControl.currentPage = page;
}

Hope you guys can help me get this working. If there is a different approach/ better approach that what I'm attempting, let me know.

For visual reference of what I'm trying to achieve, i think the pulse news app fits the bill

http://itunes.apple.com/us/app/pulse-news-for-iphone/id377594176?mt=8

its a table view, with horizontal scrolling on each cell.

Thanks.

Answer 1

If there is a different approach/ better approach that what I'm attempting, let me know. For visual reference of what I'm trying to achieve, i think the pulse news app fits the bill.

If your main reference for designing this is the Pulse app, you should know that the developers actually did NOT resort to scrollviews. The Pulse app is all tableviews. One main vertical tableview and several horizontal "hacked" tableviews inside each cell that composes the vertical one.

Its quite a smart implementation for a tableview. But who better to explain this to you than the developers of Pulse themselves; they were invited to a lecture at Stanford for their iOS programming course. Its on iTunes U and it's at 6 min in the lecture called 10 Hacks to Go From Idea To #1 App. You should watch it and maybe rethink your app design if it suits you better.