在网上看了好多layout，发现多section的布局很少，这篇文章主要实现以下界面，采用collectionView实现-- collectionViewLayout的使用请自行查找

1388874-7cbf28a095623abc.gif

思路：共有4种cell，4种布局，自定义collectionViewLayout
1.顶部一个banner，6个item的布局

2.一个banner，2个item布局
3.左侧两个item，右侧一个的布局
4.左侧一个item，右侧2个的布局

代码如下

layout.h 代理设置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布局属性数组@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;}/// 服务- (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); } }}/// 以下实现移步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，设置layout代理
ServiceLayout *layout = [[ServiceLayout alloc]init];layout.delegate = self;-(CGFloat)heightOfSectionFooterForIndexPath:(NSIndexPath *)indexPath { return 15;}-(CGFloat)heightOfSectionHeaderForIndexPath:(NSIndexPath *)indexPath { return 50;}

设置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; }}