大部分的购物首页类型基本和淘宝差不多，所以没事就理了下原理及实现方法！

这里我只会讲解其实现原理及方法，所以就没有去美化界面，请各位不要嫌弃。

界面有点丑，无数据的静态界面

一：界面搭建

大部分的这类型首页是由UICollectionView组成的，界面上的大部分模块都是固定下来的，除去个别模块根据后台接口等来实现显示及替换。

首页 = UICollectionView =（ 区头 + cell + 区尾）*n

n:模块数

1、第一个section模块区头放一个轮播图，section下cell个数根据需求来设置，区尾同样放上一个上下轮播的轮播图。

第一个section

2、第二个section模块，没有区头区尾，就只有四个cell

这四个cell根据各自的需求会有不同的设计，其一：第一个是倒计时抢购，其他三个没有抢购功能，其二：简单化，都没有特殊功能

就只讲倒计时案例：其一需求是每隔多久进行一次抢购活动，这里就是一个本地倒计时（这里有问题的是后台等操作是否会出现bug），因为我没有做个类似项目，只是单纯的练习和整理，是否能实现，实战中才能得出。其二是推送告知抢购开始，刷新当前cell进行倒计时，内部具体实现后续给出demo。

第二个section

3、第三个第四个第五个section都是很通用的，一个区头+cell组成了一个模块，只是模块中的布局不同而已

普通模块

4、第四个section就是一个有点击效果的区头+cell，点击效果的区头就是加上button就可以

建议所有的cell及区头区尾用代码编写，并且用上自动适配SDAutoLayout。

二：代码编写

代码编写就只讲解最需要注意的地方

注意：所有的cell、区头、区尾都要对应注册好

注册

区头、区尾设置

以下是所有的代理方法：

//设置每个section中有多少个cell

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section；

//有多少个section

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView；

//cell加载

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath；

//创建section头视图

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView

viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath；

//section区尾设置高度

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section；

// 设置section头视图的参考大小，与tableheaderview类似

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section；

//定义每个Section的四边间距

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section；

//定义每个Cell的大小

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath；

//这个是两行cell之间的间距（上下行cell的间距）

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section；

//两个cell之间的间距（同一行的cell的间距）

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section；

基本上只要设置好以上代理方法，一个简单的界面布局就可以实现出来，具体的点击方法及数据传入，我会在后续demo出来后完善，有问题可以找我：1804094055@qq.com