在網(wǎng)上看了好多l(xiāng)ayout，發(fā)現(xiàn)多section的布局很少袖迎，這篇文章主要實(shí)現(xiàn)以下界面鸽心，采用collectionView實(shí)現(xiàn)-- collectionViewLayout的使用請(qǐng)自行查找

1388874-7cbf28a095623abc.gif

思路：共有4種cell聊闯，4種布局布疼，自定義collectionViewLayout
1.頂部一個(gè)banner摊趾，6個(gè)item的布局

2.一個(gè)banner，2個(gè)item布局
3.左側(cè)兩個(gè)item游两，右側(cè)一個(gè)的布局
4.左側(cè)一個(gè)item砾层，右側(cè)2個(gè)的布局

代碼如下

layout.h 代理設(shè)置section頭視圖和尾視圖的高度
@protocol ServiceLayoutDelegate <NSObject>@optional;-(CGFloat)heightOfSectionHeaderForIndexPath:(NSIndexPath *)indexPath;-(CGFloat)heightOfSectionFooterForIndexPath:(NSIndexPath *)indexPath;@end@interface ServiceLayout : UICollectionViewLayout@property (nonatomic, assign) id<ServiceLayoutDelegate>delegate;@end

layout.m
@interface ServiceLayout ()@property (nonatomic, assign) CGFloat totalHeight; ///總高度@property (nonatomic, strong) NSMutableArray *attrsArr; /// item布局屬性數(shù)組@end@implementation ServiceLayout-(void)prepareLayout { [super prepareLayout]; self.totalHeight = 0; NSMutableArray *attributesArr = [NSMutableArray array]; NSInteger sectionCount = [self.collectionView numberOfSections]; for (int i = 0; i < sectionCount; i++) { NSIndexPath *indexP = [NSIndexPath indexPathWithIndex:i]; /// header布局 UICollectionViewLayoutAttributes *attr = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:indexP]; [attributesArr addObject:attr]; /// item布局 NSInteger itemCount = [self.collectionView numberOfItemsInSection:i]; for (int j = 0; j < itemCount; j++) { NSIndexPath *indexPath = [NSIndexPath indexPathForItem:j inSection:i]; UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath]; [attributesArr addObject:attrs]; } /// footer布局 UICollectionViewLayoutAttributes *attr1 = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter atIndexPath:indexP]; [attributesArr addObject:attr1]; } self.attrsArr = [NSMutableArray arrayWithArray:attributesArr];}/// contentSize-(CGSize)collectionViewContentSize { return CGSizeMake(self.collectionView.bounds.size.width, self.totalHeight);}-(UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath { UICollectionViewLayoutAttributes *layoutAttrs = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:elementKind withIndexPath:indexPath]; CGFloat height = 0; if (elementKind == UICollectionElementKindSectionHeader) { if (_delegate != nil && [_delegate respondsToSelector:@selector(heightOfSectionHeaderForIndexPath:)]) { height = [_delegate heightOfSectionHeaderForIndexPath:indexPath]; } } else { if (_delegate != nil && [_delegate respondsToSelector:@selector(heightOfSectionFooterForIndexPath:)]) { height = [_delegate heightOfSectionFooterForIndexPath:indexPath]; } } layoutAttrs.frame = CGRectMake(0, self.totalHeight, SCREEN_WIDTH, height); self.totalHeight += height; return layoutAttrs;}-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{ return self.attrsArr;}- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; switch (indexPath.section) { case 0: [self layoutAttributesForServiceLayout:layoutAttributes indexPath:indexPath]; break; case 1: [self layoutAttributesForCopyRightlayout:layoutAttributes indexPath:indexPath]; break; case 2: [self layoutAttributesForPatentLayout:layoutAttributes indexPath:indexPath]; break; case 3: [self layoutAttributesForCaseLayout:layoutAttributes indexPath:indexPath]; break; default: break; } return layoutAttributes;}/// 服務(wù)- (void)layoutAttributesForServiceLayout:(UICollectionViewLayoutAttributes *)layoutAttributes indexPath: (NSIndexPath *) indexPath { CGFloat y = self.totalHeight; if (indexPath.item == 0) { layoutAttributes.frame = CGRectMake(0, y, SCREEN_WIDTH, kBaseLine(85)); self.totalHeight += kBaseLine(85); } else { if (indexPath.item > 6) { return; } long row = (indexPath.item -1) % 3; CGFloat width = SCREEN_WIDTH / 3.0; layoutAttributes.frame = CGRectMake(row * width, y, width, kBaseLine(100)); if (indexPath.item == 3 || indexPath.item == [self.collectionView numberOfItemsInSection:indexPath.section] - 1) { self.totalHeight += kBaseLine(100); } }}/// 以下實(shí)現(xiàn)移步demo- (void)layoutAttributesForCopyRightlayout:(UICollectionViewLayoutAttributes *)layoutAttributes indexPath: (NSIndexPath *) indexPath {}- (void)layoutAttributesForPatentLayout:(UICollectionViewLayoutAttributes *)layoutAttributes indexPath: (NSIndexPath *) indexPath {}- (void)layoutAttributesForCaseLayout:(UICollectionViewLayoutAttributes *)layoutAttributes indexPath: (NSIndexPath *) indexPath {}@end

ViewController中正常使用collectionView，設(shè)置layout代理
ServiceLayout *layout = [[ServiceLayout alloc]init];layout.delegate = self;-(CGFloat)heightOfSectionFooterForIndexPath:(NSIndexPath *)indexPath { return 15;}-(CGFloat)heightOfSectionHeaderForIndexPath:(NSIndexPath *)indexPath { return 50;}

設(shè)置header贱案、footer View
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { if (kind == UICollectionElementKindSectionHeader) { HeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"ServiceHeaderReusableView" forIndexPath:indexPath]; headerView.imgView.image = [UIImage imageNamed:@"ser_b1"]; return headerView; } else { FooterReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"ServiceFooterReusableView" forIndexPath:indexPath]; return footerView; }}