123.png
先分析一下結(jié)構(gòu)，整體是UICollectionView， 在UICollectionView頭部嵌套一個(gè)UICollectionView，詳細(xì)內(nèi)容如圖所示：
12.png
先創(chuàng)建一個(gè)UICollectionView, UICollectionView的頂部偏移120高度，來(lái)做為UICollectionView的頭部試圖，在頭部添加一個(gè)UICollectionView。
UICollectionViewFlowLayout * fl = [[UICollectionViewFlowLayout alloc]init];
fl.scrollDirection = UICollectionViewScrollDirectionVertical;
_collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, GFMainScreenHeight) collectionViewLayout:fl];
fl.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
fl.minimumLineSpacing = 0;
fl.minimumInteritemSpacing= 0;
fl.itemSize = CGSizeMake(GFMainScreenWidth/2, 30);
_collectionView.backgroundColor=[UIColor whiteColor];
_collectionView.delegate = self;
_collectionView.dataSource = self;
//頂部偏移120
_collectionView.contentInset = UIEdgeInsetsMake(120, 0, 0, 0);
//_collectionView 寬高自動(dòng)
_collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[_collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
[_collectionView registerClass:[TitleCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"collectionCellIndentider"];
[self.view addSubview:_collectionView];
//頭部
// 注意這里設(shè)置headerView的頭視圖的y坐標(biāo)一定是從"負(fù)值"開(kāi)始,因?yàn)閔eaderView是添加在collectionView上的.
UIView *headerView = [[UIView alloc]initWithFrame:CGRectMake(0, -120, self.view.frame.size.width, 120)];
headerView.backgroundColor = [UIColor greenColor];
UICollectionViewFlowLayout * fl2 = [[UICollectionViewFlowLayout alloc]init];
fl2.scrollDirection = UICollectionViewScrollDirectionVertical;
_headCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 120) collectionViewLayout:fl2];
fl2.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
fl2.minimumLineSpacing = 0;
fl2.minimumInteritemSpacing= 0;
fl2.itemSize = CGSizeMake(GFMainScreenWidth/2, 30);
_headCollectionView.backgroundColor=[UIColor whiteColor];
_headCollectionView.delegate = self;
_headCollectionView.dataSource = self;
[_headCollectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifierTwo"];
[headerView addSubview:_headCollectionView];
[_collectionView addSubview:headerView];
實(shí)現(xiàn)UICollectionViewDataSource、UICollectionViewDelegate
確定有幾個(gè)區(qū)域，先判斷是哪一個(gè)UICollectionView， 如果是頭部UICollectionView，區(qū)數(shù)為1，如果是_collectionView，區(qū)數(shù)是3；
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
if (collectionView == _collectionView) {
return 3;
}else{
return 1;
}
return 0;
}
確定每個(gè)區(qū)有多少行，先判斷是哪一個(gè)UICollectionView， 如果是頭部UICollectionView，行數(shù)為_(kāi)titleArray.count； 如果是_collectionView，先判斷下拉列表是否打開(kāi)，如果是打開(kāi)的行數(shù)為 _productTitleArray.count，如果不打開(kāi)行數(shù)就為0；
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
if (collectionView == _collectionView) {
if ([_isExpandArray[section]isEqualToString:@"1"]) {
return _productTitleArray.count;
}else{
return 0;
}
}else{
return _titleArray.count;
}
return 0;
}
添加區(qū)頭內(nèi)容，使用區(qū)頭首先需要注冊(cè)TitleCollectionReusableView，上面我已經(jīng)注冊(cè)過(guò)了，如果沒(méi)有注冊(cè)，區(qū)頭就會(huì)不出來(lái)。這里加了一個(gè)一個(gè)判斷，主要是將區(qū)頭添加到_collectionView，如果不加判斷我們的頭部試圖也會(huì)有區(qū)頭。
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
UICollectionReusableView *reusableview = nil;
if (collectionView == _collectionView) {
TitleCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"collectionCellIndentider" forIndexPath:indexPath];
headerView.backgroundColor = [UIColor whiteColor];
reusableview = headerView;
if ([_isExpandArray[indexPath.section] isEqualToString:@"0"]) {
//未展開(kāi)
headerView.selectImageView.image = [UIImage imageNamed:@"off"];
}else{
//展開(kāi)
headerView.selectImageView.image = [UIImage imageNamed:@"open"];
}
headerView.provinceLabel.text = [NSString stringWithFormat:@"商品%ld", (long)indexPath.section];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];
tap.delegate = self;
headerView.tag = indexPath.section;
[headerView addGestureRecognizer:tap];
}
return reusableview;
}
區(qū)頭的大小設(shè)置,要判斷一個(gè)加大小添加到有區(qū)頭的UICollectionView上去，要不然會(huì)崩潰的
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
if (collectionView == _collectionView) {
return CGSizeMake(GFMainScreenWidth, 40);
}else{
return CGSizeMake(GFMainScreenWidth, 0);
}
}
加載cell， 判斷不同的UICollectionView，加載不同樣式、內(nèi)容的cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
if (collectionView == _headCollectionView) {
CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifierTwo" forIndexPath:indexPath];
cell.titleLable.text = _titleArray[indexPath.row];
cell.detailLable.text = _detailArray[indexPath.row];
switch (indexPath.row) {
case 0:case 1:case 4:case 5:case 8:case 9:case 12:case 13:case 16:case 17:case 20:case 21:
cell.backgroundColor = [UIColor colorWithRed:230.0/255.0 green:230.0/255.0 blue:230.0/255.0 alpha:1.0];
break;
case 2:case 3:case 6:case 7:case 10:case 11:case 14:case 15:case 18:case 19:case 22:case 23:
cell.backgroundColor = [UIColor whiteColor];
break;
default:
break;
}
return cell;
}else{
CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
cell.titleLable.text = _productTitleArray[indexPath.row];
cell.detailLable.text = _productDetailArray[indexPath.row];
return cell;
}
return nil;
}
添加區(qū)頭的點(diǎn)擊下拉或者關(guān)閉方法，現(xiàn)將開(kāi)關(guān)數(shù)組的屬性調(diào)整，然后刷新當(dāng)前區(qū)域的內(nèi)容
- (void)tapAction:(UITapGestureRecognizer *)tap{
if ([_isExpandArray[tap.view.tag] isEqualToString:@"0"]) {
//關(guān)閉 => 展開(kāi)
[_isExpandArray removeObjectAtIndex:tap.view.tag];
[_isExpandArray insertObject:@"1" atIndex:tap.view.tag];
}else{
//展開(kāi) => 關(guān)閉
[_isExpandArray removeObjectAtIndex:tap.view.tag];
[_isExpandArray insertObject:@"0" atIndex:tap.view.tag];
}
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:tap.view.tag];
NSRange rang = NSMakeRange(indexPath.section, 1);
NSIndexSet *set = [NSIndexSet indexSetWithIndexesInRange:rang];
[_collectionView reloadSections:set];
}
最后效果：
Simulator Screen Shot 2017年9月12日 下午5.22.50.png
