UITableView with custom paging-like behaviour

Question

I am trying to implement paging for custom sized pages in the UITableView. What I am trying to achieve is to have the top of the active cell align with the top of the tabl

Answer 1

If you turn off paging you can use the UIScrollView delegate function:

-(void)scrollViewWillEndDragging:(UIScrollView*)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint*)targetContentOffset {

    // Get index path for target row
    NSIndexPath* indexPath = [self.tableView indexPathForRowAtPoint:(*targetContentOffset)];

    // Set new target
    (*targetContentOffset) = [self.tableView rectForRowAtIndexPath:indexPath].origin;

}

Answer 2

I solved this problem with this code:

- (void) scrollViewWillBeginDragging:(UIScrollView *)scrollView {

    CGFloat pageWidth = self.collectionView.frame.size.width + 10 /* Optional Photo app like gap between images */;

    _currentPage = floor((self.collectionView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;

    NSLog(@"Dragging - You are now on page %i", _currentPage);
}

-(void) scrollViewWillEndDragging:(UIScrollView*)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint*)targetContentOffset {

    CGFloat pageWidth = self.collectionView.frame.size.width + 10;

    int newPage = _currentPage;

    if (velocity.x == 0) // slow dragging not lifting finger
    {
        newPage = floor((targetContentOffset->x - pageWidth / 2) / pageWidth) + 1;
    }
    else
    {
        newPage = velocity.x > 0 ? _currentPage + 1 : _currentPage - 1;

        if (newPage < 0)
            newPage = 0;
        if (newPage > self.collectionView.contentSize.width / pageWidth)
            newPage = ceil(self.collectionView.contentSize.width / pageWidth) - 1.0;
    }

    NSLog(@"Dragging - You will be on %i page (from page %i)", newPage, _currentPage);

    *targetContentOffset = CGPointMake(newPage * pageWidth, targetContentOffset->y);
}

Thanks to http://www.mysamplecode.com/2012/12/ios-scrollview-example-with-paging.html for pointing the right way.

Answer 3

Implement scrollViewWillEndDragging:withVelocity:targetContentOffset: to return top coordinate of the cell closest to targetContentOffset, not closest to your starting offset. The solution jjv360 provided does that well, but you might want to tweak it a bit depending on how high your cells are on average (jjv360's solution might be too snappy on really big cells).

I would just like to add that you can make UITableView's deceleration faster to behave more like paged UIScrollView by changing its decelerationRate property (just do it once in init/viewDidLoad/wherever).

self.tableView.decelerationRate = UIScrollViewDecelerationRateFast;