大部分的購物首頁類型基本和淘寶差不多，所以沒事就理了下原理及實現(xiàn)方法！

這里我只會講解其實現(xiàn)原理及方法，所以就沒有去美化界面，請各位不要嫌棄。

界面有點丑，無數(shù)據(jù)的靜態(tài)界面

一：界面搭建

大部分的這類型首頁是由UICollectionView組成的，界面上的大部分模塊都是固定下來的，除去個別模塊根據(jù)后臺接口等來實現(xiàn)顯示及替換。

首頁 = UICollectionView =（ 區(qū)頭 + cell + 區(qū)尾）*n

n:模塊數(shù)

1、第一個section模塊區(qū)頭放一個輪播圖，section下cell個數(shù)根據(jù)需求來設(shè)置，區(qū)尾同樣放上一個上下輪播的輪播圖。

第一個section

2、第二個section模塊，沒有區(qū)頭區(qū)尾，就只有四個cell

這四個cell根據(jù)各自的需求會有不同的設(shè)計，其一：第一個是倒計時搶購，其他三個沒有搶購功能，其二：簡單化，都沒有特殊功能

就只講倒計時案例：其一需求是每隔多久進行一次搶購活動，這里就是一個本地倒計時（這里有問題的是后臺等操作是否會出現(xiàn)bug），因為我沒有做個類似項目，只是單純的練習(xí)和整理，是否能實現(xiàn)，實戰(zhàn)中才能得出。其二是推送告知搶購開始，刷新當(dāng)前cell進行倒計時，內(nèi)部具體實現(xiàn)后續(xù)給出demo。

第二個section

3、第三個第四個第五個section都是很通用的，一個區(qū)頭+cell組成了一個模塊，只是模塊中的布局不同而已

普通模塊

4、第四個section就是一個有點擊效果的區(qū)頭+cell，點擊效果的區(qū)頭就是加上button就可以

建議所有的cell及區(qū)頭區(qū)尾用代碼編寫，并且用上自動適配SDAutoLayout。

二：代碼編寫

代碼編寫就只講解最需要注意的地方

注意：所有的cell、區(qū)頭、區(qū)尾都要對應(yīng)注冊好

注冊

區(qū)頭、區(qū)尾設(shè)置

以下是所有的代理方法：

//設(shè)置每個section中有多少個cell

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

//有多少個section

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

//cell加載

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

//創(chuàng)建section頭視圖

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

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

//section區(qū)尾設(shè)置高度

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

// 設(shè)置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；

基本上只要設(shè)置好以上代理方法，一個簡單的界面布局就可以實現(xiàn)出來，具體的點擊方法及數(shù)據(jù)傳入，我會在后續(xù)demo出來后完善，有問題可以找我：1804094055@qq.com