UICollectionView

最新推荐文章于 2025-07-26 10:42:40 发布

转载最新推荐文章于 2025-07-26 10:42:40 发布 · 487 阅读

IT 专栏收录该内容

25 篇文章

订阅专栏

集合视图的概念

如何创建UICollectionView

集合视图的布局UICollectionViewFlowLayout

自定义cell

布局协议UICollectionViewDelegateFlowLayout

UICollectionView与UITableView的实现类似，都需要设置delegate和dataSource

在collectionView中，cell的布局比tableView要复杂，需要使用一个类来描述集合视图的布局---UICollectionViewLayout->UICollectionViewFlowLayout

创建步骤

1.使用系统布局UICollectionViewFlowLayout

2.创建UICollectionView

3.设置代理，设置数据源

4.设置自定义Cell

数据源

我们需要给collectionView指定一个数据源，它负责给对collectionView提供数据与显示

#import "JYFViewController.h"

#import "Model.h"

#import "MyCell.h"

#import "MyHeader.h"

#import "MyFooter.h"

#import "UIImageView+WebCache.h"

@interface JYFViewController ()<</span>UICollectionViewDataSource,UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>

@property (nonatomic, retain) NSMutableArray *allDataArray;

@end

@implementation JYFViewController

- (void)viewDidLoad

{

[super viewDidLoad];

// 1.获取文件路径

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"Data"ofType:@"json"];

// 2.读取文件数据

NSData *data = [NSData dataWithContentsOfFile:filePath];

// 3.解析数据

NSArray *array = [NSJSONSerialization JSONObjectWithData:dataoptions:NSJSONReadingAllowFragments error:nil];

// 4.遍历放入大数组中

self.allDataArray = [NSMutableArray array];

for (NSDictionary *dict in array) {

Model *model = [Model new];

[model setValuesForKeysWithDictionary:dict];

[_allDataArray addObject:model];

[model release];

NSLog(@"%@", _allDataArray);

}

// 1.创建UICollectionViewFlowLayout

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayoutalloc] init];

// 1.1设置每个Item的大小

flowLayout.itemSize = CGSizeMake(90, 210);

// 1.2 设置每列最小间距

flowLayout.minimumInteritemSpacing = 10;

// 1.3设置每行最小间距

flowLayout.minimumLineSpacing = 10;

// 1.4设置滚动方向

flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;

// 1.5设置header区域大小

flowLayout.headerReferenceSize =CGSizeMake(self.view.bounds.size.width, 50);

// 1.6设置footer区域大小

flowLayout.footerReferenceSize =CGSizeMake(self.view.bounds.size.width, 50);

// 1.7 设置item内边距大小

flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

// 2.创建UICollectionView

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];

// 3.设置数据源代理、collection代理

collectionView.dataSource = self;

collectionView.delegate = self;

[self.view addSubview:collectionView];

[collectionView release];

[flowLayout release];

collectionView.backgroundColor = [UIColor colorWithRed:0.895green:1.000 blue:0.656 alpha:1.000];

// 4.注册cell的类型和重用标示符

[collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@"cell"];

// 5.注册footer和header类型的重用标识符

[collectionView registerClass:[MyHeader class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"headerView"];

[collectionView registerClass:[MyFooter class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter

withReuseIdentifier:@"footerView"];

}

#pragma mark - UICollectionViewDataSource Methods

#pragma mark 设置有多少个section

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView

{

return 5;

}

#pragma mark 设置某个分组有多少行

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

return 13;

}

#pragma mark 设置某个Item显示什么内容

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

// 1.去重用队列中查找

MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

// 2.使用

// CGFloat red = arc4random()% 256 / 255.0;

// CGFloat green = arc4random() % 256 / 255.0;

// CGFloat blue = arc4random() % 256 / 255.0;

// cell.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];

cell.label.text = [NSString stringWithFormat:@"s = %ld r = %ld", indexPath.section, indexPath.row];

// 3.获取将要显示的模型

Model *model = _allDataArray[indexPath.row];

// 4.使用第三方获取图片并自动缓存

NSURL *imageUrl = [NSURL URLWithString:model.thumbURL];

[cell.imageView sd_setImageWithURL:imageUrl placeholderImage:[UIImageimageNamed:@"default_head_image@2x.png"]];

return cell;

}

#pragma mark 处理点击事件

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

NSLog(@"我被点击了");

}

#pragma mark - UICollectionViewDelegateFlowLayout Method

#pragma mark 设置item的大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

{

return CGSizeMake(90, 120);

}

#pragma mark 设置footer和header

- (UICollectionReusableView *)collectionView:(UICollectionView*)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

if (kind == UICollectionElementKindSectionHeader) {

// 去重用队列取可用的header

MyHeader *reusableView = [collectionViewdequeueReusableSupplementaryViewOfKind:kindwithReuseIdentifier:@"headerView" forIndexPath:indexPath];

// 使用

reusableView.headerImage.image = [UIImage imageNamed:@"屏幕快照 2014-0 9.30.50 9-11 上午.png"];

// 返回

return reusableView;

}else{

// 去重用队列取可用的footer

MyFooter *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footerView"forIndexPath:indexPath];

// 使用

reusableView.backgroundColor = [UIColor redColor];

// 返回

return reusableView;

}

#pragma mark 设置header和footer高度

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

{

return CGSizeMake(self.view.bounds.size.width, 70);

}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section

{

return CGSizeMake(self.view.bounds.size.width, 70);