前言
你應該知道的，UICollectionView和UITableView都是繼承于UISrollView,他們有很多相似的地方，所以你可以稱他們為“雙胞胎兄弟”。如果你使用過UITableView, 那下面的教程你會感覺到很熟悉。
以前，我們去做類似瀑布流這種效果的時候，必須把UITableView去旋轉實現，從而顯得很復雜。可喜的是，iOS6.0之后APPLE便推出了CollectionView，想想也是貼心呢。
UIColletionView基礎
首先上圖：本文就是來實現這圖的結構:
1.先來創建一個UIColletionView對象
@property (nonatomic ,strong) UICollectionView *basicCollectionView;
在.m文件里添加宏定義
#define kScreenHeigth self.view.frame.size.height
#define kScreenWidth self.view.frame.size.width
#define kRBG(r,g,b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1]
#define basicBasicCollectionViewControllerCell @"basicBasicCollectionViewControllerCell"
在@end上面添加下面get方法
#pragma mark - GET
//懶加載的方式去初始化UICollectionView對象
- (UICollectionView *)basicCollectionView{
if (!_basicCollectionView)
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
//cell大小
layout.itemSize = CGSizeMake(100, 50);
//設置滑動的方向
[layout setScrollDirection:UICollectionViewScrollDirectionVertical];
//初始化
_basicCollectionView = [[UICollectionView alloc] initWithFrame: CGRectMake(0, 0,kScreenWidth , kScreenHeigth -64) collectionViewLayout:layout];
//簽訂協議
_basicCollectionView.dataSource = self;
_basicCollectionView.delegate =self;
//注冊cell
[_basicCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:basicBasicCollectionViewControllerCell];
}
return _basicCollectionView;
}
2.在viewDidLoad最下面中加入
[self.view addSubview:self.basicCollectionView];
PS：你在上面可以看到UICollectionViewFlowLayout這個類，這是個為UICollectionViewCell布局的類，這是和UITableView不同的地方，所以它比UITableView要更加靈活。
3.實現協議(這個和UITableView很像)
#pragma mark - UIcollectionView dataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 10;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:basicBasicCollectionViewControllerCell forIndexPath:indexPath];
cell.backgroundColor = kRBG(33, 52, 72);
return cell;
}
接下來可以運行了（效果如下：）
3.現在我們來加入頭視圖和尾視圖：
1.首先添加宏定義
#define basicBasicCollectionViewControllerHeaderView @"UICollectionElementKindSectionHeader"
#define basicBasicCollectionViewControllerFooterView @"UICollectionElementKindSectionFooter"
2.在get方法注冊cell下面添加下面兩行代碼
//注冊頭視圖
[_basicCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:basicBasicCollectionViewControllerHeaderView withReuseIdentifier:basicBasicCollectionViewControllerHeaderView];
//注冊尾視圖
[_basicCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:basicBasicCollectionViewControllerFooterView withReuseIdentifier:basicBasicCollectionViewControllerFooterView];
3.添加dataSource方法
/**
*
*
* @param collectionView
* @param kind 根據字符串分辨是是頭視圖或者尾視圖
* @param indexPath
*
* @return 返回頭視圖或者尾視圖
*/
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
UICollectionReusableView *reusableView = nil;
if ([kind isEqualToString:basicBasicCollectionViewControllerFooterView]) {
UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:basicBasicCollectionViewControllerFooterView withReuseIdentifier:basicBasicCollectionViewControllerFooterView forIndexPath:indexPath];
view.backgroundColor = kRBG(58, 36, 63);
reusableView = view;
}else if ([kind isEqualToString:@"UICollectionElementKindSectionHeader"]) {
UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:basicBasicCollectionViewControllerHeaderView withReuseIdentifier:basicBasicCollectionViewControllerHeaderView forIndexPath:indexPath];
view.backgroundColor = kRBG(58, 36, 63);
reusableView = view;
}
return reusableView;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
return CGSizeMake(kScreenWidth, 60);
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
return CGSizeMake(kScreenWidth, 60);
}
4.現在我們來設置圖1中的top ,left ,bottom ,right。
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(20, 10, 20, 10);
}
運行結果如下:
5.單元格看起來太整齊，總覺得圖一得放蕩不羈要酷一些，添加一下代碼在ViewController.m中:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
NSInteger randomHeigth = random()%70;
NSInteger randomWidth = random()%100;
return CGSizeMake(randomWidth +30, randomHeigth + 30);
}
6.修改單元格的個數為20，效果圖:
以上就是就是一個簡單的UICollectionView對象的結構圖。
認識UICollectionViewLayout
我們先看看官方的描述：
The UICollectionViewFlowLayout class is a concrete layout object that organizes items into a grid with optional header and footer views for each section. The items in the collection view flow from one row or column (depending on the scrolling direction) to the next, with each row comprising as many cells as will fit. Cells can be the same sizes or different sizes.
UICollectionViewFlowLayout是一個為section管理單元格布局的具體對象，而且這個section有可能附帶著頭視圖或者尾視圖。這些在子視圖排列的方向取決于collectionview滑動方向，而且單元格的大小可以是隨機可控的。
The UICollectionViewLayout class is an abstract base class that you subclass and use to generate layout information for a collection view. The job of a layout object is to determine the placement of cells, supplementary views, and decoration views inside the collection view’s bounds and to report that information to the collection view when asked. The collection view then applies the provided layout information to the corresponding views so that they can be presented onscreen.
UICollectionViewLayout是一個抽象的基類，你能夠子類化這個基類來為一個collectionview設計布局信息。這個布局對象的任務就是決定擺放單元格，頭視圖，尾視圖的擺放位置以及響應對collectionview信息請求的回應。接下來，collectionview將提供相關的布局信息給相應的視圖，讓其顯示在屏幕上。
接下來看看UICollectionViewLayout關于布局的方法：
//Returns the layout attributes for the item at the specified index path.(返回對應單元格路徑的布局信息)
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
//Returns the layout attributes for all of the cells and views in the specified rectangle.(返回指定區域的所有單元格的布局信息容器)
- (NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
//Returns the width and height of the collection view’s contents.(返回內容所需要的長和寬，你可以理解為UIScrollView contentSize)
- (CGSize)collectionViewContentSize;
如果你子類化一個UICollectionViewLayout對象，你會發現上面的方法是按順序調用的。根據indexPath拿到每一個的布局信息，然后拿到所有的布局信息。根據所有的布局信息來計算需要顯示內容的尺寸。
有時候你可能需要定義兩種Layout方式，在一個collectionview視圖里面進行布局的切換。使用下面的方法就可以很簡單的完成你需要的操作。
// transition from one layout to another
- (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated;
你可以很方便的使用collectionview來添加,刪除數據和相應的動畫,在改變數據后執行
- (void)insertItemsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths;
- (void)deleteItemsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths;
當collectionview需要添加和刪除的時候，UICollectionViewLayout一樣可以完成上述操作。特別是一個單元格被移動，添加或者是刪除。你可以利用下面的API組合你完成你想要的動作和動畫
- (void)prepareForCollectionViewUpdates:(NSArray<UICollectionViewUpdateItem *> *)updateItems;
- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath;
- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath;
- (nullable UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath;
- (void)finalizeCollectionViewUpdates;
更多了解您可以點擊Demo。下面是demo效果：
