OC 基础 UICollectionView

2024-01-08 12:36:34

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

下面介绍一下collectionview的常用属性跟方法。‘

初始化cell的样式

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
self.flowLayout = flowLayout;

collectionView实例化对象和大小

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height) collectionViewLayout:flowLayout];
self.collectionView = collectionView;
[self.view addSubview:self.collectionView];

UICollectionViewScrollDirectionVertical, 竖向排布

UICollectionViewScrollDirectionHorizontal 横向排布

self.flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

设置cell的大小

self.flowLayout.itemSize = CGSizeMake(400, 300);

设置cell的上下间距

self.flowLayout.minimumLineSpacing = 100;

设置cell的左右间距

self.flowLayout.minimumInteritemSpacing = 10;

设置cell的内间距

self.flowLayout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);

设置cell的头部高度

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

设置cell的低部高度

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

设置背景颜色

self.collectionView.backgroundColor = [UIColor whiteColor];

设置分页效果

self.collectionView.pagingEnabled = YES;

设置代理

self.collectionView.delegate = self;

设置数据源

self.collectionView.dataSource = self;

是否显示竖向滚动条

self.collectionView.showsVerticalScrollIndicator = NO;

是否显示横向滚动条

self.collectionView.showsHorizontalScrollIndicator = NO;

注册cell

[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"kMyCollectionCell"];

注册HeaderView

[self.collectionView registerClass:[HeaderCollectionView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];

注册FooterView

[self.collectionView registerClass:[FooterCollectionView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];

刷新对应的列

[self.collectionView performBatchUpdates:^{
    [self.collectionView reloadSections:[NSIndexSet indexSetWithIndex:0]];
} completion:nil];

实现代理方法跟数据源方法

#pragma mark - 列数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

#pragma mark - 行数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 20;
}

#pragma mark - 具体实现cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"kMyCollectionCell" forIndexPath:indexPath];
    return cell;
}

#pragma mark - 点击cell
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"indexPath.row -- %ld",(long)indexPath.row);
}

#pragma mark - 设置头部view跟底部view
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    
    if (kind == UICollectionElementKindSectionHeader) {
        HeaderCollectionView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerView" forIndexPath:indexPath];
        headerView.value = @"headerView";
        return headerView;
    }else{
        FooterCollectionView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footerView" forIndexPath:indexPath];
        footerView.value = @"footerView";
        return footerView;
    }
}


#pragma mark - 设置cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(400, 400);
}

#pragma mark - 设置cell的内间距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(5, 5, 5, 5);
}

#pragma mark - 设置cell的上下间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 100;
}

#pragma mark - 设置cell的左右间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 10;
}

#pragma mark - 设置cell的头部高度
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(self.view.bounds.size.width, 100);
}

#pragma mark - 设置cell的脚部高度
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    return CGSizeMake(self.view.bounds.size.width, 100);
}

自定义cell

.h

#import <UIKit/UIKit.h>

@interface MyCollectionCell : UICollectionViewCell
@property (nonatomic,copy)NSString *title;
@end

.m

#import "MyCollectionCell.h"
@interface MyCollectionCell()
@property (nonatomic, strong)UILabel *nameLabel;
@end

@implementation MyCollectionCell

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self)
    {
        [self buildUI];
    }
    return self;
}

- (void)buildUI {
   
}

@end

说明一下：使用collectionview的时候如果每一个collectionviewCell的大小是一致的话。我们可以创建的时候统一设置初始化好它的大小。如下面的代码。这样子写了之后就不用实现数据源的方法了。

//初始化cell的样式
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
self.flowLayout = flowLayout;
//collectionView实例化对象和大小
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height) collectionViewLayout:flowLayout];
self.collectionView = collectionView;
[self.view addSubview:self.collectionView];

/*
 UICollectionViewScrollDirectionVertical,    竖向排布
 UICollectionViewScrollDirectionHorizontal   横向排布
 */
self.flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
/*设置cell的大小 */
self.flowLayout.itemSize = CGSizeMake(400, 300);
/*设置cell的上下间距*/
self.flowLayout.minimumLineSpacing = 100;
/*设置cell的左右间距*/
self.flowLayout.minimumInteritemSpacing = 10;
/*设置cell的内间距*/
self.flowLayout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);
/*设置cell的头部高度*/
self.flowLayout.headerReferenceSize = CGSizeMake(self.view.bounds.size.width, 50);
/*设置cell的低部高度*/
self.flowLayout.footerReferenceSize = CGSizeMake(self.view.bounds.size.width, 50);
self.collectionView.collectionViewLayout = self.flowLayout;

如果collectionviewcell的大小每个都不一样的话才实现数据源的方法，就不用写上面的代码了。如下面的代码。

#pragma mark - 设置cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(400, 400);
}

#pragma mark - 设置cell的内间距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(5, 5, 5, 5);
}

#pragma mark - 设置cell的上下间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 100;
}

#pragma mark - 设置cell的左右间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 10;
}

码农公寓