关于自定义UICollectionViewLayout的一点个人理解<一>

自定义UICollectionView,主要会用到以下几个方法:

  1. - (void)prepareLayout; 第一次加载layout、刷新layout、以及- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;这个方法返回yes时,会调用。这是苹果官方的说明The collection view calls -prepareLayout once at its first layout as the first message to the layout instance. The collection view calls -prepareLayout again after layout is invalidated and before requerying the layout information. Subclasses should always call super if they override。实现该方法后应该调用[super prepareLayout]保证初始化正确。该方法用来准备一些布局所需要的信息。该方法和init方法相似,但该方法可能会被调用多次,所以一些不固定的计算(比如该计算和collectionView的尺寸相关),最好放在这里,以保证collectionView发生变化时,自定义CollectionView能做出正确的反应。
  2. - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect; 该方法用来返回rect范围内的 cell supplementary 以及 decoration的布局属性layoutAttributes(这里保存着她们的尺寸,位置,indexPath等等),如果你的布局都在一个屏幕内 活着 没有复杂的计算,我觉得这里可以返回全部的属性数组,如果涉及到复杂计算,应该进行判断,返回区域内的属性数组,有时候为了方便直接返回了全部的属性数组,不影响布局但可能会影响性能(如果你的item一屏幕显示不完,那么这个方法会调用多次,当所有的item都加载完毕后,在滑动collectionView时不会调用该方法的)。
  3. - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath; 该方法不是必须实现的,即便你实现了,我们对collectionView的任何操作,也不会导致系统主动调用该方法。该方法通常用来定制某个IndexPath的item的属性。当然我们也可以重写这个方法,将布局时相关的属性设置放在这里,在- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect 或者 - (void)prepareLayout 中 需要创建用来返回给系统的属性数组 主动调用这个方法,并添加带可变数组中去返回给系统。当然我们也可以在 - (void)prepareLayout 中 通过[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForRow:i inSection:0]] 获取 每个indexPath的attributes,在- (void)prepareLayout中设置所有item的属性。看需求以及个人喜欢。
  4. - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds; 用来刷新layout的,当我们返回yes的时候。如果我们的需求不需要实时的刷新layout,那么最好判断newBounds 和 我们的collectionView的bounds是否相同,不同时返回yes;(例如苹果官方的lineLayout,因为每次滑动都要放大item,所以这了就直接返回yes)。

以苹果官方的lineLayout为例,这个是对UICollectionViewFlowLayout的扩充,

-(id)init
{
    self = [super init];
    if (self) {
        self.itemSize = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
        self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        self.sectionInset = UIEdgeInsetsMake(200, 0.0, 200, 0.0);//上下边距
        self.minimumLineSpacing = 50.0;//行间距
    }
    return self;
}

这里初始化一些信息。

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

因为滑动放大,故这里需要返回yes,实时刷新layout。

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray* array = [super layoutAttributesForElementsInRect:rect];

    //可视rect
    CGRect visibleRect;
    visibleRect.origin = self.collectionView.contentOffset;
    visibleRect.size = self.collectionView.bounds.size;

    //设置item的缩放
    for (UICollectionViewLayoutAttributes* attributes in array) {
        if (CGRectIntersectsRect(attributes.frame, rect)) {
            CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;//item到中心点的距离
            CGFloat normalizedDistance = distance / ACTIVE_DISTANCE;//距离除以有效距离得到标准化距离
            //距离小于有效距离才生效
            NSLog(@"%f",distance);
            if (ABS(distance) < ACTIVE_DISTANCE) {
                CGFloat zoom = 1 + ZOOM_FACTOR*(1 - ABS(normalizedDistance));//缩放率范围1~1.3,与标准距离负相关
                attributes.transform3D = CATransform3DMakeScale(zoom, zoom, 1.0);//x,y轴方向变换
                //attributes.zIndex = 0;
            }
        }
    }

    return array;
}

这里对item进行放大操作(因为该类是继承自UICollectionViewFlowLayout,苹果重写了该方法,所以调用super可以拿到当前rect范围内attributes,如果继承自UICollectionViewLayout,调用super是什么都拿不到的)。这里的思想就是:距离屏幕中心超过一定距离(假设200,自己设定)开始放大,CGFloat normalizedDistance = distance / ACTIVE_DISTANCE;item中心到屏幕中心点距离占200的比例,

CGFloat zoom = 1 + ZOOM_FACTOR*(1 - ABS(normalizedDistance));

