当前位置： 首页 > article >正文

iOS ------ UICollectionView

article 2024/12/25 9:06:44

一，UICollectionView的简介
UICollectionView是iOS6之后引入的一个新的UI控件，它和UITableView有着诸多的相似之处，其中许多代理方法都十分类似。简单来说，UICollectionView是比UITbleView更加强大的一个UI控件，有如下几个方面：

1.支持水平和垂直两种方向的布局
2.通过layout配置方式进行布局
3.类似于TableView的cell特性外，collectionView中的item大小和位置可以自由定义；
4.通过layout布局回调的代理方法，可以动态的定制每个item的大小和collection的大体布局属性
5.更加强大一点，完全自定义一套layout布局方案，可以实现意想不到的效果。

设置静态的布局

实现一个最简单的九宫格类布局

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    //创建一个layout布局类
    UICollectionViewFlowLayout* flowLayout = [[UICollectionViewFlowLayout alloc]  init];
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    //flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    //flowLayout.itemSize = CGSizeMake((self.view.frame.size.width - 80) / 3, (self.view.frame.size.width - 80) / 3);
    //flowLayout.itemSize = CGSizeMake(100, 100 );
    //flowLayout.minimumLineSpacing = 20;
    //flowLayout.minimumInteritemSpacing = 20;
    flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
    //创建collectionView，通过一个布局策略layout来创建
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout];
    //注册cell
    [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    //设置代理
    self.collectionView.delegate = self;
    //设置数据源
    self.collectionView.dataSource = self;
    [self.view addSubview:self.collectionView];
}

这里有一点需要注意，collectionView在完成代理回调前，必须注册一个cell，类似如下:

//注册cell
    [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];

这和tableView有些类似，又有些不同，因为tableView除了注册cell的方法外，还可以通过非注册的方法，当复用池中没有可用的cell时，可以返回nil，然后重新创建。

//tableView在从复用池中取cell的时候，有如下两种方法
//使用这种方式如果复用池中无，是可以返回nil的，我们在临时创建即可
- (nullable __kindof UITableViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier;
//6.0后使用如下的方法直接从注册的cell类获取创建，如果没有注册 会崩溃
- (__kindof UITableViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(6_0);

因为UICollectionView是iOS6.0之前的新类，因此这里统一了从复用池中获取cell的方法，没有再提供可以返回nil的方式，并且在UICollectionView的回调代理中，只能使用从复用池中获取cell的方式进行cell的返回，其他方式会崩溃。

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor colorWithRed:arc4random() % 255 / 255.0 green:arc4random() % 255 / 255.0 blue:arc4random() % 255 / 255.0 alpha:1];
    return cell;
}

然后实现其他的代理方法

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 9;
}

在这里插入图片描述
上面我们写了一个简单九宫格的代码，所有的item都是一样大小的，但是有时候这样满足不了我们的需求，我们有时候可能也需要item不同大小。
在上面代码的基础上，删除控制item的大小的代码，再加入下面几行代码即可实现：

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.row % 2 == 0) {
        return CGSizeMake(50, 50);
    } else {
        return CGSizeMake(80, 80);
    }
}

在这里插入图片描述

设置动态布局

自定义FlowLayout进行瀑布流布局
首先，我们新建一个文件继承于UICollectionViewFlowLayout：

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface MyLayout : UICollectionViewFlowLayout
@property (nonatomic, assign)int itemCount;
@end

NS_ASSUME_NONNULL_END

前面说过，UICollectionViewFlowLayout是一个专门用来管理collectionView布局的类，因此，collectionView在进行UI布局前，会通过这个类的对象获取相关的布局信息，FlowLayout类将这些布局信息全部存放在了一个数组中，数组中是UICollectionViewLayoutAttributes类，这个类是对item布局的具体设置，以后咱们在讨论这个类。总之，**FlowLayout类将每个item的位置等布局信息放在一个数组中，在collectionView布局时，会调用FlowLayout类layoutAttributesForElementsInRect：方法来获取这个布局配置数组。因此，我们需要重写这个方法，返回我们自定义的配置数组，**另外，FlowLayout类在进行布局之前，会调用prepareLayout方法，所以我们可以重写这个方法，在里面对我们的自定义配置数据进行一些设置。

简单来说，自定义一个FlowLayout布局类就是两个步骤：

