要實(shí)現(xiàn)的效果:
因?yàn)檫@個(gè)Cell會(huì)出現(xiàn)在系統(tǒng)很多地方,所以這個(gè)Cell新建在Main的View中
繼承自UICollectionViewCell 命名為 CollectionNormalCell
來到CollectionNormalCell ?XIB進(jìn)行布局?
先對(duì)能確定的位置的圖標(biāo)進(jìn)行布局約束,
拖入圖片和lable進(jìn)行布局
接下來圖片,進(jìn)行布局約束,圖片向下的約束相對(duì)與圖標(biāo)進(jìn)行約束
相對(duì)于已經(jīng)確定的圖標(biāo)進(jìn)行布局
給圖片進(jìn)行設(shè)置圓角,需要設(shè)置兩個(gè)屬性
layer.cornerRadius
layer.masksToBounds
設(shè)置圖片未加載的默認(rèn)圖片
繼續(xù)創(chuàng)建布局約束
微調(diào)布局
完整效果
回到之前RecommendViewController注冊(cè)Cell的地方,替換成XIB的注冊(cè)Cell形式
運(yùn)行效果
定制個(gè)性的Cell 樣式
新建CollectionPrettyCell ?繼承自 collectionViewCell
拖入buttom進(jìn)行布局,設(shè)置圖標(biāo)和字體大小,設(shè)置約束條件
布局效果:先確定最下面的城市的buttom的布局約束,如果要做相對(duì)布局約束就要設(shè)置高度,給文字設(shè)置一個(gè)高度,城市的布局約束,下面5,左邊0設(shè)置高度
對(duì)標(biāo)題進(jìn)行布局,設(shè)置左邊為0,下面為5 設(shè)置高度,設(shè)置圖片,上左右都是0 ,下相對(duì)與標(biāo)題進(jìn)行設(shè)置相對(duì)布局約束
給圖片進(jìn)行設(shè)置圓角,需要設(shè)置兩個(gè)屬性
layer.cornerRadius
layer.masksToBounds
回到RecommendViewController?
添加
注冊(cè)cell
在設(shè)置Cell的地方進(jìn)行判斷獲取哪個(gè)Cell
設(shè)置collectionView的代理
遵守協(xié)議
實(shí)現(xiàn)協(xié)議的方法:
運(yùn)行效果為:第二組與第一組的顯示樣式不同