UITableViewCell中嵌套UICollectionView

练习项目： https://git.oschina.net/dragonyang0917/MyBlog.git

之前想模仿新浪微博app做练习，在做首页的时候，有一种tableViewCell是包含了多张图片（1-9张），所以就考虑是用哪种方法去实现。

最初有两种方案：

一. 纯代码添加图片；

二. 使用UICellctionView装载图片，然后嵌套在UITableViewCell中。

根据新浪微博的点击图片9宫格空白处（比如：只放8张图，第九张是空着的，点击第九张图位置），整个tablecell会被选中。而使用UICellectionView的时候，点击空白处，依旧是点在UICellectionView上，所在的tableViewCell不会被选中，也就是说背景不会变成被选中的颜色。

因此猜想，新浪微博的图片是代码动态添加的。

但这里想尝试用UICellctionView来实现。

主要代码：

CollectionCell.h

@interface YSLIndexedCollectionView : UICollectionView

@property (nonatomic, strong) NSIndexPath *indexPath;
@property (nonatomic, strong) NSArray *data;

@end

@interface CollectionCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *collectionImage;
@property (nonatomic, strong) NSIndexPath *indexPath;

- (void)setCellImageWithName:(NSString *)imageName;
- (void)setCellImageWithURL:(NSURL *)url;

@end

HomeCell.h

@interface HomeCell : UITableViewCell <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
@property (weak, nonatomic) IBOutlet YSLIndexedCollectionView *cellImages;

@end

HomeCell.m

#pragma mark -- Collection delegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"Tableviewcell %ld -- Image %ld has been selected!", self.dataIndex.row, indexPath.row);
    
    CollectionCell *cell = (CollectionCell *)[collectionView cellForItemAtIndexPath:indexPath];
    
    [YSLScanImage scanBigImageWithImageView:cell.collectionImage];
}

#pragma mark -- UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    // Change the size of each item in the collectionView
    return CGSizeMake(imageSize, imageSize);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return COLLECTION_GAP;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 2;
}

HomeController.m

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    HomeCell *cell = [tableView dequeueReusableCellWithIdentifier:@"homeCell" forIndexPath:indexPath];
    
    // Load data
    
    // If not reloadData, the data in the collectionView will be mess
    [cell.cellImages reloadData];
    
    return cell;
    
}

重点来了，在HomeController.m中，在加载数据到collectionView中的时候，如果没有[cell.cellImagesreloadData]这句话，在上下滚动tableView 的时候，collectionView中的图片就会变的很混乱，数据加载就会出现问题，这里应该是tableViewCell和collectionViewCell一起使用的时候，重用的问题（具体有待考证，这里只是一个推断）。如下图，空白处重用之后，就没有图片数据，tableViewCell重用会记录原来的图片个数，因此留下空白。

当加入[cell.cellImages reloadData]，每个显示的tableViewCell重用时，让tableViewCell中的collectionView重新加载一次图片后，不管你上滑，还是下滑，一切就变正常了。

这句代码卡了我很多很多天，今天抽空，特来记录下。