UICollectionView简单介绍
1. UICollectionView 类是iOS6 新引进的API，用于展示集合视图，布局更加灵活，可实现多列布局，用法类似于UITableView类。
2.自定义UICollectionViewCell，与自定义tableViewCell基本一致。
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];//创建布局方式，系统默认线性布局
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];//创建collectionView,要指定layout
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"collection"];//注册UICollectionViewCell，也就是下面我们要使用的cell
[collectionView registerClass:[UICollectionReusableView class]
forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"head"];//注册头视图（每组）
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"head"];//注册尾视图（每组）
collectionView.backgroundColor = [UIColor whiteColor];//背景色
collectionView.delegate = self;//代理
collectionView.dataSource = self;
[self.view addSubview:collectionView];
-
几个代理方法
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView{
//设置组数
return 2;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
//设置每组有多少单元
return 10;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
//设置cell，注意，此处使用的identifier必须与之前注册的保持一致
static NSString *identifier = @"collection";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
//某单元被点击
NSLog(@"--%zi",indexPath.row);
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
//设置item的尺寸
return CGSizeMake(150, 200);
}
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
//设置组的边距（上、左、下、右）
return UIEdgeInsetsMake(5, 5, 5, 5);
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
//设置最小行距（item之间）
return 10;
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
//设置组中，item的最小间距
if (section == 0) {
return 30;
}
return 10;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
//设置每组头视图的尺寸
return CGSizeMake(200, 20);
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
//设置每组尾视图的尺寸
return CGSizeMake(200, 20);
}
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
//设置头/根视图，注意，此处的withReuseIdentifier要与之前注册时使用的完全一致
UICollectionReusableView *view;
if ([kind isEqual:UICollectionElementKindSectionHeader]) {
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"head" forIndexPath:indexPath];
view.backgroundColor = [UIColor redColor];
}else if([kind isEqual:UICollectionElementKindSectionFooter]){
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"head" forIndexPath:indexPath];
view.backgroundColor = [UIColor brownColor];
}
return view;
}
如下一个小小的练习：
#import "ViewController.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];//创建布局方式，系统默认线性布局
UICollectionView *collection=[[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];//初始化，并设置布局且要指定layout
collection.delegate=self;//代理
collection.dataSource=self;
[collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];//注册UICollectionView，这是固定格式，也是必须要实现的，同时也是下面的cell
[collection registerClass:[UICollectionReusableView class]forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];//注册头/尾视图视图类型必须为UICollectionReusableView或者其子类，kind设置为UICollectionElementKindSectionHeader或者UICollectionElementKindSectionFooter，最后设置标识
collection.backgroundColor=[UIColor redColor];
[self.view addSubview:collection];
}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
//设置组数，不写该方法默认是一组
return 2;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
//设置每组行数
return 9;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *indentifier=@"cell";
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:indentifier forIndexPath:indexPath];
cell.backgroundColor=[UIColor grayColor];
cell.layer.borderWidth=1;//边框的宽度
cell.layer.borderColor=[UIColor orangeColor].CGColor;//边框的颜色
return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"%zi组%zi行",indexPath.section,indexPath.item);
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
//设置头视图的尺寸，如果想要头视图，则必须实现该方法
return CGSizeMake(300, 30);
}
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
//根据类型及其标识获取注册过的头视图，注意重用机制导致的bug
UICollectionReusableView *heardView=[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
heardView.backgroundColor=[UIColor blueColor];
for (UIView *view in heardView.subviews ) {
[view removeFromSuperview];
}
UILabel *lable=[[UILabel alloc]initWithFrame:heardView.bounds];
lable.text=[NSString stringWithFormat:@"%zi组的头视图",indexPath.section];
[heardView addSubview:lable];
lable.textColor=[UIColor yellowColor];
return heardView;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
//设置item的尺寸
return CGSizeMake(self.view.frame.size.width/3.0, 100);//改变的是高
}
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
//设置组距离上下左右的间距
return UIEdgeInsetsMake(0, 0, 0, 0);
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
//两个item的列间距
return 0;
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
//如果一组中有多行item，设置行间距
return 0;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
//设置底部视图的尺寸，一般不用
return CGSizeMake(200, 10);
}
自定义UICollectionViewCell
#import "ViewController.h"
#import "MyCollectionViewCell.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
{
UICollectionView *collectview;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc]init];
collectview=[[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
collectview.backgroundColor=[UIColor whiteColor];
collectview.delegate=self;
collectview.dataSource=self;
[collectview registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
[collectview registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
[self.view addSubview:collectview];
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 6;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *indentifier=@"cell";
MyCollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:indentifier forIndexPath:indexPath];
cell.imageview.image=[UIImage imageNamed:@"200.jpg"];
//自定义选中背景
UIView *view=[[UIView alloc]init];
view.backgroundColor=[UIColor redColor];
cell.selectedBackgroundView=view;
return cell;
}
@end
自定义的.h.m文件中的属性与方法
#import <UIKit/UIKit.h>
@interface MyCollectionViewCell : UICollectionViewCell
@property(nonatomic,strong)UIImageView *imageview;
@end
#import "MyCollectionViewCell.h"
@implementation MyCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame{
self=[super initWithFrame:frame];
if (self) {
_imageview=[[UIImageView alloc]initWithFrame:self.bounds ];
[self addSubview:_imageview];
}
return self;
}
@end
