很多時候系統(tǒng)的東西是遠遠滿足不了我們項目的需求的，今天要給大家分享的是項目中經(jīng)常遇到的有關(guān)于自定義UICollectionViewFlowLayout問題，例如瀑布流，流水布局等等系統(tǒng)控件所不能實現(xiàn)的效果。
一、效果圖
1、流水布局
2、瀑布流
二、實現(xiàn)思路
1、流水布局
A、確定cell不在首尾時保持cell居中: 通過獲取cell中心距離屏幕中心 （collectionView.contentOffset.x + 屏幕寬度*0.5）最小的距離，然后去改變對應(yīng)cell的proposedContentOffset，使其在沒有滾動超過一定距離（上述cell中心與屏幕中心的距離）時讓對應(yīng)cell的proposedContentOffset始終保持在屏幕中間。
B、通過layoutAttributesForElementsInRect：去設(shè)置每個cell在滾動過程中的布局
注：當(dāng)你是繼承UICollectionViewFlowLayout實現(xiàn)自定義時想要時刻刷新布局，還需要實現(xiàn)shouldInvalidateLayoutForBoundsChange：方法并返回YES，當(dāng)你繼承UICollectionViewLayout則不需要。
2、瀑布流
A、使用columnHeights數(shù)組（有多少列就有多少個元素）記錄cell每次更新布局后對應(yīng)列的高度
B、通過比較columnHeights數(shù)組中記錄的高度來獲取高度最小的那一列，然后計算cell的x值來確定cell的布局
C、實現(xiàn)collectionViewContentSize并返回columnHeights數(shù)組中記錄的最大值（此處不實現(xiàn)則不能滾動）
三、下面上代碼（只講實現(xiàn)思路，不講封裝故.h文件無提供任何屬性及接口，此處忽略）
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;
}
// 重寫此方法重新定位最后滾動的位置
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
// 計算出最終顯示的矩形框
CGRect rect;
rect.origin.y = 0;
rect.origin.x = proposedContentOffset.x;
rect.size = self.collectionView.frame.size;
// 獲得super已經(jīng)計算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 計算collectionView最中心點的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中心相對屏幕左邊的距離
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 需要布局時刻變動需必須實現(xiàn)這個方法，UICollectionViewLayout則不需要
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
2、WaterFallsFlowLayout.m（瀑布流）
#import "WaterFallsFlowLayout.h"
// 默認列數(shù)
static const NSInteger WaterFallsColumnCount = 3;
// 默認列間距
static const NSInteger WaterFallsColumnMargin = 10;
// 默認行間距
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;
}
// 每個cell對應(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ù)項目自行處理
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;
}
// 需實現(xiàn)此防范并返回內(nèi)容高度collectionView才能滾動
- (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;
}
