UICollectionViewLayout
UICollectionViewLayout是UICollectionView比UITableView强大的原因，通过 UICollectionViewLayoutAttributes 类来管理 cell 、 Supplementary View 和 Decoration View 的 位置 、 transform 、 alpha 、 hidden 等等。
UICollectionViewLayout这个类只是一个基类，我们给UICollectionView使用的都是它的 子类 。系统为我们提供了一个最常用的layout为 UICollectionViewFlowLayout 。当UICollectionViewLayout满足不了我们的需求时，我们可以 子类化UICollectionViewLayout 或者 自定义layout 。
我们先来了解它内部的常用的属性：
//同一组当中，行与行之间的最小行间距，但是不同组之间的不同行cell不受这个值影响。
@property (nonatomic) CGFloat minimumLineSpacing;
//同一行的cell中互相之间的最小间隔，设置这个值之后，那么cell与cell之间至少为这个值
@property (nonatomic) CGFloat minimumInteritemSpacing;
//每个cell统一尺寸
@property (nonatomic) CGSize itemSize;
//滑动反向，默认滑动方向是垂直方向滑动
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
//每一组头视图的尺寸。如果是垂直方向滑动，则只有高起作用；如果是水平方向滑动，则只有宽起作用。
@property (nonatomic) CGSize headerReferenceSize;
//每一组尾部视图的尺寸。如果是垂直方向滑动，则只有高起作用；如果是水平方向滑动，则只有宽起作用。
@property (nonatomic) CGSize footerReferenceSize;
//每一组的内容缩进
@property (nonatomic) UIEdgeInsets sectionInset;
UICollectionView类似于UITableView和UITableViewController,使用UICollectionView必须实现
UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。
代码如下：
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout, UICollectionViewDelegate >
@end
@implementation ViewController
NSString *identifier = @"cell";
/**
* 注册增补视图用的
*/
NSString *headerIdentifier = @"header";
NSString *footerIdentifier = @"footer";
- (void)viewDidLoad {
[super viewDidLoad];
// 创建布局对象
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
// 设置最小行间距
flowLayout.minimumLineSpacing = 50;
// 最小列间距
flowLayout.minimumInteritemSpacing = 40;
/**
* 设置item的大小 格局item的大小自动布局列间距
*
* @param 50 宽
* @param 50 高
*
* @return
*/
flowLayout.itemSize = CGSizeMake(150, 120);
/**
* 设置自动滚动的方向 垂直或者横向
*/
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
/**
* 设置集合视图内边距的大小
*
* @param 20 上
* @param 20 左
* @param 20 下
* @param 20 右
*
* @return UIEdgeInsetsMake 与下面的方法相同 -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
*/
flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
/**
* 设置header区域大小
*
* @param 414 414
* @param 70 无用
*
* @return
*/
flowLayout.headerReferenceSize = CGSizeMake(414, 70);
/**
* 设置footer区域的大小
*
* @param 414 无用
* @param 70 自己设置
*
* @return 如果写了这里必须设置注册
*/
// flowLayout.footerReferenceSize = CGSizeMake(414, 70);
/**
创建UICollectionView前必须先创建布局对象UICollectionViewFlowLayout
- returns: UICollectionViewFlowLayout(布局对象)
*/
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
//设置属性
collectionView.backgroundColor = [UIColor whiteColor];
collectionView.delegate = self;
collectionView.dataSource = self;
// 是否显示垂直方向指示标, 继承于UIScrollView, 他的方法可以调用
collectionView.showsVerticalScrollIndicator = NO;
// 注册
[collectionView registerClass:[TestCollectionViewCell class] forCellWithReuseIdentifier:identifier];
/**
* 注册增补视图
*/
[collectionView registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerIdentifier];
// 添加到视图上
[self.view addSubview:collectionView];
}
#warning UICollectionViewDataSource
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
TestCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1.0];
cell.imageView.image = [UIImage imageNamed:@"Icon@2x"];
cell.label.text = @"测试";
return cell;
}
// 设置每个分区返回多少item
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 15;
}
// 设置集合视图有多少个分区
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 4;
}
/**
* 返回增补视图
*
* @param collectionView
* @param kind
* @param indexPath
*
* @return
*/
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
// 如果是头视图
if (kind == UICollectionElementKindSectionHeader) {
// 从重用池里面取
HeaderCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
headerView.backgroundColor =[UIColor orangeColor];
headerView.titleLabel.text = @"测试";
return headerView;
}else{
UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footerIdentifier forIndexPath:indexPath];
// footerView.backgroundColor = [UIColor brownColor];
// return footerView;
return nil;
}
}
#warning UICollectionViewDelegate
// 点击item触发的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
/**
推出的页面的布局一般在这里写 最小行间距.列间距等
- returns:
*/
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
DetailCollectionViewController *detailVC = [[DetailCollectionViewController alloc] initWithCollectionViewLayout:flowLayout];
[self.navigationController pushViewController:detailVC animated:YES ];
NSLog(@"%ld-%ld",indexPath.section,indexPath.row);
}
/**
* 指定那些路径可以被点击
*
* @param collectionView
* @param indexPath
*
* @return
// */
//-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath{
//
// if (indexPath.section == 0) {
// return NO;
// }
// return YES;
//}
#warning UICollectionViewDelegateFlowLayout
/**
* 返回内边距的上左下右的距离
*
* @param collectionView UICollectionView
* @param collectionViewLayout UICollectionViewLayout
* @param section
*
* @return
*/
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(30, 30, 30, 30);
}
我们首先了解UICollectionView的工作流程，先将UICollectionView分成视图、数据源和代理方法、UICollectionViewLayout三方面来进行介绍
一、视图
UICollectionView上面显示内容的视图有三种Cell视图、Supplementary View和Decoration View。
Cell视图
CollectionView只要内容由他展示数据从数据源获取出来，类似于UITableView中的cell；
Supplementary View
他展示的是每一组的信息类似于cell，他也是从数据员获取的数据，但是与cell有一点不同，他并不是强烈需要的。如flow layout中的header 和 footer；
Decoration View
这个视图是一个装饰视图，它没有什么功能性，它不跟数据源有任何关系，它完全属于layout对象。
二、数据源和代理方法
1、注册cell
在使用数据源返回cell给collectionView之前，我们必须先要注册，用来进行重用。
registerClass: forCellWithReuseIdentifier:
registerNib: forCellWithReuseIdentifier:
显而易见，前面两个方法是注册cell，其中，注册的方式有两种，第一种是直接注册class，它重用的时候会调用[[UICollectionView alloc] init]这样的初始化方法创建cell；另外一种是注册nib，它会自动加载nib文件。
注册的之后，我们如何重用？
在数据源方法当中返回 cell
的方法当中通过dequeueReusableCellWithReuseIdentifier:forIndexPath:
方法获取cell。
示例代码：
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellReuseIdentify forIndexPath:indexPath];
cell.backgroundColor = [UIColor lightGrayColor]; cell.textLabel.text = [NSString stringWithFormat:@"(%zd,%zd)", indexPath.section, indexPath.row]; return cell;
}
2、数据源方法
数据源方法与UITableView类似，主要有：
numberOfSectionsInCollectionView:
collectionView: numberOfItemsInSection:
collectionView: cellForItemAtIndexPath:
collectionView: viewForSupplementaryElementOfKind: atIndexPath:
3、代理方法
数据源为UICollectionView提供数据相关的内容，而代理则主要负责用户交互、与数据无关的视图外形。主要分成两部分：
1、通过调用代理方法，管理视图的选中、高亮
collectionView:shouldDeselectItemAtIndexPath:
collectionView:didSelectItemAtIndexPath:
collectionView:didDeselectItemAtIndexPath:
collectionView:shouldHighlightItemAtIndexPath:
collectionView:didHighlightItemAtIndexPath:
collectionView:didUnhighlightItemAtIndexPath:
2、长按cell，显示编辑菜单 当用户长按cell时，collection view视图会显示一个编辑菜单。这个编辑菜单可以用来剪切、复制和粘贴cell。不过，要显示这个编辑菜单需要满足很多条件，代理对象必须实现下面三个方法：
collectionView:shouldShowMenuForItemAtIndexPath:
collectionView:canPerformAction:forItemAtIndexPath:withSender:
collectionView:performAction:forItemAtIndexPath:withSender:
对于指定要编辑的cell，collectionView:shouldShowMenuForItemAtIndexPath:
方法需要返回YES
collectionView:canPerformAction:forItemAtIndexPath:withSender:
方法中，对于剪切、复制、粘贴三种action至少有一个返回YES。其实，编辑菜单是有很多种action的，但是对于UICollectionView来说，它仅仅支持的剪切、复制、粘贴三个，所以说这个代理方法至少支持这三种的一种。
剪切、复制、粘贴的方法名是：
cut:
copy:
paste:
当上面的条件都满足了，用户就可以长按cell显示出编辑菜单，然后选择对应的action，从而就会回调delegate的collectionView:performAction:forItemAtIndexPath:withSender: 方法去做对应的事情。
当我们想控制编辑菜单仅仅显示复制和粘贴时，我们就可以在collectionView:canPerformAction:forItemAtIndexPath:withSender:
方法中进行操作，具体请见下面代码：
- (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender{
if ([NSStringFromSelector(action) isEqualToString:@"copy:"]
|| [NSStringFromSelector(action) isEqualToString:@"paste:"])
return YES;
return NO;
}
网友评论