UICollectionView在目前的iOS开发中,使用非常广泛。它继承自UIScrollView,可以根据需要自定义各种各样复杂的布局。
使用
遵循两个协议
数据源协议UICollectionViewDataSource
代理方法协议UICollectionViewDelegate
注册cell
[collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cellID"];
- 布局参数对象
UICollectionViewFlowLayout
这也是UICollectionView
的精髓所在,正是通过它,我们才实现了UICollectionView
各式各样的布局。
系统提供了两个
UICollectionView
的布局类:
1.UICollectionViewLayout
是一个抽象类,我们在自定义布局的时候可以继承此类,并在此基础上设置布局信息。
2.UICollectionViewFlowLayout
继承于UICollectionViewLayout
,是系统写好的布局类,该类为我们提供了一个简单的布局样式。假如我们只需要一个特别简单的网格布局或者流水布局,可以直接使用它。
创建
不能用init的方式,因为必须提供一个不为空的layout布局参数,给它布局。
1、创建流水布局layout
在其中设定相关属性,如Item的大小等
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// 设置item的行间距和列间距
layout.minimumInteritemSpacing = kLineSpacing;
layout.minimumLineSpacing = kLineSpacing;
// 设置item的大小
CGFloat itemW = kScreenWidth / 2.5 ;
layout.itemSize = CGSizeMake(itemW, itemW);
// 设置每个分区的 上左下右 的内边距
layout.sectionInset = UIEdgeInsetsMake(5, 5 ,5, 5);
// 设置区头和区尾的大小
layout.headerReferenceSize = CGSizeMake(kScreenWidth, 65);
layout.footerReferenceSize = CGSizeMake(kScreenWidth, 65);
// 设置分区的头视图和尾视图 是否始终固定在屏幕上边和下边
layout.sectionFootersPinToVisibleBounds = YES;
// 设置滚动条方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
2、利用layout 创建collecView
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
collectionView.backgroundColor = [UIColor witheColor];
collectionView.showsVerticalScrollIndicator = NO; //是否显示滚动条
collectionView.scrollEnabled = YES; //滚动使能
//3、添加到控制器的view
[self.view addSubview:collectionView];
_mainCollectionView = collectionView;
//4、布局
[_mainCollectionView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.right.equalTo(self.view);
}];
5、注册cell
一般是自定义的cell。需要注册不同的cell,可由不同的cell的ID决定。
[self.mainCollectionView registerClass:[PDcollectionVertivalCell class]
forCellWithReuseIdentifier:@"MAINCOLLECTIONVIEWID"];
6、注册头部视图
[self.mainCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:@"MAINCOLLECTIONVIEWHEADER"];
7、遵守协议,设置代理
self.mainCollectionView.delegate = self;
self.mainCollectionView.dataSource = self;
数据源方法
#pragma mark -collectionview 数据源方法
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 6; //返回section数
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.normalGoodLists.count; //每个section的Item数
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
创建item / 从缓存池中拿 Item
PDcollectionVertivalCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MAINCOLLECTIONVIEWID" forIndexPath:indexPath];
// 外界在此给Item添加模型数据
if(self.normalGoodLists.count > 0){
PDshopItem *item = self.normalGoodLists[indexPath.item];
cell.cheapShopItem = item;
}
return cell;
}
创建头部视图
#pragma mark - 头部视图
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:@"MAINCOLLECTIONVIEWHEADER" forIndexPath:indexPath];
// ID必须与注册ID一样
if(indexPath.section == 0){
[headView addSubview:self.cycleScrollView]; //任何自定义view
[self.cycleScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.right.equalTo(headView);
}];
return headView;
}
}
#pragma mark - 头部视图的尺寸
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
if(section ==0 ){
return CGSizeMake(screenW, 0.4*screenW);
}
else if(section ==1 ){
return CGSizeMake(screenW, 0.25253*screenW);
}
}
代理方法--点击事件
#pragma mark - 点击 某个Item时 调用
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
[collectionView deselectItemAtIndexPath:indexPath animated:YES];//取消选中
//do something ...
}
UICollectionViewCell
UICollectionView的item,就是一个cell。
cell的内容——自定义
默认的cell是UICollectionViewCell对象,它没有任何子控件,所以必须自定义cell(继承自UICollectionViewCell),添加所需的子控件。cell的属性——由flowlayout决定,在创建流水布局参数时设定好。
自定义cell
继承自UICollectionViewCell,在.h文件中,添加数据模型属性,用于后续设置cell的内容
#import
#import "PDshopItem.h"
@interface PDcollectionViewCell : UICollectionViewCell
@property(nonatomic,strong)PDshopItem *shopItem; //数据模型
@end
在.m文件中
@interface PDcollectionViewCell()
@property(nonatomic,weak)UIImageView *shopImgView;
@property(nonatomic,weak)UILabel *shopNameLabel;
@end
// 在init方法中添加子控件
-(id)initWithFrame:(CGRect)frame{
if([super initWithFrame:frame]){
//创建子控件、布局
... ...
}
return self;
}
// 重写属性的set方法,给子控件设置数据
-(void)setShopItem:(PDshopItem *)shopItem{
_shopItem = shopItem;
self.shopNameLabel.text = shopItem.goodName;
... ...
}