ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

OC 基础 UICollectionView

2021-09-17 20:33:30  阅读:156  来源: 互联网

标签:flowLayout return collectionView self OC cell UICollectionView 基础


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

下面介绍一下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;
}

标签:flowLayout,return,collectionView,self,OC,cell,UICollectionView,基础
来源: https://blog.csdn.net/weixin_38716347/article/details/120356015

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有