很多時(shí)候系統(tǒng)的東西是遠(yuǎn)遠(yuǎn)滿足不了我們項(xiàng)目的需求的驱入，今天要給大家分享的是項(xiàng)目中經(jīng)常遇到的有關(guān)于自定義UICollectionViewFlowLayout問(wèn)題盼樟，例如瀑布流，流水布局等等系統(tǒng)控件所不能實(shí)現(xiàn)的效果愁铺。
一、效果圖
1奔穿、流水布局
2、瀑布流
二敏晤、實(shí)現(xiàn)思路
1贱田、流水布局
A、確定cell不在首尾時(shí)保持cell居中: 通過(guò)獲取cell中心距離屏幕中心 （collectionView.contentOffset.x + 屏幕寬度*0.5）最小的距離嘴脾，然后去改變對(duì)應(yīng)cell的proposedContentOffset男摧，使其在沒(méi)有滾動(dòng)超過(guò)一定距離（上述cell中心與屏幕中心的距離）時(shí)讓對(duì)應(yīng)cell的proposedContentOffset始終保持在屏幕中間。
B译打、通過(guò)layoutAttributesForElementsInRect：去設(shè)置每個(gè)cell在滾動(dòng)過(guò)程中的布局
注：當(dāng)你是繼承UICollectionViewFlowLayout實(shí)現(xiàn)自定義時(shí)想要時(shí)刻刷新布局耗拓，還需要實(shí)現(xiàn)shouldInvalidateLayoutForBoundsChange：方法并返回YES，當(dāng)你繼承UICollectionViewLayout則不需要奏司。
2乔询、瀑布流
A、使用columnHeights數(shù)組（有多少列就有多少個(gè)元素）記錄cell每次更新布局后對(duì)應(yīng)列的高度
B韵洋、通過(guò)比較columnHeights數(shù)組中記錄的高度來(lái)獲取高度最小的那一列竿刁，然后計(jì)算cell的x值來(lái)確定cell的布局
C、實(shí)現(xiàn)collectionViewContentSize并返回columnHeights數(shù)組中記錄的最大值（此處不實(shí)現(xiàn)則不能滾動(dòng)）
三麻献、下面上代碼（只講實(shí)現(xiàn)思路们妥，不講封裝故.h文件無(wú)提供任何屬性及接口，此處忽略）
1勉吻、Horizontal3DLayout.m（流水布局）
// 初始化
- (void)prepareLayout
{
[super prepareLayout];
self.itemSize = CGSizeMake(260, 165);
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
self.minimumLineSpacing = -10;
}
// 重寫此方法重新定位最后滾動(dòng)的位置
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
// 計(jì)算出最終顯示的矩形框
CGRect rect;
rect.origin.y = 0;
rect.origin.x = proposedContentOffset.x;
rect.size = self.collectionView.frame.size;
// 獲得super已經(jīng)計(jì)算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 計(jì)算collectionView最中心點(diǎn)的x值
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
// 存放最小的間距值
CGFloat minDelta = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attrs in array) {
if (ABS(minDelta) > ABS(attrs.center.x - centerX)) {
minDelta = attrs.center.x - centerX;
}
}
// 修改原有的偏移量
proposedContentOffset.x += minDelta;
return proposedContentOffset;
}
// 返回所有布局
-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray* attributes = [super layoutAttributesForElementsInRect:rect];
CGFloat collectionViewCenterX = self.collectionView.bounds.size.width*0.5;
CGFloat scaleDistance = collectionViewCenterX - 20;
for (UICollectionViewLayoutAttributes *attrs in attributes) {
// 當(dāng)前cell中心相對(duì)屏幕左邊的距離
CGFloat leftDistance = attrs.center.x - self.collectionView.contentOffset.x;
// cell中心與屏幕中心的距離
CGFloat middleDistance = 0;
if (leftDistance - collectionViewCenterX == 0) {
middleDistance = 0;
}else if (ABS(leftDistance - collectionViewCenterX) < collectionViewCenterX) {
if (leftDistance < collectionViewCenterX) {
// 左邊
middleDistance = collectionViewCenterX - leftDistance;
}else if (leftDistance > collectionViewCenterX){
// 右邊
middleDistance = leftDistance - collectionViewCenterX;
}
if (middleDistance > scaleDistance) {
// 超出屏幕
middleDistance = scaleDistance;
}
}else if (ABS(leftDistance - collectionViewCenterX) > collectionViewCenterX) {
// 超出屏幕
middleDistance = scaleDistance;
}
CGFloat scale = 0;
if (middleDistance == 0) {
scale = 1.0;
}else{
scale = 0.8 + ((1- middleDistance/scaleDistance) * 0.2);
}
attrs.transform = CGAffineTransformMakeScale(scale, scale);
}
return attributes;
}
// 繼承UICollectionViewFlowLayout 需要布局時(shí)刻變動(dòng)需必須實(shí)現(xiàn)這個(gè)方法监婶，UICollectionViewLayout則不需要
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
2、WaterFallsFlowLayout.m（瀑布流）
#import "WaterFallsFlowLayout.h"
// 默認(rèn)列數(shù)
static const NSInteger WaterFallsColumnCount = 3;
// 默認(rèn)列間距
static const NSInteger WaterFallsColumnMargin = 10;
// 默認(rèn)行間距
static const NSInteger WaterFallsRowMargin = 10;
// more四周間距
static const UIEdgeInsets WaterFallsEdgeInsets = {10,10,10,10};
@interface WaterFallsFlowLayout ()
@property (nonatomic, strong) NSMutableArray *allAttributes;
@property (nonatomic, strong) NSMutableArray *columnHeights;
@end
// 初始化
- (void)prepareLayout
{
[super prepareLayout];
// 清除高度
[self.columnHeights removeAllObjects];
for (int i = 0; i < WaterFallsColumnCount; i++) {
[self.columnHeights addObject:@(WaterFallsEdgeInsets.top)];
}
// 清除布局
[self.allAttributes removeAllObjects];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i < count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.allAttributes addObject:attributes];
}
}
// 返回所有布局
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.allAttributes;
}
// 每個(gè)cell對(duì)應(yīng)的布局
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
CGFloat collectionViewWidth = self.collectionView.bounds.size.width;
CGFloat width = (collectionViewWidth - WaterFallsColumnMargin*(WaterFallsColumnCount-1) - WaterFallsEdgeInsets.left - WaterFallsEdgeInsets.right) / WaterFallsColumnCount;
// 隨機(jī)高度齿桃，實(shí)際請(qǐng)根據(jù)項(xiàng)目自行處理
CGFloat height = 40 + arc4random() % (120 - 40 + 1);
CGFloat x = 0;
CGFloat y = 0;
// 設(shè)高度最短的一列為第一列
CGFloat minHeight = [self.columnHeights[0] doubleValue];
// 最矮的一列
NSInteger minHeightColumnIndex = 0;
for (int i = 0; i < self.columnHeights.count; i++) {
CGFloat height = [self.columnHeights[i] floatValue];
if (height < minHeight) {
minHeight = height;
minHeightColumnIndex = i;
}
}
x = WaterFallsEdgeInsets.left + (WaterFallsColumnMargin + width) * minHeightColumnIndex;
y = minHeight ;
if (y != WaterFallsEdgeInsets.top) {
y += WaterFallsRowMargin;
}
layoutAttributes.frame = CGRectMake(x, y, width, height);
// 更新高度最小列的高度
self.columnHeights[minHeightColumnIndex] = @(CGRectGetMaxY(layoutAttributes.frame));
return layoutAttributes;
}
// 需實(shí)現(xiàn)此防范并返回內(nèi)容高度collectionView才能滾動(dòng)
- (CGSize)collectionViewContentSize
{
CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];
for (NSInteger i = 1; i < WaterFallsColumnCount; i++) {
// 取得第i列的高度
CGFloat columnHeight = [self.columnHeights[i] doubleValue];
if (maxColumnHeight < columnHeight) {
maxColumnHeight = columnHeight;
}
}
return CGSizeMake(0, maxColumnHeight + WaterFallsEdgeInsets.bottom);
}
// Get/Set
- (NSMutableArray *)allAttributes
{
if (!_allAttributes) {
_allAttributes = [NSMutableArray array];
}
return _allAttributes;
}
- (NSMutableArray *)columnHeights
{
if (!_columnHeights) {
_columnHeights = [NSMutableArray array];
}
return _columnHeights;
}
