要实现横向滚动的像新闻首页这样的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
网友评论