这样便得到放大的倍数。

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    //proposedContentOffset是没有对齐到网格时本来应该停下的位置

    //计算出实际中心位置
    CGFloat offsetAdjustment = MAXFLOAT;
    CGFloat horizontalCenter = proposedContentOffset.x + (CGRectGetWidth(self.collectionView.bounds) / 2.0);

    //取当前屏幕中的UICollectionViewLayoutAttributes
    CGRect targetRect = CGRectMake(proposedContentOffset.x, 0.0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);
    NSArray* array = [super layoutAttributesForElementsInRect:targetRect];

    //对当前屏幕中的UICollectionViewLayoutAttributes逐个与屏幕中心进行比较,找出最接近中心的一个
    for (UICollectionViewLayoutAttributes* layoutAttributes in array) {
        CGFloat itemHorizontalCenter = layoutAttributes.center.x;
        if (ABS(itemHorizontalCenter - horizontalCenter) < ABS(offsetAdjustment)) {
            offsetAdjustment = itemHorizontalCenter - horizontalCenter;
        }
    }

    //返回调整好的point
    return CGPointMake(proposedContentOffset.x + offsetAdjustment, proposedContentOffset.y);
}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity 这个方法简单理解可以当作是用来设置collectionView的偏移量的,计算当前屏幕哪个item中心点距离屏幕中心点近,就将该item拉到中心去。

个人理解,不对的地方还请见谅。

时间: 2024-08-24 19:19:34

关于自定义UICollectionViewLayout的一点个人理解<一>的相关文章

自定义UICollectionViewLayout 实现瀑布流

今天研究了一下自定义UICollectionViewLayout. 看了看官方文档,要自定义UICollectionViewLayout,需要创建一个UICollectionViewLayout的子类.同时,可以通过一下3个方法传递布局信息.contentSize.cells的信息等. 一.继承UICollectionViewLayout,重写以下方法 1.通过prepareLayout方法来计算预先计算需要提供的布局信息. 2.通过collectionViewContentSize方法来返回c

AngularJS』一点小小的理解

『AngularJS』一点小小的理解 AngularJS 是一个前端的以Javascript为主的MVC框架.与AngularJS相类似的还有EmberJS. 随着时代在进步,各种各样的开发理念与开发框架不断的提出与发展,而就目前来说,除了游戏.IM(类似QQ).Office这类软件之外,新出的软件应用开始出现两个方向,一个是以Web为主的Web APP,一个是以移动端为主的移动APP.且,现有也有一种声音认为Web APP早晚会取代移动端原生APP,从而一统计算机软件的应用方式.暂且不论这种说

Layui的一点小理解(上)

首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的.还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言. 既然说Layui,当然要简单的介绍以下什么是layui啊!下面是官方的解释: Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发.layui还很年轻

自定义UICollectionViewLayout之瀑布流

目标效果 因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLayout  类,实现瀑布流效果.效果如右图. 依赖工具: 我们需要一个图片大小和图片地址的Josn数据, 和 SDWebImage图片加载的第三方工具 RootViewController.m 1 #import "RootViewController.h" 2 #import "

自定义组件&lt;六&gt;:深入理解ViewGroup

自定义组件ViewGroup深入理解 有前几张环节可以看出来: 自定义组件的测量过程和绘制过程想弄懂并不是那么的容易. 接下里我就仔细给大家来讲一下 测量过程-:onMeasure()以及 布局过程:onLayout() 一个Viewgroup基本的继承类格式如下: 1 import android.content.Context;  2 import android.view.ViewGroup;  3   4 public class MyViewGroup extends ViewGrou

柯里化的一点小理解

假如说我有一个函数,这个函数只有一个参数,这个参数是只有一个参数的函数,比如说 def f1(p: (Int) => String) { println(p(5)) } def p1(x: Int): String = { (x + 10).toString } //执行函数 f1(p1) 这时我们另外一个函数是这样的 def p2(x:Int,y:Int):String={ (x+y).toString } 这种情况下,f1将无法调用p2,参数不匹配.但如果将p2改造一下呢?改造好的函数我们设

python关于装饰器的一点小理解

越来越感觉,对于一些术语,真的不能看了名字就想着用自己的 语言/想法 去试着解释,比如socket/套接字,再比如装饰器,仅凭字面意思,很难理解的,反而会把你带到坑里去 def f1(fn): def action(): return "<a>"+fn()+"</a>" return action @f1 def test(): return "is test" print test() 运行结果 <a>is

tc(traffic server)的一点个人理解

tc (traffic control)是linux下的流控工具,功能很强,但是文档不好理解 参考: https://segmentfault.com/a/1190000000666869 http://www.cnblogs.com/endsock/archive/2011/12/09/2281519.html 简单地说tc对出口的包根据一定规则分类,然后利用排序规则进行排序(进来的包没办法控制,所以结合iptables的时候规则一般是-d dst) tc: qdisc(queueing di

观察者模式 -&gt; dom事件 / 自定义事件 / Promise 我的理解

观察者模式(Observer) 又称作为发布-订阅模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者对象之间通讯和耦合的问题; 观察者模式例子 引用于<JavaScript设计模式> var Observer = (function(){ var _messages = {}; // 监听信息容器 return { /** * 注册监听信息接口 * @param {String} type 监听信息类型 * @param {Function} fn 对应的回调函数 */ regist: