练习项目: 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重新加载一次图片后,不管你上滑,还是下滑,一切就变正常了。
这句代码卡了我很多很多天,今天抽空,特来记录下。