布局推薦界面

實現(xiàn)效果

• 今天內容完成效果

  

推薦界面分析

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

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

• 下面是UICollectionView,并且有HeaderView

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

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

布局UICollectionView

• 在控制器的View中添加UICollectionView

• 懶加載UICollectionView

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

• 特殊屬性設置：

• headerReferenceSize ： 設置頭部的Size

• sectionInset ：設置每組的內邊距

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

• 展示效果如下：

  

布局UICollectionView的headerView

• 實現(xiàn)效果

  

• 實現(xiàn)思路

• 自定義UICollectionReusableView, 用于作為HeaderView

• 可以通過Xib直接描述

  

• 在注冊Cell時,使用Nib進行注冊

• 代碼如下:

• 效果如下:

  

布局普通的UICollectionViewCell

• 實現(xiàn)效果

  

• 實現(xiàn)思路

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

• 可以通過Xib直接描述

  

• 在注冊Cell時,使用Nib進行注冊

• 代碼如下:

• 效果如下:

  

布局顏色的UICollectionViewCell

• 實現(xiàn)效果

  

• 實現(xiàn)思路

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

• 可以通過Xib直接描述

  

• 在注冊Cell時,同時注冊顏值的Cell

• 代碼如下

• 在獲取Cell時,進行判斷

• 抽取父類,方便管理

• 另外,因為NormalCell&PrettyCell高度不同, 因此需要設置代理,并且實現(xiàn)代理方法

• 效果如下:

  

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