前言
你應(yīng)該知道的老厌，UICollectionView和UITableView都是繼承于UISrollView,他們有很多相似的地方，所以你可以稱他們?yōu)椤半p胞胎兄弟”讨衣。如果你使用過UITableView, 那下面的教程你會感覺到很熟悉纽门。
以前酝陈，我們?nèi)プ鲱愃破俨剂鬟@種效果的時候，必須把UITableView去旋轉(zhuǎn)實現(xiàn)翼虫，從而顯得很復(fù)雜屑柔。可喜的是珍剑，iOS6.0之后APPLE便推出了CollectionView掸宛，想想也是貼心呢。
UIColletionView基礎(chǔ)
首先上圖：本文就是來實現(xiàn)這圖的結(jié)構(gòu):
1.先來創(chuàng)建一個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);
//設(shè)置滑動的方向
[layout setScrollDirection:UICollectionViewScrollDirectionVertical];
//初始化
_basicCollectionView = [[UICollectionView alloc] initWithFrame: CGRectMake(0, 0,kScreenWidth , kScreenHeigth -64) collectionViewLayout:layout];
//簽訂協(xié)議
_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.實現(xiàn)協(xié)議(這個和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.現(xiàn)在我們來加入頭視圖和尾視圖：
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 根據(jù)字符串分辨是是頭視圖或者尾視圖
* @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.現(xiàn)在我們來設(shè)置圖1中的top ,left ,bottom ,right饰序。
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(20, 10, 20, 10);
}
運行結(jié)果如下:
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.修改單元格的個數(shù)為20求豫，效果圖:
以上就是就是一個簡單的UICollectionView對象的結(jié)構(gòu)圖塌衰。
認識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設(shè)計布局信息努酸。這個布局對象的任務(wù)就是決定擺放單元格，頭視圖杜恰，尾視圖的擺放位置以及響應(yīng)對collectionview信息請求的回應(yīng)蚊逢。接下來，collectionview將提供相關(guān)的布局信息給相應(yīng)的視圖箫章，讓其顯示在屏幕上烙荷。
接下來看看UICollectionViewLayout關(guān)于布局的方法：
//Returns the layout attributes for the item at the specified index path.(返回對應(yīng)單元格路徑的布局信息)
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
//Returns the layout attributes for all of the cells and views in the specified rectangle.(返回指定區(qū)域的所有單元格的布局信息容器)
- (NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
//Returns the width and height of the collection view’s contents.(返回內(nèi)容所需要的長和寬，你可以理解為UIScrollView contentSize)
- (CGSize)collectionViewContentSize;
如果你子類化一個UICollectionViewLayout對象檬寂，你會發(fā)現(xiàn)上面的方法是按順序調(diào)用的终抽。根據(jù)indexPath拿到每一個的布局信息，然后拿到所有的布局信息桶至。根據(jù)所有的布局信息來計算需要顯示內(nèi)容的尺寸昼伴。
有時候你可能需要定義兩種Layout方式，在一個collectionview視圖里面進行布局的切換镣屹。使用下面的方法就可以很簡單的完成你需要的操作圃郊。
// transition from one layout to another
- (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated;
你可以很方便的使用collectionview來添加,刪除數(shù)據(jù)和相應(yīng)的動畫,在改變數(shù)據(jù)后執(zhí)行
- (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效果：
