最近需求中需要對首頁進行改版，插入瀑布流效果，但是我的首頁是collectionView創建的，里面布局太多了，不好修改，以前遇到這樣的需求，當時直接想的不同的second設置不同的layout ，但是感覺太復雜了，對我來說有點難度，后面想到把上面的那部分全部設置為表頭，只留一個瀑布流的layout實現，但是對于我們項目來說，這樣寫改動太大了，我還怕改出問題，所以就有了以下方式，先看下具體效果：
gif.gif
實現思路
- 瀑布流的那個效果單獨做一個自定義的cell，里面設置瀑布流效果
- 難度就是計算高度的問題，這個cell的高度需要去計算，每次獲取新數據的時候，都把所有數據遍歷算一遍當前數據所瀑布流布局得到的高度
- 計算高度的時候要知道，因為我的是兩列，所以 我把數組兩個兩個變成一個組合 組成大數組，然后遍歷，計算左邊高度 和 右邊高度，相比較，哪邊矮就先把數據布局到矮的那邊，這樣就可以得到最終的左右兩邊高度，當然記得加上行間距，然后再取一下左右高度最大值得到整個瀑布流的高度。
實現代碼
//為什么要加號方法，因為我的cell高度計算是通過cell加號方法根據數據計算的，所以下面用的都是加號方法,
// 拆分數組變成2個2個一組
+ (NSArray *)splitArray:(NSArray *)originalArray withSubSize:(NSInteger)subSize
{
NSInteger count = originalArray.count % subSize == 0 ? (originalArray.count / subSize) : (originalArray.count / subSize + 1);
NSMutableArray *newArray = [[NSMutableArray alloc] init];
for (NSInteger i = 0; i < count; i ++) {
NSInteger j = i * subSize;
NSMutableArray *tempArray = [[NSMutableArray alloc] init];
while (j < subSize*(i + 1) && j < originalArray.count) {
[tempArray addObject:[originalArray objectAtIndex:j]];
j += 1;
}
[newArray addObject:[tempArray copy]];
}
return [newArray copy];
}
+(CGFloat)caculateEndHeight:(OSFlowVideoModel *)model
{
CGFloat height = 0.0;
//左邊的高度
CGFloat leftHeight = 0.0;
//右邊的高度
CGFloat rightHeight = 0.0;
//最終高度
CGFloat contentHeight = 0.0;
//數組兩個兩個組成數據
NSArray *array = [self splitArray:model.list withSubSize:2];
for (int i = 0; i<array.count; i++) {
NSArray *arr = array[i];
for (int j = 0; j<2; j++) {
OSFlowVideoItemModel *a = arr[j];
if (leftHeight > rightHeight) {
rightHeight = rightHeight + [self caculateContentHeight:a] + PtOnIPhone6(7);
}else{
leftHeight = leftHeight + [self caculateContentHeight:a] + PtOnIPhone6(7);
}
}
}
contentHeight = MAX(leftHeight, rightHeight);
//多加了一個間距
height -= PtOnIPhone6(7);
height += contentHeight;
return height;
}
//計算每個item內容高度
+(CGFloat)caculateContentHeight:(OSFlowVideoItemModel *)item
{
CGFloat itemWidth = (OSScreenWidth - PtOnIPhone6(32) - PtOnIPhone6(7))/2;
CGFloat height = 0.0;
CGFloat titleH = [OSUtiltity getHeightWithText:item.title width:itemWidth - PtOnIPhone6(12) fontSize:RegularSysFont(14) withLimitHeight:PtOnIPhone6(40)];
CGFloat imageHeight = 0.0;
if (item.width.floatValue > item.height.floatValue) {
imageHeight = itemWidth*3/4;
}else if (item.width.floatValue < item.height.floatValue){
imageHeight = itemWidth*4/3;
}else{
imageHeight = itemWidth;
}
height = titleH + imageHeight + PtOnIPhone6(16) + PtOnIPhone6(11) + PtOnIPhone6(20) + PtOnIPhone6(16);
return height;
}
//計算的是cell高度，根據自身的情況來
+ (CGFloat)heightWithItems:(NSArray<OSStyleBaseItem *> *)items indexPath:(NSIndexPath *)indexPath width:(CGFloat)width
{
OSFlowVideoModel *model = (OSFlowVideoModel *)items[indexPath.row];
return [self caculateEndHeight:model];
}
瀑布流的collectionViewlayout
- h文件
@class EWWaterFallLayout;
@protocol EWWaterFallLayoutDataSource<NSObject>
@required
/**
* 每個item的高度
*/
- (CGFloat)waterFallLayout:(EWWaterFallLayout *)waterFallLayout heightForItemAtIndexPath:(NSUInteger)indexPath itemWidth:(CGFloat)itemWidth;
@optional
/**
* 有多少列
*/
- (NSUInteger)columnCountInWaterFallLayout:(EWWaterFallLayout *)waterFallLayout;
/**
* 每列之間的間距
*/
- (CGFloat)columnMarginInWaterFallLayout:(EWWaterFallLayout *)waterFallLayout;
/**
* 每行之間的間距
*/
- (CGFloat)rowMarginInWaterFallLayout:(EWWaterFallLayout *)waterFallLayout;
/**
* 每個item的內邊距
*/
- (UIEdgeInsets)edgeInsetsInWaterFallLayout:(EWWaterFallLayout *)waterFallLayout;
@end
@interface EWWaterFallLayout : UICollectionViewLayout
/**
* 代理
*/
@property (nonatomic, weak) id<EWWaterFallLayoutDataSource> delegate;
@end
-m文件
/** 默認的列數 */
static const CGFloat EWDefaultColumnCount = 2;
/** 每一列之間的間距 */
static const CGFloat EWDefaultColumnMargin = 7;
/** 每一行之間的間距 **/
static const CGFloat EWDefaultFRowMargin = 7;
/** 內邊距 */
static const UIEdgeInsets EWDefaultEdgeInsets = {0,0,0,0};
@interface EWWaterFallLayout()
/** 存放所有的布局屬性 */
@property (nonatomic, strong) NSMutableArray *attrsArr;
/** 存放所有列的當前高度 */
@property (nonatomic, strong) NSMutableArray *columnHeights;
/** 內容的高度 */
@property (nonatomic, assign) CGFloat contentHeight;
- (NSUInteger)columnCount;
- (CGFloat)columnMargin;
- (CGFloat)rowMargin;
- (UIEdgeInsets)edgeInsets;
@end
@implementation EWWaterFallLayout
- (NSMutableArray *)attrsArr {
if (!_attrsArr) {
_attrsArr = [NSMutableArray array];
}
return _attrsArr;
}
- (NSMutableArray *)columnHeights {
if (!_columnHeights) {
_columnHeights = [NSMutableArray array];
}
return _columnHeights;
}
#pragma mark 數據處理
/**
* 列數
*/
- (NSUInteger)columnCount {
if ([self.delegate respondsToSelector:@selector(columnCountInWaterFallLayout:)]) {
return [self.delegate columnCountInWaterFallLayout:self];
} else {
return EWDefaultColumnCount;
}
}
/**
* 列間距
*/
- (CGFloat)columnMargin {
if ([self.delegate respondsToSelector:@selector(columnMarginInWaterFallLayout:)]) {
return [self.delegate columnMarginInWaterFallLayout:self];
} else {
return EWDefaultColumnMargin;
}
}
/**
* 行間距
*/
- (CGFloat)rowMargin {
if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFallLayout:)]) {
return [self.delegate rowMarginInWaterFallLayout:self];
} else {
return EWDefaultFRowMargin;
}
}
/**
* item的內邊距
*/
- (UIEdgeInsets)edgeInsets {
if ([self.delegate respondsToSelector:@selector(edgeInsetsInWaterFallLayout:)]) {
return [self.delegate edgeInsetsInWaterFallLayout:self];
} else {
return EWDefaultEdgeInsets;
}
}
/**
* 初始化
*/
- (void)prepareLayout {
[super prepareLayout];
self.contentHeight = 0;
//清除之前計算的所有高度
[self.columnHeights removeAllObjects];
//設置每一列默認的高度
for (NSInteger i = 0; i < self.columnCount; i++) {
[self.columnHeights addObject:@(EWDefaultEdgeInsets.top)];
}
//清除之前所有的布局屬性
[self.attrsArr removeAllObjects];
//開始創建每一個cell對應的布局屬性
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i < count; i++) {
//創建位置
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
//獲取indexPath位置上cell對應的布局屬性
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attrsArr addObject:attrs];
}
}
/**
* 返回indexPath位置cell對應的布局屬性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
//創建布局屬性
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//collectionView的寬度
CGFloat collectionViewW = self.collectionView.frame.size.width;
//設置布局屬性的frame
CGFloat cellW = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right - (self.columnCount - 1) * self.columnMargin) / self.columnCount;
CGFloat cellH = [self.delegate waterFallLayout:self heightForItemAtIndexPath:indexPath.item itemWidth:cellW];
//找出最短的那一列
NSInteger destColumn = 0;
CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
for (int i = 0; i < self.columnCount; i++) {
//取得第i列的高度
CGFloat columnHeight = [self.columnHeights[i] doubleValue];
if (minColumnHeight > columnHeight) {
minColumnHeight = columnHeight;
destColumn = i;
}
}
CGFloat cellX = self.edgeInsets.left + destColumn * (cellW + self.columnMargin);
CGFloat cellY = minColumnHeight;
if (cellY != self.edgeInsets.top) {
cellY += self.rowMargin;
}
attrs.frame = CGRectMake(cellX, cellY, cellW, cellH);
//更新最短那一列的高度
self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
//記錄內容的高度 - 即最長那一列的高度
CGFloat maxColumnHeight = [self.columnHeights[destColumn] doubleValue];
if (self.contentHeight < maxColumnHeight) {
self.contentHeight = maxColumnHeight;
}
return attrs;
}
/**
* 決定cell的布局屬性
*/
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return self.attrsArr;
}
/**
* 內容的高度
*/
- (CGSize)collectionViewContentSize {
return CGSizeMake(0, self.contentHeight + self.edgeInsets.bottom);
}
@end
總結
難點主要在高度的計算那塊，不要算錯了，道理都一樣，就和collectionViewlayout里面計算高度一樣。
========2022.1.15更新==========
上面那種寫法會存在這個問題：每次快速上拉獲取新數據會導致內存增加，CPU會閃增，再降低，視圖顯示效果不好
優化
- 自定義UICollectionViewlayout 分區layout
具體實現，有時間寫一個demo
