充分利用UICollectionView
开发中我们经常会遇到下面这种页面：
顶部有一个channel选择器，中间有一个可左右滑动切换的page。page的内容可能有各种各样的样式。
实现方法有很多种，比如顶部的channel选择器，可以用 scrollView 添加data.count个button或者label来实现。底部也可以用scrollView添加tableView或者scrollView。
不过我在这里要推荐一种个人觉得最简单的方法：所有控件全部基于UICollectionView来实现。
不得不说UICollectionView真的很实用，能帮我们省去很多通过for循环去创建UI和布局的时间。并且如果再利用好UIViewController container，无需额外的操作，只需要把请求网络数据的代码放对地方，那么它可以帮我自动实现一定程度的内存缓存。详细情况待我慢慢道来。
在此之前我们需要了解UICollectionView一个很重要的特性，正是这个非常nice的特性让我们的提前加载和自动内存缓存得以轻松实现。
UICollectionViewCell会提前准备好以备直接显示
UICollectionView会在下一个cell展示之前提前把下一个cell准备好，即提前调用cellForItemAtIndexPath:方法.
比如当前屏幕我从0滑到1时，通过控制台我们可以看到第2个cell的cellForItemAtIndexPath:方法被调用了。
当我从2返回到1时，第0个cell的cellForItemAtIndexPath:方法也被调用了。
所以，collectionView被设计来会根据用户上一次的操作提前加载好一定数量的cell，为什么说是一定数量呢？这跟当前屏幕显示的cell数量有关系。具体可以自己去实践来感受一下。
合理利用viewController container特性
关于什么是UIViewController Container，可以参看苹果官方文档。
这是一个很好的特性，如果使用得当，那么可以大大简化单个UIViewController中的代码，避免逻辑过多使代码臃肿，累赘。管理维护也非常方便。具体可参考objc里的这篇文章。
我在这里用了两个UIViewController。
首先，我们的整个大页面是一个控制器，我们姑且称之为XBParentViewController。 我把它用来生成顶部的选择器和底部的左右滑动容器，以及它们两个的联动交互。
@interface XBParentViewController ()
<
UICollectionViewDelegate,
UICollectionViewDataSource,
UICollectionViewDelegateFlowLayout,
>
//顶部channel的collectionView
@property (nonatomic, strong) UICollectionView *newbieSelector;
//page容器的collectionView
@property (nonatomic, strong) UICollectionView *scrollContainer;
@end
然后我再生成了若干个XBContentViewController，他们负责生成page具体的样式和管理各自下方每页page的逻辑。当然XBContentViewController里面的View也是一个collectionView。因为没有别collectionView更合适的控件了。
我们只需要添加如下代码，便可让两类控制器产生关系：
@implementation XBParentViewController
- (void)viewDidLoad
{
[super viewDidLoad];
[self setupChildContentViewController];
}
- (void)setupChildContentViewController
{
for (NSInteger i = 0; i < _tabs.count; i++) {
NSString *tabId = _tabs[i].tabID;
XBContentViewController *viewController = [[XBContentViewController alloc] initWithNewbieTab:tabId atIndex:i];
[self addChildViewController:viewController];
}
}
@end
没错，关键在于[self addChildViewController:viewController];
这行代码。便让XBContentViewController和XBParentViewController有了关系。
控制器倒是添加了，但是并不是添加的view，那么如何把每个控制器的view添加到下方page的cell上呢？我在这里实现：
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
if (collectionView == self.scrollContainer) {
XBNewbieContainerCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kContainerCellReuseId forIndexPath:indexPath];
XBNewbieContentViewController *contentVC = self.childViewControllers[indexPath.item];
contentVC.view.frame = CGRectMake(0, 0, CGRectGetWidth(cell.frame), CGRectGetHeight(cell.frame));
cell.displayView = contentVC.view;
return cell;
}
}
这里XBNewbieContainerCell的内容如下：
@interface XBNewbieContainerCell : UICollectionViewCell
@property (nonatomic, weak) UIView *displayView;
@end
@implementation XBNewbieContainerCell
- (void)layoutSubviews
{
[super layoutSubviews];
_displayView.frame = self.bounds;
}
- (void)prepareForReuse
{
[super prepareForReuse];
[_displayView removeFromSuperview];
}
- (void)setDisplayView:(UIView *)displayView
{
_displayView = displayView;
[self.contentView addSubview:_displayView];
[self layoutIfNeeded];
}
@end
上下两个collectionView的联动
很简单，只需要实现两个方法，一个是UICollectionView的代理方法：didSelectedItemAtIndexPath:
另外一个是：UIScroll的代理方法scrollViewDidEndDecelerating：
点击上面的channel，下方的container滑动到对应的page的方法：
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.item == _selectedIndex) {
return;
}
NSIndexPath *selectedIndexPath = [NSIndexPath indexPathForItem:_selectedIndex inSection:0];
XBorderNewbieTabCell *cell = (XBorderNewbieTabCell *)[self.newbieSelector cellForItemAtIndexPath:selectedIndexPath];
cell.selected = NO;
if (collectionView == self.newbieSelector) {
[self.newbieSelector selectItemAtIndexPath:indexPath animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally];
[self.scrollContainer scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:NO];
}
_selectedIndex = indexPath.item;
}
滑动下方的page，上方选择对应的channel：
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
if (scrollView == self.scrollContainer) {
NSInteger index = scrollView.contentOffset.x / self.view.bxl_width;
if (index == _selectedIndex) {
return;
}
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:0];
[self.newbieSelector scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
_selectedIndex = index;
[self.newbieSelector reloadData];
}
}
额，你可能会说在这个方法里直接调用[self.newbieSelector selectItemAtIndexPath:indexPath animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally];
不就行了吗。事实证明当我在滑动下方的page的时候，如果连续滑了好几页，对应的那页的channel没在屏幕当中，你会看到它只会滑到相应的位置。而不会有选中效果。这是为什么呢？我猜想是该方法会先select再reloadData。所以选中效果会被取消。
这里你就可以看到我为啥要用UICollectionView而不用ScrollView了。因为那实在很蠢。我们只需要自定义UICollectionViewCell作为channel就行了。剩下的联动方法，UICollectionView已经帮我们实现好了，我们只需要去调用就行了。这不是很爽吗？所以为什么要费那么大劲去建两个scrollView然后for循环创建channel并布局，还要自己去实现滑动结束位置。。。
自动网络请求是怎么一回事
通常这种页面是这种逻辑，当我进来的时候，一个API先返回每个channel的信息，当滑到对应的页面的时候，拿channel的id去请求详细的数据显示在下面。下面是我的做法：
我在进入这个页面之前请求的第一个API，因为我觉得如果网络有问题的时候用户就没必要进这个页面来浪费时间了。当然，这是在没有本地缓存的情况下，如果有本地缓存应该就是先进来加载本地缓存，然后再去请求网络更新数据了。这不是重点，重点是我们在不实现本地缓存的情况下，如何最方便也最大化的利用内存的缓存，来帮用户节约流量。以我的这种实现方式，我并未有任何单独的实现内存缓存的操作，因为collectionView会自动帮我们实现。
当我在进入这个页面的时候，常规情况下先请求第一个tab的数据。而这个请求详细数据的方法我是放在contentViewController的viewDidLoad里面的。这个是关键，同样也是要用viewController而不直接添加view的原因。一个是我刚开始说的便于管理代码，另外一个原因就是我们还可以利用控制器的某些便利。
因为我们知道每个控制器的viewDidLoad方法只会在它的view加载好的时候调用一次。而在这里，什么时候调用呢。当然是在cellForItemAtIndexPath:
方法里把view添加到当前cell的那一刻。而我们前面说了cellForItemAtIndexPath:
会提前调用，这样一来，我们的网络请求自然就提前了。而因为在viewDidLoad方法里调用的，所以又仅会调用一次。不会重复调用。
使用UIViewController container的其他好处：
contentViewController.navigationController == parentViewController.navigationController
这就是我说的parentViewController中的代码可以大大简化的原因之一。因为一般情况下，项目当中都有一个BaseViewController 。contentViewController和parentViewController都可以继承BaseViewController。很多公用方法contentViewController就可以直接使用了。另外不用去写很多的代理和回调 把事件传到parentViewController去处理。
