1.自定义flowLayout
注 ：自定义的时候继承UICollectionViewFlowLayout,可以保存流水布局的效果
属性介绍 UICollectionViewLayoutAttributes
NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewLayoutAttributes : NSObject <NSCopying, UIDynamicItem>
@property (nonatomic) CGRect frame;
@property (nonatomic) CGPoint center;
@property (nonatomic) CGSize size;
@property (nonatomic) CATransform3D transform3D;
@property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGFloat alpha;
@property (nonatomic) NSInteger zIndex; // default is 0
@property (nonatomic, getter=isHidden) BOOL hidden; // As an optimization, UICollectionView might not create a view for items whose hidden attribute is YES
@property (nonatomic, retain) NSIndexPath *indexPath;
@property (nonatomic, readonly) UICollectionElementCategory representedElementCategory;
@property (nonatomic, readonly) NSString *representedElementKind; // nil when representedElementCategory is UICollectionElementCategoryCell
+ (instancetype)layoutAttributesForCellWithIndexPath:(NSIndexPath *)indexPath;
+ (instancetype)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind withIndexPath:(NSIndexPath *)indexPath;
+ (instancetype)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind withIndexPath:(NSIndexPath*)indexPath;
@end
注 ：zIndex指的是在层次上的先后顺序，在做相册效果的时候可以使得层次效果发生改变
可以看到关于cell的所有属性的信息，可以通过对transform3D或者transform的处理达到需要的动画效果
方法介绍
- (void)prepareLayout;
介绍：准备布局信息，官方给的介绍中提到Subclasses should always call super if they override.最好把对于layout的frame的定义写到这里
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
介绍：只要UICollectionView的边界发生了改变就会调用这个方法，内部会重新调用prepareLayout和layoutAttributesForElementsInRect方法获得所有cell的布局属性，所有是重新定义layout必须实现的方法
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
介绍：拿到所有UICollectionView中的UICollectionViewLayoutAttributes信息，可以通过CGRectIntersectsRect方法判断出屏幕上正在显示cell、header、footer的布局信息
自定义JXFlowLayout
#import "JXFlowLayout.h"
static CGFloat const velocityX = 2.5;
@implementation JXFlowLayout
//做好准备
- (void)prepareLayout
{
[super prepareLayout];
CGFloat itenWidth = 150;
self.itemSize = CGSizeMake(itenWidth, itenWidth);
self.minimumLineSpacing = itenWidth * 0.3;
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
CGFloat sectionBeginLocation = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
self.sectionInset = UIEdgeInsetsMake(0, sectionBeginLocation, 0, sectionBeginLocation);
}
//一旦边界改变就刷新
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/** 有效距离:当item的中间x距离屏幕的中间x在JXActiveDistance以内,才会开始放大, 其它情况都是缩小 */
static CGFloat const JXActiveDistance = 150;
/** 缩放因素: 值越大, item就会越大 */
static CGFloat const JXScaleFactor = 0.6;
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray *array = [super layoutAttributesForElementsInRect:rect];
for (UICollectionViewLayoutAttributes *attributes in array) {
//拿到在当前屏幕中的部分
CGRect currentBounds ;
currentBounds.origin = self.collectionView.contentOffset;
currentBounds.size = self.collectionView.frame.size;
//屏幕中间的部分需要进行缩放处理
if (!CGRectIntersectsRect(currentBounds, attributes.frame)) continue;
CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
// 每一个item的中点x
CGFloat itemCenterX = attributes.center.x;
// 差距越小, 缩放比例越大
// 根据跟屏幕最中间的距离计算缩放比例
CGFloat scale = 1 + JXScaleFactor * (1 - (ABS(itemCenterX - centerX) / JXActiveDistance));
attributes.transform = CGAffineTransformMakeScale(scale, scale);
}
return array;
}
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
// 1.计算出scrollView最后会停留的范围
CGRect lastRect;
// lastRect.origin = proposedContentOffset;
// lastRect.origin = self.collectionView.contentOffset;
// 这里是根据滑动速度的一个配置，如果速度够大，就采用预计停留的点作为起始点，否则采用当前屏幕的点作为起始点
if (ABS(velocity.x) > velocityX) {
lastRect.origin = proposedContentOffset;
}else{
lastRect.origin = self.collectionView.contentOffset;
}
lastRect.size = self.collectionView.frame.size;
// 计算屏幕�最中间的x
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
// 2.取出这个范围内的所有属性
NSArray *array = [self layoutAttributesForElementsInRect:lastRect];
// 3.遍历所有属性
CGFloat adjustOffsetX = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attrs in array) {
if (ABS(attrs.center.x - centerX) < ABS(adjustOffsetX)) {
adjustOffsetX = attrs.center.x - centerX;
}
}
return CGPointMake(proposedContentOffset.x + adjustOffsetX, proposedContentOffset.y);
}
转发一个自定义的停留效果：XLPlainFlowLayout
2.自定义Layout
方法介绍
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
介绍： 实现对于每个indexPath的cell的布局信息
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
介绍：对于header和footer的布局（如果没有，可不重载）
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString*)elementKind atIndexPath:(NSIndexPath *)indexPath;
介绍：对于装饰视图的布局（如果没有，可不重载）
一个简单的相册叠加布局
@implementation JXStackLayout
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
//- (CGSize)collectionViewContentSize
//{
// return CGSizeMake(500, 500);
//}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
NSArray *angles = @[@0, @(-0.2), @(-0.5), @(0.2), @(0.5)];
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrs.size = CGSizeMake(100, 100);
attrs.center = CGPointMake(self.collectionView.frame.size.width * 0.5, self.collectionView.frame.size.height * 0.5);
if (indexPath.item >= 5) {
attrs.hidden = YES;
} else {
attrs.transform = CGAffineTransformMakeRotation([angles[indexPath.item] floatValue]);
// zIndex越大,就越在上面
attrs.zIndex = [self.collectionView numberOfItemsInSection:indexPath.section] - indexPath.item;
}
return attrs;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSMutableArray *array = [NSMutableArray array];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i<count; i++) {
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[array addObject:attrs];
}
return array;
}
@end
瀑布流
@class JXWaterflowLayout;
@protocol JXWaterflowLayoutDelegate <NSObject>
- (CGFloat)waterflowLayout:(JXWaterflowLayout *)waterflowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath;
@end
@interface JXWaterflowLayout : UICollectionViewLayout
@property (nonatomic, assign) UIEdgeInsets sectionInset;
/** 每一列之间的间距 */
@property (nonatomic, assign) CGFloat columnMargin;
/** 每一行之间的间距 */
@property (nonatomic, assign) CGFloat rowMargin;
/** 显示多少列 */
@property (nonatomic, assign) int columnsCount;
@property (nonatomic, weak) id<JXWaterflowLayoutDelegate> delegate;
@end
#import "JXWaterflowLayout.h"
//static const CGFloat JXColumnMargin = 10;
//static const CGFloat JXRowMargin = JXColumnMargin;
@interface JXWaterflowLayout();
/** 这个字典用来存储每一列最大的Y值(每一列的高度) */
@property (nonatomic, strong) NSMutableDictionary *maxYDict;
/** 存放所有的布局属性 */
@property (nonatomic, strong) NSMutableArray *attrsArray;
@end
@implementation JXWaterflowLayout
- (NSMutableDictionary *)maxYDict
{
if (!_maxYDict) {
self.maxYDict = [[NSMutableDictionary alloc] init];
}
return _maxYDict;
}
- (NSMutableArray *)attrsArray
{
if (!_attrsArray) {
self.attrsArray = [[NSMutableArray alloc] init];
}
return _attrsArray;
}
- (instancetype)init
{
if (self = [super init]) {
self.columnMargin = 10;
self.rowMargin = 10;
self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
self.columnsCount = 3;
}
return self;
}
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/**
* 每次布局之前的准备
*/
- (void)prepareLayout
{
[super prepareLayout];
// 1.清空最大的Y值
for (int i = 0; i<self.columnsCount; i++) {
NSString *column = [NSString stringWithFormat:@"%d", i];
self.maxYDict[column] = @(self.sectionInset.top);
}
// 2.计算所有cell的属性
[self.attrsArray removeAllObjects];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i<count; i++) {
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[self.attrsArray addObject:attrs];
}
}
/**
* 返回所有的尺寸
*/
- (CGSize)collectionViewContentSize
{
__block NSString *maxColumn = @"0";
[self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL *stop) {
if ([maxY floatValue] > [self.maxYDict[maxColumn] floatValue]) {
maxColumn = column;
}
}];
return CGSizeMake(0, [self.maxYDict[maxColumn] floatValue] + self.sectionInset.bottom);
}
/**
* 返回indexPath这个位置Item的布局属性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 假设最短的那一列的第0列
__block NSString *minColumn = @"0";
// 找出最短的那一列
[self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL *stop) {
if ([maxY floatValue] < [self.maxYDict[minColumn] floatValue]) {
minColumn = column;
}
}];
// 计算尺寸
CGFloat width = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnsCount - 1) * self.columnMargin)/self.columnsCount;
CGFloat height = [self.delegate waterflowLayout:self heightForWidth:width atIndexPath:indexPath];
// 计算位置
CGFloat x = self.sectionInset.left + (width + self.columnMargin) * [minColumn intValue];
CGFloat y = [self.maxYDict[minColumn] floatValue] + self.rowMargin;
// 更新这一列的最大Y值
self.maxYDict[minColumn] = @(y + height);
// 创建属性
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrs.frame = CGRectMake(x, y, width, height);
return attrs;
}
/**
* 返回rect范围内的布局属性
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attrsArray;
}
