实现横向tableView功能，仿新闻首页标签栏和内容均可滚动

要实现横向滚动的像新闻首页这样的scrollView，用最笨的方法就是scrollView上添加不同的view，没有优化，没有缓存。

假如标签栏有很多标签，并且大部分标签展示的页面的布局类似，这就很有必要采用缓存机制，类似tableView功能。

假如标签栏有很多标签，但是所有标签展示的页面的布局几乎都不一样，那么采用缓存机制也达不到优化的作用，因为缓存池里几乎装下了所有页面。

先看一下如下效果图：

1499A456-6270-44FD-B4AD-1D8EA1FB8EF6.png

一.后面一种简单的假设

这种情况采用类似懒加载的原理，scrollerView里最多只有三个view，滑动时创建新的view，及时将远离的view移除掉。这里的view采用的是子控制器的view。在初始化自定义控件时不能创建好子控制器传入，这样就会一直占用内存，我采用了传入类名的字符串方式，动态的去创建子类。

关键代码如下：

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    //当前的索引
    NSInteger index = scrollView.contentOffset.x / scrollView.width;
    
    if (self.controllerArray.count <= index) {
        return;
    }
    
    if (![self.childVCDic objectForKey:IntgerToStr(index)]) {
        [self createChildVCWithIndex:index];
    }
    for (int i = 0; i < self.childVCDic.allKeys.count; i++) {
        NSString *indexKey = self.childVCDic.allKeys[i];
        NSInteger lastIndex = [indexKey integerValue];
        ChildBaseController *vc = [self.childVCDic objectForKey:indexKey];

        if (labs(lastIndex-index) >= 2) {
            [vc.view removeFromSuperview];
//            [vc removeFromParentViewController];
            [self.childVCDic removeObjectForKey:indexKey];
            i--;
        } else if (lastIndex == index) {
            
            [vc downloadData];
        }
    }
}

在滑动内容view或点击标签按钮时都会掉用上面的方法，通过掉用下面的方法创建新的viewCell.

- (void)createChildVCWithIndex:(NSInteger)index
{
    ChildBaseController *vc = [[NSClassFromString(self.controllerArray[index]) alloc] init];
    vc.view.x = index * SCREEN_WIDTH;
    vc.view.y = 0;
    vc.view.height = self.contentView.height;
    vc.index = index;
    [self.contentView addSubview:vc.view];
//    [self addChildViewController:vc];
    [self.childVCDic setObject:vc forKey:IntgerToStr(index)];
}

通过代码if (labs(lastIndex-index) >= 2)判断不是当前界面位置左或右的控制器视图都将其引用全部删除。

集成这个控件相对简单，主控制器须继承ScrollerChildsController类，代码如下：

//RootViewController.h
@interface RootViewController : ScrollerChildsController
@end

//RootViewController.m
@implementation RootViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor grayColor];
    
    self.title = @"ScrollerChildVCs";
    [self.navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:0.800 green:0.600 blue:0.800 alpha:0.5]];

    self.titleCanScroll = YES;
    
    NSMutableArray *titleArr = [NSMutableArray array];
    for (int i = 0; i < 20; i++) {
        [titleArr addObject:[NSString stringWithFormat:@"title_%d", i]];
    }
    self.titleArray = titleArr;
    
    NSMutableArray *vcArr = [NSMutableArray array];
    for (int i = 0; i < self.titleArray.count; i++) {
        if (i%2 == 0) {
            [vcArr addObject:@"OneDetailController"];
        } else {
            [vcArr addObject:@"TwoDetailController"];
        }
    }
    self.controllerArray = vcArr;
}

@end

所有子控制器也需要继承ChildBaseController，然后重载父类方法，如下：

- (void)downloadData
{
    self.label.text = [NSString stringWithFormat:@"这是OneDetailController\n第 %ld 页", (long)self.index];
}

二.第一种假设采用复用机制

需要有一个缓存池，熟悉tableview缓存机制的可以很好理解。

基本原理：

滑动scrollview时，先判断是否需要加载新的cell，若需要，则先去缓存池取cell，如果取不到就创建cell。存取cell时有一个标识reuseIdentifier，即id，布局一样的界面就加载一样的cell，具有一样的id，加载cell时就通过传入的id匹配上缓存池中的cell的id就返回复用。

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    // 当前的索引
    NSInteger index = scrollView.contentOffset.x / scrollView.width;
    
    if (self.titleArray.count <= index) {
        return;
    }
    
    newIndex = index;
    
    if ([self.delegate respondsToSelector:@selector(scrollView:cellForIndex:)]) {
        [self manageData];
        
        LXScrollViewCell *cell = [self.delegate scrollView:self cellForIndex:index];
        [self refreshCellFrame:cell withIndex:index];
    }
}

