UICollectionView简介
UICollectionView在iOS6.0以后引进,与UITableView比较相似。但是UICollectionView将布局完全交给UICollectionViewLayout,而且允许用户自定义layout来进行布局。使其功能比UITableView更加强大、布局更加灵活,迅速在各大APP广泛使用。
本篇将对UICollectionView的使用进行简单介绍,主要包括UICollectionView的视图组成、数据源、常用代理方法以及UICollectionViewFlowLayout的使用。下一遍将会详细讲解UICollectionViewLayout的自定义布局。
UICollectionView的视图组成:
UICollectionView由cell视图、Supplementary View和Decoration View三部分组成。
cell视图
这个大家应该都很清楚,UICollectionView主要内容展示的视图
Supplementary View
对于每组section的信息视图,类似于UITableView的header或者footer
Decoration View
装饰视图,好像很少使用
cell视图跟Supplementary View使用是需要先进行注册以便实现复用:
注册cell的方法,第一个是代码创建,第二个是xib创建
- (
void)registerClass:(nullable Class)cellClass forCellWithReuseIdentifier:(
NSString *)identifier;
- (
void)registerNib:(nullable
UINib *)nib forCellWithReuseIdentifier:(
NSString *)identifier;
注册Supplementary View的方法,第一个是代码创建,第二个是xib创建
- (
void)registerClass:(nullable Class)viewClass forSupplementaryViewOfKind:(
NSString *)elementKind withReuseIdentifier:(
NSString *)identifier;
- (
void)registerNib:(nullable
UINib *)nib forSupplementaryViewOfKind:(
NSString *)kind withReuseIdentifier:(
NSString *)identifier;
在数据源回调中复用的方法:
- (__kindof
UICollectionViewCell *)dequeueReusableCellWithReuseIdentifier:(
NSString *)identifier forIndexPath:(
NSIndexPath *)indexPath;
- (__kindof
UICollectionReusableView *)dequeueReusableSupplementaryViewOfKind:(
NSString *)elementKind withReuseIdentifier:(
NSString *)identifier forIndexPath:(
NSIndexPath *)indexPath;
***上面方法的的kind和elementKind参数用来区分是头部视图还是尾部视图
UICollectionView的数据源代理方法:
- (
NSInteger)collectionView:(
UICollectionView *)collectionView numberOfItemsInSection:(
NSInteger)section;
- (
UICollectionViewCell *)collectionView:(
UICollectionView *)collectionView cellForItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
NSInteger)numberOfSectionsInCollectionView:(
UICollectionView *)collectionView;
- (
UICollectionReusableView *)collectionView:(
UICollectionView *)collectionView viewForSupplementaryElementOfKind:(
NSString *)kind atIndexPath:(
NSIndexPath *)indexPath;
处理移动相关(详细使用看demo)
- (
BOOL)collectionView:(
UICollectionView *)collectionView canMoveItemAtIndexPath:(
NSIndexPath *)indexPath
NS_AVAILABLE_IOS(
9_0);
- (
void)collectionView:(
UICollectionView *)collectionView moveItemAtIndexPath:(
NSIndexPath *)sourceIndexPath toIndexPath:(
NSIndexPath*)destinationIndexPath
NS_AVAILABLE_IOS(
9_0);
UICollectionView的常用代理方法:
- (
BOOL)collectionView:(
UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
void)collectionView:(
UICollectionView *)collectionView didHighlightItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
void)collectionView:(
UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
BOOL)collectionView:(
UICollectionView *)collectionView shouldSelectItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
BOOL)collectionView:(
UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
void)collectionView:(
UICollectionView *)collectionView didSelectItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
void)collectionView:(
UICollectionView *)collectionView didDeselectItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
void)collectionView:(
UICollectionView *)collectionView willDisplayCell:(
UICollectionViewCell *)cell forItemAtIndexPath:(
NSIndexPath *)indexPath
NS_AVAILABLE_IOS(
8_0);
- (
void)collectionView:(
UICollectionView *)collectionView willDisplaySupplementaryView:(
UICollectionReusableView *)view forElementKind:(
NSString *)elementKind atIndexPath:(
NSIndexPath *)indexPath
NS_AVAILABLE_IOS(
8_0);
- (
void)collectionView:(
UICollectionView *)collectionView didEndDisplayingCell:(
UICollectionViewCell *)cell forItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
void)collectionView:(
UICollectionView *)collectionView didEndDisplayingSupplementaryView:(
UICollectionReusableView *)view forElementOfKind:(
NSString *)elementKind atIndexPath:(
NSIndexPath *)indexPath;
***这几个方法可以添加简易的动画,例如添加如下几句代码,cell加载的时候将会有放缩等效果。
- (
void)collectionView:(
UICollectionView *)collectionView willDisplayCell:(
UICollectionViewCell *)cell forItemAtIndexPath:(
NSIndexPath *)indexPath
NS_AVAILABLE_IOS(
8_0)
{
cell
.contentView.alpha =
0;
cell
.transform =
CGAffineTransformRotate(
CGAffineTransformMakeScale(
0,
0),
0);
[
UIView animateKeyframesWithDuration:
.5 delay:
0.0 options:
0 animations:^{
[
UIView addKeyframeWithRelativeStartTime:
0.0 relativeDuration:
0.8 animations:^{
cell
.contentView.alpha =
.5;
cell
.transform =
CGAffineTransformRotate(
CGAffineTransformMakeScale(
1.2,
1.2),
0);
}];
[
UIView addKeyframeWithRelativeStartTime:
0.8 relativeDuration:
0.2 animations:^{
cell
.contentView.alpha =
1;
cell
.transform =
CGAffineTransformRotate(
CGAffineTransformMakeScale(
1,
1),
0);
}];
} completion:^(
BOOL finished) {
}];
}
- (
BOOL)collectionView:(
UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
BOOL)collectionView:(
UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(
NSIndexPath *)indexPath withSender:(nullable
id)sender;
- (
void)collectionView:(
UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(
NSIndexPath *)indexPath withSender:(nullable
id)sender;
- (nonnull
UICollectionViewTransitionLayout *)collectionView:(
UICollectionView *)collectionView transitionLayoutForOldLayout:(
UICollectionViewLayout *)fromLayout newLayout:(
UICollectionViewLayout *)toLayout;
UICollectionViewFlowLayout && UICollectionViewLayout:
UICollectionView之所以比UITableView强大,主要在于其精髓UICollectionViewLayout的布局。它通过 UICollectionViewLayoutAttributes 类来管理 cell 、 Supplementary View 和 Decoration View 的 位置 、 transform 、 alpha 、 hidden 等等。先看看系统为我们提供的UICollectionViewFlowLayout布局的使用吧。
UICollectionViewFlowLayout 的常用属性
@property (
nonatomic)
CGFloat minimumLineSpacing;
@property (
nonatomic)
CGFloat minimumInteritemSpacing;
@property (
nonatomic)
CGSize itemSize;
@property (
nonatomic)
CGSize estimatedItemSize
NS_AVAILABLE_IOS(
8_0);
@property (
nonatomic)
UICollectionViewScrollDirection scrollDirection;
@property (
nonatomic)
CGSize headerReferenceSize;
@property (
nonatomic)
CGSize footerReferenceSize;
@property (
nonatomic)
UIEdgeInsets sectionInset;
@property (
nonatomic)
BOOL sectionHeadersPinToVisibleBounds
NS_AVAILABLE_IOS(
9_0);
@property (
nonatomic)
BOOL sectionFootersPinToVisibleBounds
NS_AVAILABLE_IOS(
9_0);
UICollectionViewFlowLayout 的代理方法
- (
CGSize)collectionView:(
UICollectionView *)collectionView layout:(
UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(
NSIndexPath *)indexPath;
- (
UIEdgeInsets)collectionView:(
UICollectionView *)collectionView layout:(
UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(
NSInteger)section;
- (
CGFloat)collectionView:(
UICollectionView *)collectionView layout:(
UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(
NSInteger)section;
- (
CGFloat)collectionView:(
UICollectionView *)collectionView layout:(
UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(
NSInteger)section;
- (
CGSize)collectionView:(
UICollectionView *)collectionView layout:(
UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(
NSInteger)section;
- (
CGSize)collectionView:(
UICollectionView *)collectionView layout:(
UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(
NSInteger)section;
文/阿聪o(简书作者)
原文链接:http://www.jianshu.com/p/b0d03c40fd65
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。