【iOS】UICollectionView的基本使用

news2025/1/22 20:49:16

UICollectionView是与UITableView相似的控件,不过它的布局更加自由。

与UITableView的不同

tableViewcollectionView
初始化需要指定布局style。需要指定一个布局类。
子视图布局一行代表一个cell,布局只需要考虑行高。无视行列限制,一个item对应一个cell,由布局类来指定视图位置。
重用机制针对cell,且非强制,某种cell也可以在非注册下使用。针对所有子视图,且强制,必须注册才能使用。
重用机制调用初始化方法在tableView的重用机制里,对于注册了的类,会在需要创建该类的对象的时候自动调用该类的initWithStyle:reuseIdentifier:方法。在collectionView的重用机制里,对于注册了的类,会在需要该类的对象的时候自动调用该类的initWithFrame:方法。

以上摘自:https://blog.csdn.net/ohyeahhhh/article/details/51222590

UICollectionViewLayout与UICollectionViewFlowLayout简介

UICollectionViewLayout是一个layout对象,UICollectionView几乎所有的显示效果都由UICollectionViewLayout负责。

UICollectionViewFlowLayout是继承自UICollectionViewLayout的,是官方实现的流水布局效果,是一种非常经典的布局效果,应该也是我们最常用的。

UICollectionViewFlowLayout的一些基本属性:

  1. itemSize 每个item的大小;
  2. minimumLineSpacing 每行最小间距;
  3. minimumInteritemSpacing 每列最小间距;
  4. sectionInset 每个section的边距;
  5. scrollDirection 元素滚动方向。

流水式布局:
流布局是苹果预先定义的布局,这种布局就好比流水一样,将一个个cell按顺序排列。出来的效果跟网格差不多。

简单使用UICollectionView布置简单九宫格视图

  1. 初始化UICollecctionViewFlowLayout与UICollectionView。设置UICollectionView的delegate和dataSource。注意cell必须被注册才能使用。
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UICollectionViewFlowLayout* flowLayout = [[UICollectionViewFlowLayout alloc] init];

    flowLayout.itemSize = CGSizeMake(100, 100);

    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;

    flowLayout.minimumLineSpacing = 20;

    flowLayout.minimumInteritemSpacing = 20;

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

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

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

    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.view addSubview:self.collectionView];
   
}
  1. 完成协议方法(基本与tableView一致)。
- (NSInteger) numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 10;
}

- (UICollectionViewCell*) collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
    UICollectionViewCell* cell = [self.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;
}

效果:
在这里插入图片描述

自定义layout实现瀑布流布局

先放效果图:
在这里插入图片描述

UICollectionViewLayoutAttributes

首先介绍UICollectionViewLayoutAttributes类,它保存了每一个cell的大小位置等属性,每一个cell都有一个对应的UICollectionViewLayoutAttributes。UICollectionViewLayout正是通过它保存的信息进行布局。

涉及的方法

-(void)prepareLayout;
-(CGSize)collectionViewContentSize;
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;

  • -(void)prepareLayout; 在该方法用于计算各cell的位置和大小,并把它们封装成一个UICollectionViewLayoutAttributes。
  • -(CGSize)collectionViewContentSize; 该方法返回ContentView的大小。
  • -(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect; 该方法返回包含所有子视图的UICollectionViewLayoutAttributes对象的数组。

具体步骤

  1. 创建一个继承自UICollectionViewFlowLayout的类,添加一个itemCount。
    Mylayout.h
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface MyLayout : UICollectionViewFlowLayout

@property (nonatomic, assign) int itemCount;

@end

NS_ASSUME_NONNULL_END
  1. 在实现部分添加一个NSMutableArray的成员变量,用于储存所有子视图的UICollectionViewLayoutAttributes对象。
  2. 重写-(void)prepareLayout;在该方法内计算每个cell的位置和大小,并把它们封装成一个UICollectionViewLayoutAttributes对象,添加到专门保存UICollectionViewLayoutAttributes对象的成员变量中。下面是代码:
- (void) prepareLayout {
    attributeArray = [[NSMutableArray alloc] init];
    [super prepareLayout];
    
    // 计算每个item的宽度
    float WIDTH = ([UIScreen mainScreen].bounds.size.width - self.minimumInteritemSpacing - self.sectionInset.left - self.sectionInset.right) / 2;
    
    // 这个数组用于储存当前左右两列瀑布流的长度,保证新的item添加在短的一边下面。
    CGFloat colHight[2] = {0};
    
    // 循环计算每个item的位置大小
    for (int i = 0; i < self.itemCount; i++) {
    	// 获取index
        NSIndexPath* index = [NSIndexPath indexPathForItem:i inSection:0];
        
        // 根据index创建attributes对象
        UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:index];
        
        // 随机一个高度,在40-190之间
        CGFloat hight = arc4random()%150 + 40;
        
        // 标记最短的列
        int width = 0;
        // 将新的item的高度加到最短的列下
        if (colHight[0] < colHight[1]) {
            colHight[0] = colHight[0] + hight + self.minimumLineSpacing;
            width = 0;
        } else {
            colHight[1] = colHight[1] + hight + self.minimumLineSpacing;
            width = 1;
        }
        // 将改item的位置和大小封装成UICollectionViewLayoutAttributes对象
        attributes.frame = CGRectMake(self.sectionInset.left + (self.minimumInteritemSpacing + WIDTH) * width, colHight[width] - hight - self.minimumLineSpacing, WIDTH, hight);
        // 保存UICollectionViewLayoutAttributes对象
        [attributeArray addObject:attributes];
    }
    
    // 通过预设itemSize的大小保证滑动范围的正确(取一个高度上的平均值),也可以通过重写`-(CGSize)collectionViewContentSize; `方法完成
    if (colHight[0] > colHight[1]) {
        self.itemSize = CGSizeMake(WIDTH, ((colHight[0] - self.sectionInset.top) * 2 / self.itemCount - self.minimumLineSpacing));
    } else {
        self.itemSize = CGSizeMake(WIDTH, ((colHight[1] - self.sectionInset.top) * 2 / self.itemCount - self.minimumLineSpacing));
    }
    
}
  1. 重写-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect; 方法返回包含所有子视图的UICollectionViewLayoutAttributes对象的数组。
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return attributeArray;
}
  1. 初始化CollectionView。
