公司给的UI图要求如下

Snip20160419_2.png

这个用collection还是比较好做的
效果如下

Snip20160419_1.png

在xib里直接有footer和header的属性,如果用代码的话,贴一组代码记录一下
新建一个控制器继承UICollectionViewController

static NSString * const reuseIdentifier = @"Cell";

- (instancetype)init
{    // 创建瀑布流对象,设置cell的尺寸和位置
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];    // 设置滚动的方向
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;    CGSize size = [UIScreen mainScreen].bounds.size;
    layout.itemSize = size;    // 设置cell之间的间距
    layout.minimumInteritemSpacing = 10;    // 设置行距
    layout.minimumLineSpacing = 10;
    
    layout.footerReferenceSize = CGSizeMake(size.width, 100);
    layout.headerReferenceSize = CGSizeMake(size.width, 50);    return [super initWithCollectionViewLayout:layout];
}// 设置headerView和footerView的- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{    UICollectionReusableView *reusableView = nil;    if (kind == UICollectionElementKindSectionHeader) {        UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];
        reusableView = header;
    }
    reusableView.backgroundColor = [UIColor greenColor];    if (kind == UICollectionElementKindSectionFooter)
    {        UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"FooterView" forIndexPath:indexPath];
        footerview.backgroundColor = [UIColor purpleColor];
        reusableView = footerview;
    }    return reusableView;
}


- (void)viewDidLoad {
    [super viewDidLoad];    

    // Uncomment the following line to preserve selection between presentations
    // self.clearsSelectionOnViewWillAppear = NO;
    
    // Register cell classes
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];    self.collectionView.pagingEnabled = YES;//    self.collectionView.bounces = NO; // 是否有边距
    self.collectionView.showsHorizontalScrollIndicator = NO;
    
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView"];
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"FooterView"];    
    // Do any additional setup after loading the view.}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}#pragma mark <UICollectionViewDataSource>- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {    return 2;
}


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {    return 10;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];    if (indexPath.section == 0) {
        cell.backgroundColor = [UIColor redColor];
    } else {
        cell.backgroundColor = [UIColor greenColor];
    }    
    return cell;
}#pragma mark - UICollectionViewDelegateFlowLayout- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{    return CGSizeMake(96, 100);
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{    return UIEdgeInsetsMake(5, 5, 5, 5);
}

作者：蒋昉霖
链接：https://www.jianshu.com/p/8aae41d1bb56