IOS开发UI篇--使用UICollectionView实现一个列表头部拉伸效果的案例

一、案例演示

本案例Demo演示的是列表头部具有拉伸的效果,具有良好的用户体验。
当列表的offsetY小于0的时候,顶部的图片会跟随手势的下拉将头部的宽高进行相应地缩放。如下图所示:
这里写图片描述

二、知识储备

2.1、自定义UICollectionViewFlowLayout

自定义UICollectionViewFlowLayout就是UICollectionView功能强大的精髓所在,它负责了将各个Cell、Supplementary View和Decoration Views进行组织和管理,可以高度定制内容的展现。

2.2、layoutAttributesForElementsInRect:方法

这是UICollectionViewFlowLayout布局类中最重要的方法了,同时可能也是最容易让人迷惑的方法。collection view调用这个方法并传递一个自身坐标系统中的矩形过去。这个矩形代表了这个视图的可见矩形区域(也就是它的bounds),你需要准备好处理传给你的任何矩形。

你的实现必须返回一个包含UICollectionViewLayoutAttributes对象的数组,为每一个cell包含这样的一个对象,supplementary view或decoration view在矩形区域内是可见的。UICollectionViewLayoutAttributes类包含了collection view内item的所有相关布局属性。默认情况下,这个类包含frame,center,size,transform3D,alpha,zIndex属性(properties),和hidden特性(attributes)。如果你的布局想要控制其他视图的属性(比如,背景颜色),你可以建一个UICollectionViewLayoutAttributes的子类,然后加上你自己的属性。

布局属性对象通过indexPath属性和他们对应的cell,supplementary view或者decoration view关联在一起。collection view为所有items从布局对象中请求到布局属性后,它将会实例化所有视图,并将对应的属性应用到每个视图上去。

注意!这个方法涉及到所有类型的视图,也就是cell,supplementary views和decoration views。一个幼稚的实现可能会选择忽略传入的矩形,并且为collection view中的所有视图返回布局属性。在原型设计和开发布局阶段,这是一个有效的方法。但是,这将对性能产生非常坏的影响,特别是可见cell远少于所有cell数量的时候,collection view和布局对象将会为那些不可见的视图做额外不必要的工作。

2.3、- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;

当collection view的bounds改变时,布局需要告诉collection view是否需要重新计算布局。

三、关键代码分析

自定义UICollectionViewFlowLayout的实现

#import "StretchyHeaderCollectionViewLayout.h"

@implementation StretchyHeaderCollectionViewLayout

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

- (UICollectionViewScrollDirection)scrollDirection{
    return UICollectionViewScrollDirectionVertical;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
    UICollectionView *collectionView = [self collectionView];
    CGPoint offset = [collectionView contentOffset];

    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

    if (offset.y<0) {
        CGFloat deltaY = fabs(offset.y);
        for (UICollectionViewLayoutAttributes *attrs in attributes ) {
            NSString *kind = [attrs representedElementKind];
            if (kind == UICollectionElementKindSectionHeader) {
                CGSize headerSize = [self headerReferenceSize];
                CGRect headRect = [attrs frame];
                headRect.size.height = headerSize.height+deltaY;
                headRect.size.width = headerSize.width +deltaY;
                headRect.origin.y = headRect.origin.y - deltaY;
                headRect.origin.x = headRect.origin.x - deltaY/2;
                [attrs setFrame:headRect];
                break;
            }
        }

    }

    return attributes;
}
@end

四、Demo下载地址

Demo下载地址
如果对你有点帮助,star一下吧。

五、联系方式

微博:新浪微博
博客:http://blog.csdn.net/yixiangboy
github:https://github.com/yixiangboy

六、如需转载,请注明来源。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页