- (void) getMyLayout {
    MyLayout* layout = [[MyLayout alloc] init];
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    layout.itemCount = 100;
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    
    [self.view addSubview:self.collectionView];
}
  1. 完成协议方法。
- (NSInteger) numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 100;
}

- (UICollectionViewCell*) collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
    UICollectionViewCell* cell = [self.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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/40488.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何在 WSL 下实现 NGINX 反向代理

WSL 是 Windows 自带的 Linux 子系统。它比传统的虚机启动更快&#xff0c;占用系统资源更少&#xff0c;非常利于我们开发基于 Linux 系统的各种应用。本文基于 Ubuntu 20 介绍如何使用 NGINX 实现反向代理功能。 什么是反向代理&#xff1f; 反向代理是一个可以把系统请求分…

[网络] TCP协议是什么?套接字Socket是什么?它们是什么关系?

文章目录前言TCP协议是什么&#xff1f;IP协议网络设备才有“门牌号”&#xff08;IP地址&#xff09;网卡、网卡驱动与操作系统的关系操作系统进程与TCP协议操作系统进程和Socket套接字用户进程和Socket套接字用户进程如何消费Socket套接字文件里的数据&#xff1f;TCP协议与S…

呼吸系统药物--平喘药

急性哮喘和慢性哮喘 支气管哮喘属于慢性病。 急性哮喘指支气管哮喘的急性发作&#xff0c;一般在凌晨4点~7点间发作&#xff0c;伴有咳嗽、咳痰、胸闷、气喘和哮鸣音。&#xff08;用短效、能快速起效的药物治疗&#xff0c;沙丁胺醇喷雾剂&#xff08;β2受体激动药&#xf…

学习JavaScript进阶

JavaScript进阶 循环语句 for循环 // 类似python中的for i in range(20)for(let i0; i<20; i){console.log(i) }while循环 const MAX_TIMES 20; let cur 0 while (cur < MAX_TIMES){cur;console.log(cur) }do while do {cur ;console.log(cur); }while (cur < MAX_…

【前端开发】CSS BEM命名规范

目录1、BEM2、实战BlockElementModifier3、总结1、BEM BEM其实是块&#xff08;block&#xff09;、元素&#xff08;element&#xff09;、修饰符&#xff08;modifier&#xff09;的缩写&#xff0c;利用不同的区块&#xff0c;功能以及样式来给元素命名。 通过bem规范来命名…

2. Composition API

Composition API 1.Composition API 接下来我们来介绍一下Vue3中新增的Composition API如何使用。注意Composition API仅仅是Vue3中新增的API&#xff0c;我们依然可以使用Options API。先来实现一下之前演示的获取鼠标位置的案例。做这个案例之前&#xff0c;需要先介绍一下…

Java项目:洗浴中心管理系统(java+SSM+JSP+jQuery+javascript+Mysql)

源码获取&#xff1a;俺的博客首页 "资源" 里下载&#xff01; 项目介绍 本项目分为前后台&#xff0c;包含普通用户与管理员两种角色&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,管理员信息管理,查看用户信息,新闻公告管理,产品类型管理,级别信息…

物联网开发笔记(53)- 使用Micropython开发ESP32开发板之蓝牙BLE通信

一、目的 这一节我们学习如何使用我们的ESP32开发板通过蓝牙和手机进行通信。 二、环境 ESP32 手机&#xff08;笔者用的小米10&#xff09; Thonny IDE 三、蓝牙介绍 这个知识大家自行百度吧&#xff0c;这里不再赘述什么是蓝牙和蓝牙的历史&#xff0c;以及相关的专业知识…

JS(第二十六)ES6语法中function

JS(第九课)深刻的去理解函数._星辰镜的博客-CSDN博客 1 Function函数的定义 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 方式2 函数表达式(匿名函数) var fn function(){} 方式3 new Function() var f new Function(a, b, console.log(a b)); f(1, …

Tomcat服务器和Web开发介绍

Tomcat服务器和Web开发介绍 一、开启Web开发 什么是web开发 WEB&#xff0c;即网页的意思&#xff0c;它用于表示Internet主机上供外界访问的资源。 Internet上供外界访问的Web资源分为&#xff1a; 静态web资源&#xff08;如html 页面&#xff09;&#xff1a;指web页面中供…

数据挖掘期末复习

考点目录 文章目录考点目录复习准备1. 数据挖掘的标准流程2. 数据挖掘的主要功能3. 数据探索的主要内容及其意义数据质量分析1.异常值分析2.缺失值分析数据特征分析1.分布分析6.相关性分析4. 数据预处理的作用及其主要任务5. 常见的噪声处理方法6.常用的缺失值处理方法7. 常用的…

Map和Set的详解

Map和Set是一种专门用来搜素的容器或者数据结构&#xff0c;其搜索的效率与其具体的实例化子类有关&#xff0c;是一种适合动态查找的集合容器 一、模型 一般把搜索的数据称为关键字&#xff08;Key&#xff09;&#xff0c;和关键字对应的称为值&#xff08;Value&#xff09;…

Teams Tab App 的 manifest 分析

上一篇文章我们深入来分析了 tab app 的代码&#xff0c;这篇文章我们研究一下 manifest。 Teams 的 manifest 实际上是一个很复杂的 json&#xff0c;里面的配置非常多&#xff0c;之前的文章陆陆续续的讲过一些配置&#xff0c;我们在这篇文章里来看看关于 tabs 的一些配置&…

链表之删除单链表中的重复节点

文章目录删除单链表中的重复节点题目描述解题思路代码实现删除单链表中的重复节点 力扣链接 题目描述 编写代码&#xff0c;移除未排序链表中的重复节点。保留最开始出现的节点。 示例1:输入&#xff1a;[1, 2, 3, 3, 2, 1]输出&#xff1a;[1, 2, 3]示例2:输入&#xff1a;…

WEB网站安全检测系统设计与实现

目 录 1 引言 1 2 Web服务器所受的威胁及防御 1 2.1 缓冲区溢出 1 2.2 SQL注入攻击 1 2.3 基于脚本的DDos攻击 2 2.4 其他的不安全因素 3 3 Web的木马检测系统的设计 4 3.1 体系结构 4 3.2 处理流程 5 3.3 对客户端访问的响应 7 3.4 策略引擎的设计 8 3.4.1 策略的属性 8 3.4.2…

9、软件包管理

文章目录9、软件包管理9.1 RPM9.1.1 RPM 概述9.1.2 RPM 查询命令&#xff08;rpm -qa&#xff09;9.1.3 RPM 卸载命令&#xff08;rpm -e&#xff09;9.1.4 RPM 安装命令&#xff08;rpm -ivh&#xff09;9.2 YUM 仓库配置9.2.1 YUM 概述9.2.2 YUM 的常用命令9.2.3 修改网络 YU…

Linux系统中基本的启动方式

大家好&#xff0c; 今天主要和大家聊一聊&#xff0c;Linux系统的启动方式有哪些&#xff1f; 目录 第一&#xff1a;启动方式基本简介 第二​&#xff1a;启动模式的选择 第一&#xff1a;启动方式基本简介 Linux系统支持多种启动方式&#xff0c;可以从SD/EMMC、NAND Flas…

Jumperserver堡垒机管理服务器实战

一、 Jumpserver堡垒机简介 1、跳板机简介 跳板机就是一台服务器,开发或运维人员在维护过程中首先要统一登录到这台服务器,然后再登录到目标设备进行维护和操作。 跳板机缺点:没有实现对运维人员操作行为的控制和审计,使用跳板机的过程中还是会出现误操作、违规操作导致的…

Vue实现角色权限动态路由详细教程,在vue-admin-template基础上修改,附免费完整项目代码

前言 vue-admin-template是一个最基础的后台管理模板&#xff0c;只包含了一个后台需要最基础的东西&#xff0c;如果clone的是它的master分支&#xff0c;是没有权限管理的&#xff0c;只有完整版vue-element-admin有这个功能&#xff0c;但是为了小小的一个权限管理而用比较…

java框架 Spring之 AOP 面向切面编程 切入点表达式 AOP通知类型 Spring事务

AOP(Aspect Oriented Programming)面向切面编程&#xff0c;一种编程范式&#xff0c;指导开发者如何组织程序结构 作用&#xff1a;在不惊动原始设计的基础上为其进行功能增强 Spring理念&#xff1a;无入侵式/无侵入式 我们在不修改源代码的时候&#xff0c;为了执行另外的…