UIScrollview within UITableViewCell and maintaining scrollview page

Question

I have a UIScrollView within a UITableViewCell for being able to scroll through images within a cell. However, as a cell is reused the scroll position/content is reloaded and therefore the cell doesn't remember what scroll position (page) it was on when it comes into view again.

What's the best way to have a scroll view within a UITableView cell and have it maintain position as it comes back into view. The AirBnB app (https://itunes.apple.com/us/app/airbnb/id401626263?mt=8) seems to have accomplished this for example.

Answer 1

You need to keep track of your scroll views' content offset in a property. In the example below, I do this with a mutable dictionary. In cellForRowAtIndexPath:, I give the scroll view a tag and set the controller as the delegate. In the scroll view delegate method, scrollViewDidEndDecelerating:, the scroll view's content offset is set as the object for the key corresponding to the scroll view's tag. In cellForRowAtIndexPath:, I check for whether the indexPath.row (converted to an NSNumber) is one of the keys of the dictionary, and if so, restore the correct offset for that scroll view. The reason I add 1 to the tags is because the table view has its own scroll view which has a tag of 0, so I don't want to use 0 as a tag for one of the cell's scroll views.

So in cellForRowAtIndexPath, you need something like this:

cell.scrollView.tag = indexPath.row + 1;
cell.scrollView.delegate = self;

if ([self.paths.allKeys containsObject:@(indexPath.row + 1)]) {
    cell.scrollView.contentOffset = CGPointMake([self.paths[@(indexPath.row + 1)] floatValue],0);
}else{
    cell.scrollView.contentOffset = CGPointZero;
}
return cell;

And in the delegate method:

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    if (scrollView.tag != 0)
        [self.paths setObject:@(scrollView.contentOffset.x) forKey:@(scrollView.tag)];
}

paths is a property (NSMutableDictionary) that I create in viewDidLoad.

Answer 2

Use my tableView customs cells

homeScrollCell.h

#import <UIKit/UIKit.h>
#import "MyManager.h"

@interface homeScrollCell : UITableViewCell<UIScrollViewDelegate>
{
    MyManager *manager;
    UIScrollView *__scrollView;
}
-(void)setPage:(int)page;
@property int currentPage;
@end

homeScrollCell.m

#import "homeScrollCell.h"

@implementation homeScrollCell

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

        manager=[MyManager sharedManager];
        __scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width,self.bounds.size.height)];
        [__scrollView setAutoresizingMask:UIViewAutoresizingFlexibleHeight];
        NSInteger viewcount= 3;

        for(int i = 0; i< viewcount; i++)
        {
            CGFloat x = i * self.bounds.size.width;

            UIView *view = [[UIView alloc] initWithFrame:CGRectMake(x, 0,self.bounds.size.width,self.bounds.size.height)];
             [view setAutoresizingMask:UIViewAutoresizingFlexibleHeight];

            UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(50, 20, 200, 50)];
            [label setBackgroundColor:[UIColor redColor]];
            label.text=[NSString stringWithFormat:@"Hi, I am label %i",i];
            [view addSubview:label];
             view.backgroundColor = [UIColor greenColor];

            [__scrollView addSubview:view];
        }

        [__scrollView setBackgroundColor:[UIColor redColor]];
        __scrollView.contentSize = CGSizeMake(self.bounds.size.width *viewcount, 100);
        __scrollView.pagingEnabled = YES;
        __scrollView.bounces = NO;
        __scrollView.delegate=self;
        [self addSubview:__scrollView];

        // Initialization code
    }
    return self;
}

-(void)setPage:(int)page
{
    CGFloat pageWidth = __scrollView.frame.size.width;
    float offset_X=pageWidth*page;
    [__scrollView setContentOffset:CGPointMake(offset_X, __scrollView.contentOffset.y)];
    _currentPage=page;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    static NSInteger previousPage = 0;

    CGFloat pageWidth = scrollView.frame.size.width;
    float fractionalPage = scrollView.contentOffset.x / pageWidth;

    NSInteger page = lround(fractionalPage);

    if (previousPage != page) {
        _currentPage=page;
        [manager setpage:_currentPage ForKey:[NSString stringWithFormat:@"%i",self.tag]];

        previousPage = page;
    }
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

@end

And use a Singleton file for keeping record or pages inside cell.

MyManager.h

#import <Foundation/Foundation.h>

@interface MyManager : NSObject

+ (id)sharedManager;

-(void)setpage:(int)page ForKey:(NSString*)key;
-(int)getpageForKey:(NSString*)key;

@end

MyManager.m

#import "MyManager.h"

static NSMutableDictionary *dictionary;

@implementation MyManager

#pragma mark Singleton Methods

+ (id)sharedManager {
    static MyManager *sharedMyManager = nil;
    static dispatch_once_t onceToken;


    dispatch_once(&onceToken, ^{
        sharedMyManager = [[self alloc] init];
    });
    return sharedMyManager;
}

-(void)setpage:(int)page ForKey:(NSString*)key
{
    [dictionary setValue:[NSString stringWithFormat:@"%i",page] forKey:key];
}

-(int)getpageForKey:(NSString*)key
{
  return [[dictionary valueForKey:key] intValue];
}

- (id)init {
    if (self = [super init]) {
       dictionary=[[NSMutableDictionary alloc] init];
    }
    return self;
}

- (void)dealloc {
    // Should never be called, but just here for clarity really.
}

@end

And use this custom cell in cellForRow as

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Home Scroll Cell";
    homeScrollCell *cell =[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell==nil) {
        cell = [[homeScrollCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    cell.tag=indexPath.row;
    [cell setPage:[manager getpageForKey:[NSString stringWithFormat:@"%i",indexPath.row]]];

    return cell;
}

Set your page inside CustomCell and scroll and after re scrolling get back to previous position will show you page set by you before scrolling. It will persist your page moved as it is.

Download And Run

Answer 3

rdelmar's answer is missing something. scrollViewDidEndDecelerating will only be called if a users scroll triggers the deceleration behaviour.

A drag only scroll won't call this method so you will get inconsistent behaviour for the user who won't distinguish between the two types of scroll. You need to catch it with scrollViewDidEndDragging:willDecelerate

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{   
    if (!decelerate) {
        self.tableCellContentOffsets[@(scrollView.tag)] = @(scrollView.contentOffset.x);
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{   
    self.tableCellContentOffsets[@(scrollView.tag)] = @(scrollView.contentOffset.x);
}