有弹性，可伸展的UICollectionView 头部视图

本文翻译自：Stretchy UICollectionView headers

滚动视图的反弹效果可能是iOS中最具特色的效果之一。虽然最初只是华而不实，但随着时间的推移，实际上它已经发挥了一些功能用途，像下拉刷新。另一个很好地应用滚动视图的反弹效果的，就是我最近看到的弹性头部视图。

这个效果非常好，当你向下拉动滚动视图时，可以在顶部和底部查看更多的图片内容。你可能已经在Twitter的iOS应用和Airbnb清单中看到类似的效果了。这种效果很容易实现，今天我将向您展示如何去做。

让我们开始吧。首先，创建一个[UICollectionViewFlowLayout][3]的子类。

import <UIKit/UIKit.h>

@interface StretchyHeaderCollectionViewLayout : UICollectionViewFlowLayout
@end

如果你曾经摆弄自定义过UICollectionView的布局，那么你可能已经意识到它们非常强大的。这是我们的实现：

import "StretchyHeaderCollectionViewLayout.h"

@implementation StretchyHeaderCollectionViewLayout

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
// This will schedule calls to layoutAttributesForElementsInRect: as the
// collectionView is scrolling.
return YES;
}

- (UICollectionViewScrollDirection)scrollDirection {
// This subclass only supports vertical scrolling.
return UICollectionViewScrollDirectionVertical;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

UICollectionView *collectionView = [self collectionView];
UIEdgeInsets insets = [collectionView contentInset];
CGPoint offset = [collectionView contentOffset];
CGFloat minY = -insets.top;

// First get the superclass attributes.
NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

// Check if we've pulled below past the lowest position
if (offset.y < minY) {

// Figure out how much we've pulled down
CGFloat deltaY = fabsf(offset.y - minY);

for (UICollectionViewLayoutAttributes *attrs in attributes) {

// Locate the header attributes
NSString *kind = [attrs representedElementKind];
if (kind == UICollectionElementKindSectionHeader) {

// Adjust the header's height and y based on how much the user
// has pulled down.
CGSize headerSize = [self headerReferenceSize];
CGRect headerRect = [attrs frame];
headerRect.size.height = MAX(minY, headerSize.height + deltaY);
headerRect.origin.y = headerRect.origin.y - deltaY;
[attrs setFrame:headerRect];
break;
}
}
}
return attributes;
}

@end

这个自定义的布局会检查我们是否下拉到最低的偏移量，这意味着我们将开始拉伸头部视图。如果真的是，我们找到这个头部元素，根据拉伸的值来增加它的高度和y轴上的偏移量。

接下来，在你配置你的集合视图的地方，添加下面的代码：

// Create a new instance of our stretchy layout and set the
// default size for our header (for when it's not stretched)
StretchyHeaderCollectionViewLayout *stretchyLayout;
stretchyLayout = [[StretchyHeaderCollectionViewLayout alloc] init];
[stretchyLayout setHeaderReferenceSize:CGSizeMake(320.0, 160.0)];

// Set our custom layout
[collectionView setCollectionViewLayout:stretchyLayout];
// and tell our collection view to always bounce.
[collectionView setAlwaysBounceVertical:YES];

// Then register a class to use for the header.
[collectionView registerClass:[UICollectionReusableView class]
forSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:@"ident"];

最后一件需要做的事情就是创建我们的头部视图，而且应该是UICollectionReusableView的子类。我们可以添加一个UIImageView作为它的子视图，然后使用autoresizing来让它大小合适：

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
viewForSupplementaryElementOfKind:(NSString *)kind
atIndexPath:(NSIndexPath *)indexPath {
// You can make header an ivar so we only ever create one
if (!header) {

header = [collectionView dequeueReusableSupplementaryViewOfKind:kind
withReuseIdentifier:@"ident"
forIndexPath:indexPath];
CGRect bounds;
bounds = [header bounds];

UIImageView *imageView;
imageView = [[UIImageView alloc] initWithFrame:bounds];
[imageView setImage:[UIImage imageNamed:@"header-background"]];

// Make sure the contentMode is set to scale proportionally
[imageView setContentMode:UIViewContentModeScaleAspectFill];
// Clip the parts of the image that are not in frame
[imageView setClipsToBounds:YES];
// Set the autoresizingMask to always be the same height as the header
[imageView setAutoresizingMask:UIViewAutoresizingFlexibleHeight];
// Add the image to our header
[header addSubview:imageView];
}
return header;
}

这个autoresizingMask 会保持图片的高度与头部视图的一致。这个contentMode和clipsToBounds属性将居中图片以及裁切多余的内容。

你可以在Github上找到完整的代码。