大部分的購物首頁類型基本和淘寶差不多，所以沒事就理了下原理及實現(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