UICollectionViewFlowLayout: 确定网格视图的布局
上下左右的间距 : sectionInset(left, top, bottom, right)
每一个Cell的大小 : itemSize(width, height)
横向Cell之间的间距 : minimumInteritemSpacing
纵向Cell之间的间距 : minimumLineSpacing
首先:定制Cell
#import "CollectionViewCell.h"
@implementation CollectionViewCell
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor lightGrayColor];
self.imgView = [[UIImageView alloc] initWithFrame:CGRectMake(5, 5, CGRectGetWidth(self.frame)-10, CGRectGetHeight(self.frame)-10)];
self.imgView.backgroundColor = [UIColor groupTableViewBackgroundColor];
[self addSubview:self.imgView];
self.text = [[UILabel alloc] initWithFrame:CGRectMake(5, CGRectGetMaxY(self.imgView.frame)-50, CGRectGetWidth(self.frame)-10, 20)];
self.text.backgroundColor = [UIColor brownColor];
self.text.textAlignment = NSTextAlignmentCenter;
[self addSubview:self.text];
self.btn = [UIButton buttonWithType:UIButtonTypeCustom];
self.btn.frame = CGRectMake(5, CGRectGetMaxY(self.text.frame), CGRectGetWidth(self.frame)-10, 30);
[self.btn setBackgroundColor:[UIColor orangeColor]];
[self.btn setTitle:@"按钮" forState:UIControlStateNormal];
[self addSubview:self.btn];
}
return self;
}
@end
#define fDeviceWidth [UIScreen mainScreen].bounds.size.width
#define fDeviceHeight [UIScreen mainScreen].bounds.size.height
#import "JCollectionController.h"
#import "CollectionViewCell.h"
#import "CustomHeaderView.h"
static const float fHeaderHeight = 200.0f;
@interface JCollectionController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
{
CustomHeaderView *_headerView;
}
@end
@implementation JCollectionController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
[self setupCollectionView];
}
- (void)setupCollectionView
{
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
//头部大小
flowLayout.headerReferenceSize = CGSizeMake(fDeviceWidth, fHeaderHeight);
self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, fDeviceWidth , fDeviceHeight) collectionViewLayout:flowLayout];
//注册Cell,必须要有 、、、注册ReuseableView---头部(尾部同理)
[self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"myCell"];
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ReuseableView"];
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
[self.view addSubview:self.collectionView];
_headerView = [[CustomHeaderView alloc] initWithFrame:CGRectMake(5, 0, fDeviceWidth-10, fHeaderHeight)];
[self.view addSubview:_headerView];
}
#pragma mark ---UICollectionViewDataSource
/**
* UICollectionViewCell的个数
*/
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}
/**
* section的个数
*/
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 2;
}
/**
* 每个UICollectionView展示的内容
*/
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString * CellIdentifier = @"myCell";
CollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
if (!cell) {
NSLog(@"----------------");
}
cell.imgView.image = [UIImage imageNamed:@"aaa"];
cell.text.text = [NSString stringWithFormat:@"cell-%ld",indexPath.row];
return cell;
}
/**
* 头部显示的内容
*/
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ReuseableView" forIndexPath:indexPath];
[headerView addSubview:_headerView];
return headerView;
}
#pragma mark --UICollectionViewDelegateFlowLayout
/**
* 定义每个UICollectionView 的大小
*/
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat spacing = 10.0;
CGFloat itemWidth = (fDeviceWidth - spacing *3)/2.0;
CGFloat itemHeight = itemWidth;
return CGSizeMake(itemWidth,itemHeight);
}
/**
* 定义每个UICollectionView 的 margin
*/
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0);
}
/**
* 定义每个UICollectionView 的横向间距
*/
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 10;
}
/**
* 定义每个UICollectionView 的 竖向间距
*/
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 10;
}
#pragma mark --UICollectionViewDelegate
/**
* UICollectionView被选中时调用的方法
*/
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
cell.backgroundColor = [UIColor whiteColor];
NSLog(@"点击:{区%ld,%ld个}宽:%f",indexPath.section,indexPath.row,cell.frame.origin.x);
}
/**
* 返回这个UICollectionView是否可以被选择
*/
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
@end