这self.showChildVCArr数组里记录的是当前屏幕能看到的cell，当需加载新的cell时，得判断数组里全部cell是否还能在屏幕上显示（如果点击离当前界面对应的标签更远的标签，那么showChildVCArr里的所有cell都不会在屏幕中显示）。
- (void)manageData
{
    //判断滑动方向，因为self.showChildVCArr的数据是根据X坐标升序排列的
    if (lastIndex < newIndex) {
        for (int i = 0; i < self.showChildVCArr.count; i++) {
            LXScrollViewCell *cell = self.showChildVCArr[i];
            
            if (cell.x/SCREEN_WIDTH < newIndex-1) {
                //判断了此cell已经没有显示在屏幕上
                [self changeDataWithCell:cell];
                i--;
            } else {
                break;
            }
        }
    } else {
        for (int i = (int)self.showChildVCArr.count - 1; i >= 0 && self.showChildVCArr.count > 0; i--) {
            LXScrollViewCell *cell = self.showChildVCArr[i];
            
            if (cell.x/SCREEN_WIDTH > newIndex+1) {
                //判断了此cell已经没有显示在屏幕上
                [self changeDataWithCell:cell];
            } else {
                break;
            }
        }
    }
}

- (void)changeDataWithCell:(LXScrollViewCell *)cell
{
    [self.showChildVCArr removeObject:cell];
    if ([self.cacheChildVCDic objectForKey:cell.reuseIdentifier] == nil) {
        [self.cacheChildVCDic setObject:[NSMutableArray array] forKey:cell.reuseIdentifier];
    }
    
    //将cell添加到缓存池中
    [[self.cacheChildVCDic objectForKey:cell.reuseIdentifier] addObject:cell];
}

然后在业务控制器里的集成代码如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initSetup];

    NSMutableArray *titleArr = [NSMutableArray array];
    for (int i = 0; i < 20; i++) {
        [titleArr addObject:[NSString stringWithFormat:@"title_%d", i]];
    }
    self.titleArray = titleArr;

    LXScrollView *scrollerView = [[LXScrollView alloc] initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, SCREEN_HEIGHT - 64)];
    scrollerView.delegate = self;
    scrollerView.titleCanScroll = YES;
    scrollerView.titleArray = self.titleArray;
    [self.view addSubview:scrollerView];
    self.scrollerView = scrollerView;
}

- (LXScrollViewCell *)scrollView:(LXScrollView *)scrollView cellForIndex:(NSInteger)index
{
    if (index%4 == 0 ) {
        static NSString *cellId = @"OneScrollViewCell";
        OneScrollViewCell *viewCell = [scrollView dequeueReusableCellWithIdentifier:cellId];
        if (!viewCell) {
            viewCell = [[OneScrollViewCell alloc] initWithReuseIdentifier:cellId];
        }
        [viewCell refreshDataWithIndex:index];
        return viewCell;
        
    } else if (index%4 == 1) {
        static NSString *cellId = @"TwoScrollViewCell";
        TwoScrollViewCell *viewCell = [scrollView dequeueReusableCellWithIdentifier:cellId];
        if (!viewCell) {
            viewCell = [[TwoScrollViewCell alloc] initWithReuseIdentifier:cellId];
        }
        [viewCell refreshDataWithIndex:index];
        return viewCell;
    } else {
        static NSString *cellId = @"ThreeScrollViewCell";
        ThreeScrollViewCell *viewCell = [scrollView dequeueReusableCellWithIdentifier:cellId];
        if (!viewCell) {
            viewCell = [[ThreeScrollViewCell alloc] initWithReuseIdentifier:cellId];
        }
        [viewCell refreshDataWithIndex:index];
        return viewCell;
    }
}

- (void)scrollView:(LXScrollView *)tableView didSelectIndex:(NSInteger)index
{
    NSLog(@"点击了第 %ld 个标签", (long)index);
}

仿tableview的原理和协议方法做的复用，通过dequeueReusableCellWithIdentifier:实现缓存机制。

- (nullable __kindof LXScrollViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier
{
    //先取显示中的cell
    if (lastIndex > newIndex) {//如果向右滑动
        for (int i = 0; i < self.showChildVCArr.count; i++) {
            LXScrollViewCell *cell = self.showChildVCArr[i];
            if (cell.x/SCREEN_WIDTH == newIndex) {//if成立说明这个cell还是显示在界面上的
                showing = YES;
                return cell;
            } else if (cell.x/SCREEN_WIDTH > newIndex){
                break;
            }
        }
    } else {
        for (int i = (int)self.showChildVCArr.count - 1; i >= 0; i--) {
            LXScrollViewCell *cell = self.showChildVCArr[i];
            if (cell.x/SCREEN_WIDTH == newIndex) {
                showing = YES;
                return cell;
            } else if (cell.x/SCREEN_WIDTH < newIndex){
                break;
            }
        }
    }
    
    //再取缓存中的cell
    NSArray *cellArr = [self.cacheChildVCDic objectForKey:identifier];
    if (cellArr.count > 0) {
        //随意取一个相同id的cell返回
        return [cellArr firstObject];
    }
    
    return nil;
}

---

总结：

可以根据自己项目需求选择使用上面两个demo的一个。布局能复用的采用此demo，请点击github地址下载。布局大部分不一样，不需要复用的采用此demo，请点击github地址下载。两个demo的标签栏都可以由属性titleCanScroll设置能否滚动。

若有bug或不足之处，敬请评论告知。

---

QQ:2239344645 我的github