在iOS开发中,很多时候只用TableView来布局会很局促,而iOS6之后,Apple给开发者提供了UICollectionView来满足多样的布局方式,让我们在开发时不用只局限于TableView,更加自由,随心所欲.
在使用CollectionView时,你会发现其开发思路,与TableView有很多类似,下面我们就详细介绍下其简单的使用方法,以及实现一个简单的集合视图.
就像TableView在使用时要遵循UITableViewDataSource和UITableViewDataSource协议一样,在使用CollectionView时我们也要遵循UICollectionViewDataSource以及UICollectionViewDelegate,但需要注意的是,CollectionView比TableView多一个专门布局的UICollectionViewDelegateFlowLayout协议需要遵循.
UICollectionViewDataSource协议里有两个必须要实现的方法:
// 设置分区Cell个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
// 设置Cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
在创建CollectionView之前需要先创建UICollectionViewFlowLayout对象,且对于布局的设置,需要通过设置FlowLayout对象的属性来实现.
创建UICollectionViewFlowLayout对象,并设置其属性,代码如下:
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
// 最小行间距
flowLayout.minimumLineSpacing = 10;
// 最小列间距
flowLayout.minimumInteritemSpacing = 10;
// item尺寸
flowLayout.itemSize = CGSizeMake(80, 50);
接下来就可以根据flowLayout创建UICollectionView对象,代码如下:
NSString *identifier = @"ColectionViewCellIdentifier";
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
collectionView.backgroundColor = [UIColor whiteColor];
collectionView.delegate = self;
collectionView.dataSource = self;
// 注册
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier];
[self.view addSubview:collectionView];
下面列举一些常用的代理方法:
// 设置分区内视图个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return arc4random()%12;
}
// 设置视图cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
return cell;
}
// 设置分区个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 10;
}
// 点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"%ld---%ld",indexPath.section,indexPath.row);
}
// 指定哪些路径可以被点击
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.section == 0) {
return NO;
}else{
return YES;
}
}
// 设置视图内边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(10, 10, 10, 10);
}
在设置CollectionView的HeaderView和FooterView时,其方法与TableView不同,需要用CollectionView增补视图来设置.
新建一个继承自UICollectionReusableView的类HeaderCollectionReusableView.(这里只介绍HeaderView设置方法,FooterView类似).
在HeaderCollectionReusableView.h中声明属性titleLb:
@property (nonatomic, strong) UILabel *titleLb;
并在HeaderCollectionReusableView.m中写增补视图初始化代码:
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.titleLb = [[UILabel alloc]initWithFrame:CGRectMake(50, 10, 314, 30)];
_titleLb.backgroundColor = [UIColor whiteColor];
[self addSubview:_titleLb];
}
return self;
}
在CollectionView中注册增补视图HeaderCollectionReusableView:
NSString *headerIdentifier = @"CollectionViewHeaderViewIdentifier";
// 注册Header增补视图
[collectionView registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
UICollectionViewDataSource提供了返回增补视图的方法:
// 返回增补视图�
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
// 这里指定的Header,如果指定Footer可以选择UICollectionElementKindSectionFooter
if (kind == UIC
ollectionElementKindSectionHeader) {
HeaderCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
headerView.backgroundColor = [UIColor orangeColor];
headerView.titleLb.text = @"HeaderView";
return headerView;
}
return nil;
}
这样头视图就设置成功了, 运行结果如下图:
截图.jpg
下面附上完整代码:
#import "ViewController.h"
#import "HeaderCollectionReusableView.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
@end
NSString *identifier = @"ColectionViewCellIdentifier";
NSString *headerIdentifier = @"CollectionViewHeaderViewIdentifier";
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
// 最小行间距
flowLayout.minimumLineSpacing = 10;
// 最小列间距
flowLayout.minimumInteritemSpacing = 10;
// item尺寸
flowLayout.itemSize = CGSizeMake(80, 50);
// 头视图尺寸
flowLayout.headerReferenceSize = CGSizeMake(100, 50);
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
collectionView.backgroundColor = [UIColor whiteColor];
collectionView.delegate = self;
collectionView.dataSource = self;
// 注册
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier];
// 增补视图:可以通过新建View来自定义,但需要单独注册,且需要通过UICollectionViewDataSource中的代理方法:(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath设置.
// 注册增补视图
// header视图
[collectionView registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
[self.view addSubview:collectionView];
}
#pragma mark --- 代理方法
// 设置分区内视图个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return arc4random()%12;
}
// 设置视图cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
return cell;
}
// 设置分区个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 10;
}
// 返回增补视图
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
// 这里指定的Header,如果指定Footer可以选择UICollectionElementKindSectionFooter
if (kind == UICollectionElementKindSectionHeader) {
//从重用池里面取
HeaderCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
headerView.backgroundColor = [UIColor orangeColor];
headerView.titleLb.text = @"HeaderView";
return headerView;
}
return nil;
}
// 点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"%ld---%ld",indexPath.section,indexPath.row);
}
// 指定哪些路径可以被点击
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.section == 0) {
return NO;
}else{
return YES;
}
}
// 设置视图内边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(10, 10, 10, 10);
}
HeaderCollectionReusableView.h
#import <UIKit/UIKit.h>
@interface HeaderCollectionReusableView : UICollectionReusableView
@property (nonatomic, strong) UILabel *titleLb;
@end
HeaderCollectionReusableView.m
#import "HeaderCollectionReusableView.h"
@implementation HeaderCollectionReusableView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.titleLb = [[UILabel alloc]initWithFrame:CGRectMake(50, 10, 314, 30)];
_titleLb.backgroundColor = [UIColor whiteColor];
[self addSubview:_titleLb];
}
return self;
}
@end
我会持续更新iOS教程,喜欢就关注下啦~~~~~~~_
