使用UICollectionView
使用UICollectionView的流程:
1. 設定一個UICollectionViewFlowLayout
2. 使用這個設定的UICollectionViewFlowLayout來初始化UICollectionView
3. 設定代理對象
4. 繼承UICollectionViewCell設定重用的cell
源碼:
LargeUICollectionViewFlowLayout.h +
LargeUICollectionViewFlowLayout.m
ShowCollectionViewCell.h + ShowCollectionViewCell.m
RootViewController.h + RootViewController.m
運作後效果如下:
很重要的參數如下所示:
在ShowCollectionViewCell.m中執行列印操作:
列印資訊如下:
2014-05-19 16:52:58.873 UICollectionView[3077:60b] {{0,
0}, {70, 70}} A
2014-05-19
16:52:58.875 UICollectionView[3077:60b] {{125,
0}, {70, 70}} B
2014-05-19 16:52:58.875
UICollectionView[3077:60b] {{250, 0},
{70, 70}} C
UICollectionView[3077:60b] {{0, 75},
{70, 70}} D
2014-05-19 16:52:58.876
UICollectionView[3077:60b] {{125, 75}, {70, 70}}
16:52:58.876 UICollectionView[3077:60b] {{250, 75}, {70,
70}}
2014-05-19 16:52:58.876 UICollectionView[3077:60b] {{0, 150}, {70,
2014-05-19 16:52:58.877 UICollectionView[3077:60b] {{125, 150},
{70, 70}}
2014-05-19 16:52:58.877 UICollectionView[3077:60b] {{250,
150}, {70, 70}}
2014-05-19 16:52:58.877 UICollectionView[3077:60b] {{0,
225}, {70, 70}}
2014-05-19 16:52:58.878 UICollectionView[3077:60b]
{{125, 225}, {70, 70}}
2014-05-19 16:52:58.878
UICollectionView[3077:60b] {{250, 225}, {70, 70}}
16:52:58.878 UICollectionView[3077:60b] {{0, 300}, {70, 70}}
16:52:58.879 UICollectionView[3077:60b] {{125, 300}, {70,
2014-05-19 16:52:58.879 UICollectionView[3077:60b] {{250, 300},
2014-05-19 16:52:58.879 UICollectionView[3077:60b] {{0, 375},
2014-05-19 16:52:58.880 UICollectionView[3077:60b] {{125,
375}, {70, 70}}
2014-05-19 16:52:58.901 UICollectionView[3077:60b]
{{250, 375}, {70, 70}}
2014-05-19 16:52:58.901
UICollectionView[3077:60b] {{0, 450}, {70, 70}}
2014-05-19 16:52:58.902
UICollectionView[3077:60b] {{125, 450}, {70, 70}}
16:52:58.902 UICollectionView[3077:60b] {{250, 450}, {70,
2014-05-19 16:52:58.902 UICollectionView[3077:60b] {{0, 525}, {70,
2014-05-19 16:52:58.903 UICollectionView[3077:60b] {{125, 525},
2014-05-19 16:52:58.903 UICollectionView[3077:60b] {{250,
525}, {70, 70}}
2014-05-19 16:53:24.995 UICollectionView[3077:60b] {{0,
600}, {70, 70}}
2014-05-19 16:53:24.996 UICollectionView[3077:60b]
{{125, 600}, {70, 70}}
2014-05-19 16:53:24.996
UICollectionView[3077:60b] {{250, 600}, {70, 70}}
分析上述列印資訊A,B不難發現:125 - 70 = 55 >
40,是以,minimumInteritemSpacing隻是單元格間的最小間距而已.
分析A,D發現,75 - 70 =
5,與minimumLineSpacing設定一緻,因為我們是垂直滾動,是以縱向方向的間距是一緻的.
知道這些,我們來實作網絡請求照片牆的效果.
修改LargeUICollectionViewFlowLayout中的代碼如下:
self.itemSize
= CGSizeMake(100, 150); //
單元格尺寸
self.sectionInset
= UIEdgeInsetsMake(0, 0, 0, 0); //
單元格邊緣
self.minimumInteritemSpacing =
10.0f;
// 橫排單元格最小間隔
self.minimumLineSpacing =
// 單元格最小行間距
修改ShowCollectionViewCell.h + ShowCollectionViewCell.m
RootViewController.m
效果圖如下:
一款顯示桌面的軟體就這麼搞定雛形了......
我們來嘗試一下實時更換layout讓圖檔自動布局,效果如下:
AnotherCollectionViewFlowLayout.h +
AnotherCollectionViewFlowLayout.m
幾個核心的地方:(布局變化時自動比對對于UICollectionView很重要哦)
so easy :)