UICollectionView——整体总结

前言

这几天有时间看了下UICollectionView的东西,才发觉它真的非常强大,很有必要好好学习学习。以前虽然用过几次,但没有系统的整理总结过。这两天我为UICollectionView做一个比较全面的整理。包括基本使用自定义布局自定义插入删除动画自定义转场动画等几部分。好了,开始。

UICollectionView相对于UITableView可以说是青出于蓝而胜于蓝,它和UITableView很相似,但它要更加强大。
UITableView的布局形式比较单一,局限于行列表,而UICollectionView的强大之处在于把视图布局分离出来成为一个独立的类,你想实现怎样的视图布局,就子类化这个类并在其中实现。

UICollectionView基础

  • UICollectionViewFlowLayout:视图布局对象(流视图:一行排满,自动排到下行),继承自UICollectionViewLayout。
    UICollectionViewLayout有个collectionView属性,
    所有的视图布局对象都继承自UICollectionViewLayout。若我们要自定义布局对象,我们一般继承UICollectionViewFlowLayout就可以了。
  • 需要实现三个协议;UICollectionViewDataSource(数据源)、UICollectionViewDelegateFlowLayout(视图布局)、UICollectionViewDelegate。
    可以看得出,除了视图布局,UICollectionView几乎和UITableView一样,但这也正是它的强大之处。
