最近公司需要修改主界面捌斧，把以前所有服務(wù)類型都統(tǒng)一類型顯示改為分模塊化顯示反镇。也就造成以前用一個collectionView解決的事情，需要使用到UITableViewCell給不同類型的服務(wù)分組。每一個cell中的服務(wù)個數(shù)又不確定爵嗅，只能TableViewCell種嵌套UICollectionView趋艘。
步驟 1. 使用xib來定義一個cell疲恢，用UICollectionView來填充這個cell, 使用上下左右約束來根據(jù)不同高度的collectionView 撐起這個cell.
屏幕快照 2018-06-03 下午3.32.36.png
步驟2. 在xib中設(shè)置UICollection的屬性，如 scroll Direction 設(shè)置為Vertical 垂直顯示瓷胧。 Scrolling Enable設(shè)置為NO显拳。
屏幕快照 2018-06-03 下午3.33.17.png
在代碼中設(shè)置屬性
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
flowLayout.minimumInteritemSpacing = 2.0;
flowLayout.minimumLineSpacing = 1.0f;
// flowLayout.itemSize = CGSizeMake(DEVICEWIDTH/4.0-0, DEVICEWIDTH/4.0-8);
// [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
//設(shè)置代理
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
// self.collectionView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
self.collectionView.backgroundColor = [UIColor whiteColor];
[self.collectionView registerClass:[NTNewOfficeServicCollectionCell class] forCellWithReuseIdentifier:@"collectionCell"];
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView"];
步驟3. 在tableViewCell中設(shè)置collectionView 的 dataSource Delegate等。
#pragma mark -- UICollectionDataSource
#pragma mark -- UICollectionViewDataSource
//定義展示的UICollectionViewCell的個數(shù)
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.serviceListArr.count;
}
//定義展示的Section的個數(shù)
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
//???
//每個UICollectionView展示的內(nèi)容
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
NTNewOfficeServicCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCell" forIndexPath:indexPath];
[cell sizeToFit];
NTSubscribeModel *model = self.serviceListArr[indexPath.row];
NSString *serViceIconName = [model.iconIOS lastPathComponent];
NSString *imageName = [[serViceIconName componentsSeparatedByString:@"@3x"] firstObject];
[cell.imageView downloadImageBycontentUrlStr:model.iconIOS andIsCut:NO placeholdImage:[UIImage imageNamed:[NSString stringWithFormat:@"newOffice_%@",imageName]] options:SDWebImageRefreshCached];
//SW: cacheType = SDImageCacheTypeMemory && SDWebImageRefreshCached 內(nèi)存緩存 && 重新下載刷新緩存搓萧， 頻繁reloadData 將導(dǎo)致內(nèi)存持續(xù)增加
cell.textName.text = model.serviceName;
model = nil;
return cell;
}
//頭部展示的內(nèi)容
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView" forIndexPath:indexPath];
return headView;
}
//定義每個UICollectionView 的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake((DEVICEWIDTH-20-15)/4.0f, DEVICEWIDTH/4.0f-5);
}
//定義每個UICollectionView 的間距
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(5, 10, 5, 10);
}
//每個item之間的間距
- (CGFloat)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout*)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 2;
}
////動態(tài)設(shè)置每列的間距大小
//- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
// return 1.0f;
//}
//???
//UICollectionView被選中時調(diào)用的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NTSubscribeModel *model = self.serviceListArr[indexPath.row];
if(self.newOfficeServiceWasSelect){
self.newOfficeServiceWasSelect(model, indexPath.row, self);
}
}
步驟4. 當(dāng)在tableView中獲取到數(shù)據(jù)時杂数，刷新UitableView , 把需要顯示的數(shù)據(jù)賦值給tableViewCell, 在使用collectionView realoadData, 刷新collectView.
NTNewOfficeServiceCell *cell = [tableView dequeueReusableCellWithIdentifier:NEWIMPORTSERVICECELL forIndexPath:indexPath];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
//下面這兩個語句一定要添加，否則第一屏顯示的collection view尺寸瘸洛，以及里面的單元格位置會不正確
cell.frame = tableView.bounds;
[cell layoutIfNeeded];
[cell reloadDataWithServiceList:(indexPath.row == 1)?[[self.moduleListDic objectForKey:@"base"] copy]:[[self.moduleListDic objectForKey:@"other"] copy]];
cell.isShowTitleView = (indexPath.row == 1)?NO:YES;
NTWeakself;
[cell setNewOfficeServiceWasSelect:^(NTSubscribeModel *subscribModel, NSInteger index, NTNewOfficeServiceCell *unReadCell) {
NTStrongself;
[strongself configServiceWasSelect:unReadCell selectIndex:index selectModel:subscribModel];
}];
return cell;
遇到的問題揍移。
- 刷新tableView時。使用setter方法中刷新collctionView的高度時反肋，UITableViewCell高度不實(shí)時更新那伐。
解釋: 剛開始是collectionView中賦值時，使用的是直接賦值屬性石蔗，也就是‘cell.arr = [arr copy]’, 在collection中使用setArr中來賦值罕邀，并且刷新collection。本來一行可以顯示四個养距，當(dāng)賦值四個item的時候燃少，collectionView的contentSize高度會變成兩行的高度。導(dǎo)致下一行不顯示數(shù)據(jù)铃在，就是撐過了阵具。
查了一下代碼，使用方法賦值后再刷新定铜，就不會出現(xiàn)這個問題阳液。
- (void)reloadDataWithServiceList:(NSArray *)servicetArr {
if(servicetArr){
_serviceListArr = servicetArr;
[self.collectionView reloadData];
//計算collectionView的contentSize的高度，再從新更新collectView的高度約束
CGFloat height = self.collectionView.collectionViewLayout.collectionViewContentSize.height;
self.collectionViewConstraint.constant = height;
[self.collectionView.collectionViewLayout invalidateLayout];
}
}
- 解決1問題后揣炕，首次刷新時帘皿，UICollectionViewCell的寬高度設(shè)置來撐起CollectView高度的預(yù)期值不一樣。造成有一個動畫顯示畸陡。
解決方法：在tableViewCell中給UICollectionViewCell賦值時鹰溜，在前面添加下面兩行代碼就OK虽填，提前刷新一下tableViewCell.
//下面這兩個語句一定要添加，否則第一屏顯示的collection view尺寸曹动，以及里面的單元格位置會不正確
cell.frame = tableView.bounds;
[cell layoutIfNeeded];
