布局推薦界面

實(shí)現(xiàn)效果

• 今天內(nèi)容完成效果

  

推薦界面分析

• 上層有無限輪播器(之后再完成)

• 滾動(dòng)的UIScrollView或者UICollectionView(之后再完成)

• 下面是UICollectionView,并且有HeaderView

• UICollectionView的Cell大小基本一致，但是在顏值處Cell的高度有變化。

• 該UICollectionView一共12組，第一組8個(gè)Item，其他組均4個(gè)Item

布局UICollectionView

• 在控制器的View中添加UICollectionView

• 懶加載UICollectionView

• 將UICollectionView添加到控制器的View中

• 特殊屬性設(shè)置：

• headerReferenceSize ： 設(shè)置頭部的Size

• sectionInset ：設(shè)置每組的內(nèi)邊距

• 實(shí)現(xiàn)UICollectionView的數(shù)據(jù)源方法

• 展示效果如下：

  

布局UICollectionView的headerView

• 實(shí)現(xiàn)效果

  

• 實(shí)現(xiàn)思路

• 自定義UICollectionReusableView, 用于作為HeaderView

• 可以通過Xib直接描述

  

• 在注冊(cè)Cell時(shí),使用Nib進(jìn)行注冊(cè)

• 代碼如下:

• 效果如下:

  

布局普通的UICollectionViewCell

• 實(shí)現(xiàn)效果

  

• 實(shí)現(xiàn)思路

• 自定義UICollectionViewCell,用于作為普通的Cell

• 可以通過Xib直接描述

  

• 在注冊(cè)Cell時(shí),使用Nib進(jìn)行注冊(cè)

• 代碼如下:

• 效果如下:

  

布局顏色的UICollectionViewCell

• 實(shí)現(xiàn)效果

  

• 實(shí)現(xiàn)思路

• 自定義UICollectionViewCell,用于作為顏值的Cell

• 可以通過Xib直接描述

  

• 在注冊(cè)Cell時(shí),同時(shí)注冊(cè)顏值的Cell

• 代碼如下

• 在獲取Cell時(shí),進(jìn)行判斷

• 抽取父類,方便管理

• 另外,因?yàn)镹ormalCell&PrettyCell高度不同, 因此需要設(shè)置代理,并且實(shí)現(xiàn)代理方法

• 效果如下:

  

更多實(shí)用的干貨,請(qǐng)登錄520it.com，小碼哥社區(qū)。