1.创建UICollectionView视图
- (void)loadCollectionView
{_customLayout = [[CustomCollectionViewLayout alloc] init]; // 自定义的布局对象_collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:_customLayout];_collectionView.backgroundColor = [UIColor whiteColor]; _collectionView.dataSource = self; _collectionView.delegate = self; [self.view addSubview:_collectionView]; // 注册cell、sectionHeader、sectionFooter [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellId]; [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerId]; [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerId]; }

需要注意的是这几行代码的位置,及const的位置。(我经常搞乱)

@implementation YWViewController// 注意const的位置
static NSString *const cellId = @"cellId"; static NSString *const headerId = @"headerId"; static NSString *const footerId = @"footerId"; - (void)viewDidLoad {
2.实现UICollectionViewDataSource的几个代理方法
#pragma mark ---- UICollectionViewDataSource- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{return 1; } - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return _section0Array.count; } - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [_collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath]; cell.backgroundColor = [UIColor purpleColor]; return cell; } // 和UITableView类似,UICollectionView也可设置段头段尾 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { if([kind isEqualToString:UICollectionElementKindSectionHeader]) { UICollectionReusableView *headerView = [_collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerId forIndexPath:indexPath]; if(headerView == nil) { headerView = [[UICollectionReusableView alloc] init]; } headerView.backgroundColor = [UIColor grayColor]; return headerView; } else if([kind isEqualToString:UICollectionElementKindSectionFooter]) { UICollectionReusableView *footerView = [_collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footerId forIndexPath:indexPath]; if(footerView == nil) { footerView = [[UICollectionReusableView alloc] init]; } footerView.backgroundColor = [UIColor lightGrayColor]; return footerView; } return nil; } - (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath { } #pragma mark ---- UICollectionViewDelegateFlowLayout - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return (CGSize){cellWidth,cellWidth}; } - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(5, 5, 5, 5); } - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { return 5.f; } - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section { return 5.f; } - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section { return (CGSize){ScreenWidth,44}; } - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section { return (CGSize){ScreenWidth,22}; } #pragma mark ---- UICollectionViewDelegate - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } // 点击高亮 - (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath]; cell.backgroundColor = [UIColor greenColor]; } // 选中某item - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { } // 长按某item,弹出copy和paste的菜单 - (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } // 使copy和paste有效 - (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender { if ([NSStringFromSelector(action) isEqualToString:@"copy:"] || [NSStringFromSelector(action) isEqualToString:@"paste:"]) { return YES; } return NO; } // - (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender { if([NSStringFromSelector(action) isEqualToString:@"copy:"]) { // NSLog(@"-------------执行拷贝-------------"); [_collectionView performBatchUpdates:^{ [_section0Array removeObjectAtIndex:indexPath.row]; [_collectionView deleteItemsAtIndexPaths:@[indexPath]]; } completion:nil]; } else if([NSStringFromSelector(action) isEqualToString:@"paste:"]) { NSLog(@"-------------执行粘贴-------------"); } }

UICollectionView自定义布局

要自定义UICollectionView布局,就要子类化UICollectionViewLayout,然后重写它的一些方法以达到我们自定义布局的需求。下来我们来看看UICollectionViewLayout类里一些比较重要的方法:

  • - (void)prepareLayout;为layout显示做准备工作,你可以在该方法里设置一些属性。
  • - (CGSize)collectionViewContentSize;返回layout的size。
  • - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;返回在collectionView的可见范围内(bounds)所有item对应的layoutAttrure对象装成的数组。collectionView的每个item都对应一个专门的UICollectionViewLayoutAttributes类型的对象来表示该item的一些属性,比如bounds,size,transform,alpha等。
  • - (UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath;传入indexPath,返回该indexPath对应的layoutAtture对象。
  • - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds; 当当前layout的布局发生变动时,是否重写加载该layout。默认返回NO,若返回YES,则重新执行这俩方法:
    • - (void)prepareLayout;
    • - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
  • - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;返回layout“最终”的偏移量,何谓“最终”,手指离开屏幕时layout的偏移量不是最终的,因为它有惯性,当它停止时才是“最终”偏移量。

下面这两个方法一般用于自定义插入删除时的动画,后面再说。

  • - (UICollectionViewLayoutAttributes )initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath )itemIndexPath;

  • - (nullable UICollectionViewLayoutAttributes )finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath )itemIndexPath;

本Demo的代码虽然子类化了UICollectionViewLayout,但是主要是用于自定义插入删除动画,所以本段没什么代码展示。


UICollectionView插入删除的操作及动画

插入删除的操作

添加在哪触发:

    UIBarButtonItem *btnItem = [[UIBarButtonItem alloc] initWithTitle:@"添加"style:UIBarButtonItemStylePlaintarget:self action:@selector(addItemBtnClick:)]; self.navigationItem.rightBarButtonItem = btnItem;

添加的实现:

// 添加(插入item)
- (void)addItemBtnClick:(UIBarButtonItem *)btnItem
{[_collectionView performBatchUpdates:^{// 构造一个indexPath NSIndexPath *indePath = [NSIndexPath indexPathForItem:_section0Array.count inSection:0]; [_collectionView insertItemsAtIndexPaths:@[indePath]]; // 然后在此indexPath处插入给collectionView插入一个item [_section0Array addObject:@"x"]; // 保持collectionView的item和数据源一致 } completion:nil]; }

因为是练习Demo,所以暂时把删除的触发源写在了长按某Item弹出菜单的copy按钮里。实际中你可以自定义UICollectionViewCell,添加长按手势,长按抖动出现叉号,然后删除等,随你怎么做。

// copy and paste 的实现
- (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender { if([NSStringFromSelector(action) isEqualToString:@"copy:"]) { // NSLog(@"-------------执行拷贝-------------"); [_collectionView performBatchUpdates:^{ [_section0Array removeObjectAtIndex:indexPath.row]; [_collectionView deleteItemsAtIndexPaths:@[indexPath]]; } completion:nil]; } else if([NSStringFromSelector(action) isEqualToString:@"paste:"]) { NSLog(@"-------------执行粘贴-------------"); } }

插入删除的动画

上面已经提到了在UICollectionViewLayout类中有两个用于自定义动画的方法,两个方法分别表示动画的起始状态和终止状态,我们可以分别在方法里设置layoutAttrure来实现某种动画效果。

苹果选择了一种安全的途径去实现一个简单的淡入淡出动画作为所有布局的默认动画。如果你想实现自定义动画,最好的办法是子类化 UICollectionViewFlowLayout 并且在适当的地方实现你的动画。

一般来说,我们对布局属性从初始状态到结束状态进行线性插值来计算 collection view 的动画参数。然而,新插入或者删除的元素并没有最初或最终状态来进行插值。要计算这样的 cells 的动画,collection view 将通过 initialLayoutAttributesForAppearingItemAtIndexPath: 以及 finalLayoutAttributesForDisappearingItemAtIndexPath: 方法来询问其布局对象,以获取最初的和最后的属性。苹果默认的实现中,对于特定的某个 indexPath,返回的是它的通常的位置,但 alpha 值为 0.0,这就产生了一个淡入或淡出动画。

简而言之,就是苹果自带了插入删除时Item的淡入淡出的动画,若你想自定义更炫的动画,就子类化UICollectionViewFlowLayout类,并重写以下两个方法:

// 初始状态
- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath
{UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:itemIndexPath]; attr.center = CGPointMake(CGRectGetMidX(self.collectionView.bounds), CGRectGetMaxY(self.collectionView.bounds)); attr.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0.2, 0.2), M_PI); return attr; } // 终结状态 - (nullable UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath { UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:itemIndexPath]; attr.alpha = 0.0f; return attr; }

insert&delete.gif

UICollectionView的转场动画

http://objccn.io/issue-12-5/

转载于:https://www.cnblogs.com/Free-Thinker/p/6737701.html

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

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

相关文章

java Class对象返回的都是指向同一个java堆地址上的Class引用

一旦类被加载了到了内存中,那么不论通过哪种方式获得该类的Class对象,它们返回的都是指向同一个java堆地址上的Class引用。jvm不会创建两个相同类型的Class对象 public class Cat {static {System.out.println("wwwww");} }class T1 {public s…

matlab基础与实例教程,MATLAB基础与实例教程

系统全面,实例丰富 考虑到Matlab进行仿真和运算分析时的基础知识和实践操作,讲解从基础的变量、函数、数据类型等入手,涉及到数学分析、图形可视化、Simulink仿真、文件读写等,全面地介绍了Matlab的分析方法。 精心编排&#xff0…

近300万记录的论坛还用这个分页存储过程

http://www2.gliet.edu.cn/club2/bbs/list_new_today.asp用于列出今日最新贴的。有个想不明的问题是为什么DeclareSqlText Varchar(1000)声明为1000个字符大了,但超过255字符之后exec(SqlText)就会出错。自动把后面的cut掉了?ALTERPROCEDUREbbsListNewTo…

JAVA项目中classpath路径详解

classpath是什么路径? 1.classpath指的是类路径,也就是编译之后的target文件夹下的WEB-INF/class文件夹。 2.resources文件夹存放的是各种配置文件,当项目被编译时resources下的所有配置文件均被放在 WEB-INF/class文件夹下。也就是类路径下…

Idea运行项目报错:java.lang.OutOfMemoryError: Java heap space/ java.lang.OutOfMemoryError: GC overhead 解决方法

问题 使用Idea运行代码量比较多的项目时,会报错:java.lang.OutOfMemoryError: Java heap space java.lang.OutOfMemoryError: GC overhead limit exceeded java.lang.OutOfMemoryError: GC overhead limit exceeded 仔细看了整个报错过程,堆…

Leaning Method

001用分布在两个地方的两台办公电脑开发一个项目,计划使用gitee同步代码。具体应该怎么操作? 要使用 Gitee 同步代码,你可以按照以下步骤进行操作: 在两台办公电脑上都安装 Git 客户端,并在 Gitee 上创建一个项目仓库…

wamp php文件怎么创建数据库,phpmyadmin怎么创建数据库

phpmyadmin怎么创建数据库?1、首先登陆phpmyadmin,有两种方法,第一钟是直接点击wampserver图标,再点击phpmyadmin即可登陆进来是最常用的方法;其次是在浏览器地址中输入http://localhost:8080/phpmyadmin(注意8080是端口号&#…

maven的三大生命周期

一、Maven的生命周期 Maven的生命周期就是对所有的构建过程进行抽象和统一。包含了项目的清理、初始化、编译、测试、打包、集成测试、验证、部署和站点生成等几乎所有的构建步骤。 Maven的生命周期是抽象的,即生命周期不做任何实际的工作,实际任务由插…

static{}静态代码块与{}普通代码块和构造代码块之间的区别

public class TestStatic {{System.out.println("构造代码块");}TestStatic() {System.out.println("构造函数代码块");}//类级别的初始化,只是在类加载的时候做一次static {System.out.println("static静态代码块");} } 1.静态代码块…

多线程编程(三)--创建线程之Thread VS Runnable

前面写过一篇基础的创建多线程的博文: 那么本篇博文主要来对照一下这两种创建线程的差别。 继承Thread类: 还拿上篇博客的样例来说: 四个线程各自卖各自的票,说明四个线程之间没有共享,是独立的线程。每一个线程平等。…

用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变

使用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变 答: 使用final关键字修饰一个变量时,是指引用变量不能变,引用变量所指向的对象中的内容还是可以改变的。 代码 public class TestFinal {private static final StringBuffer a new S…

Intellij IDEA中maven更新不下来pom中的jar包,reimport失效

问题: Intellij IDEA中使用maven reimport包,一直失败 即使我将本地已存在的一个jar包目录删除了,pom文件那里也没飘红提示找不到 解决方法: maven设置中去掉离线下载。 Work offline:勾选上时不会走maven远程仓…

Java+XML+MVC框架StrutsCX简介[转]

StrutsCX是一个以Struts为基础的XML解决方案的框架,和Struts不同,它使用XML(确切的说是XSLT)作为表现层,而不是像Struts那样是以JSP作为表现层。 目前它的最新版本是0.9.5,这个也就意味着它还没有完全稳定和…

oracle高资源消耗sql,Oracle中定位重要(消耗资源多)的SQL

在分析SQL性能的时候,经常需要确定资源消耗多的SQL,总结如下: 1 查看值得怀疑的SQLselect substr(to_char(s.pct,在分析SQL性能的时候,经常需要确定资源消耗多的SQL,,总结如下:1 查看值得怀疑的…

@PostContruct注解的使用

PostConstruct是Java自己的注解. PostConstruct该注解被用来修饰一个非静态的void()方法. PostConstruct修饰的方法会在服务器加载Servlet的时候运行,并且只会被服务器执行一次. PostConstruct在构造函数之后执行,init()方法之前执行. 如果我们知道servlet的生命周期&#xff…

《Vim实用技巧》阅读笔记 --- 移动及跳转

1、在对实际行的操作之前加上g,即可对屏幕行进行操作,例如:gj表示向下移动一个屏幕行,g^表示移动到屏幕行的第一个非空白字符等等 2、Vim有两组面向单词正向及反向移动的命令: w 正向移动到下一个单词的开头b 反向移动…

oracle财务软件凭证打印,金算盘财务软件后台数据库为Oracle

金算盘财务软件后台数据库为Oracle,OA系统中虽然提供了金算盘财务软件的接口,但由于版本较低,无法直接采集金算盘财务软件的备份数据。我们发现,在已试验的金算盘财务软件的凭证表中,科目字段中既有科目编码也有科目名…

Unity GeometryShader(从一个线框渲染的例子开始)

GeometryShader这个概念,已经出现很久了,但由于性能不佳,所以使用的并不多。甚至移动平台根本就不支持。移动平台的硬件更新速度也是越来越快,GS的应用普及应该不会太远。就现阶段而言,GS来做一些辅助效果也是有一定用…

为什么SimpleDateFormat不是线程安全的?以及解决方法说明

一:概述 SimpleDateFormat 类主要负责日期的转换与格式化等操作,在多线程的环境中,使用此类容易造成数据转换及处理的不正确,因为 SimpleDateFormat 类并不是线程安全的,但在单线程环境下是没有问题的。 SimpleDateF…