1、设计好我们的布局配置数据 prepareLayout方法中

2、返回我们的配置数组 layoutAttributesForElementsInRect方法中

#import "MyLayout.h"

@implementation MyLayout {
    NSMutableArray* attributeArray;
}
- (void)prepareLayout {
    attributeArray = [[NSMutableArray alloc] init];
    [super prepareLayout];
    float WIDTH = ([UIScreen mainScreen].bounds.size.width - self.sectionInset.left - self.sectionInset.right - self.minimumInteritemSpacing) / 2;
    
    CGFloat colHeight[2] = {self.sectionInset.top, self.sectionInset.bottom};
    
    for(int i = 0; i < self.itemCount; i++) {
        NSIndexPath* index = [NSIndexPath indexPathForItem:i inSection:0];
        
        UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:index];
        CGFloat height = arc4random() % 150 + 40;
        int width = 0;
        if (colHeight[0] < colHeight[1]) {
            colHeight[0] = colHeight[0] + height + self.minimumLineSpacing;
            width = 0;
        } else {
            colHeight[1] = colHeight[1] + height + self.minimumLineSpacing;
            width = 1;
        }
        attributes.frame = CGRectMake(self.sectionInset.left + (self.minimumInteritemSpacing + WIDTH) * width, colHeight[width] - height - self.minimumLineSpacing, WIDTH, height);
        [attributeArray addObject:attributes];
    }
    if (colHeight[0] > colHeight[1]) {
        self.itemSize = CGSizeMake(WIDTH, (colHeight[0] - self.sectionInset.top) * 2 / self.itemCount - self.minimumLineSpacing);
    } else {
        self.itemSize = CGSizeMake(WIDTH, (colHeight[1] - self.sectionInset.top) * 2 / self.itemCount - self.minimumLineSpacing);
    }
}
- (NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return attributeArray;
}
@end

自定义完成FlowLayout后，在View Controller中使用

#import "ViewController.h"
#import "MyLayout.h"
#import "CollectionViewCell.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    MyLayout* layout = [[MyLayout alloc] init];
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    layout.itemCount = 100;
    UICollectionView* collectView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    collectView.delegate = self;
    collectView.dataSource = self;
    
    [collectView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    [self.view addSubview:collectView];
    // Do any additional setup after loading the view.
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 100;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor colorWithRed:arc4random() % 255 / 255.0 green:arc4random() % 255 / 255.0 blue:arc4random() % 255 / 255.0 alpha:1];
    return cell;
}
@end

在这里插入图片描述


http://www.kler.cn/a/157299.html

相关文章：

  • java如何使用poi-tl在word模板里渲染多张图片
  • amazon广告授权
  • Vue常用指令
  • Python入门：4.Python中的运算符
  • 递归读取指定目录下的文件
  • 【经验总结】AUTOSAR架构下基于TJA1145收发器偶发通信丢失不可恢复问题分析
  • Python —— Mock接口测试
  • ElasticSearch知识体系详解
  • 解码 SQL：深入探索 Antlr4 语法解析器背后的奥秘
  • Web前端 ---- 【vue】vue 组件传值（props、全局事件总线、消息的订阅与发布）
  • 10个顶级Linux开源反向代理服务器 - 解析与导航
  • 字节内部自动化测试教程：python+pytest接口自动化-接口测试一般流程及方法
  • CoreDNS实战(一)-构建高性能、插件化的DNS服务器
  • Azure Machine Learning - 使用 REST API 创建 Azure AI 搜索索引
  • 【云备份】项目介绍
  • SoC with CPLD and MCU ?
  • ODN光纤链路全程衰减如何计算
  • d3dx9_43.dll丢失原因以及5个解决方法详解
  • Ubuntu18.04安装Ipopt-3.12.8流程
  • MFC发送ZPL指令控制斑马打印机
  • 代码随想录day5 哈希表part 01 242.有效的字母异位词 349. 两个数组的交集 202. 快乐数 1. 两数之和
  • 【FMC141】基于VITA57.4标准的4通道2.8GSPS 16位DA播放子卡（2片DAC39J84）
  • 股票代码合法验证：python字符串str应用
  • 力扣(LeetCode)907. 子数组的最小值之和(C++)
  • WEB渗透—反序列化（十一）
  • HeteroTiC: 基于异构时间通道的鲁棒网络流水印