iOS 瀑布流之栅格布局

实现的栅格布局效果示意图

需求示意图

确定需求

由上面的需求示意图可知模块的最小单位是正方形，边长是屏幕宽除去边距间隔后的四等份，而每个模块的样式有小正方形(1:1)、大正方形(2:2)、横长方形(2:1)、纵长方形(1:2)，动态的根据服务器下发模块样式绘制布局，可以横向滑动，限定为两行的高度。
注意：上面的示意宽高比是约等于，忽略了间距，计算的时候千万别忘了。

实现思路

/** 返回indexPath位置cell对应的布局属性*/ - (CGRect)itemFrameOfHorizontalGridWaterFlow:(NSIndexPath *)indexPath{ //collectionView的高度 CGFloat collectionH = self.collectionView.frame.size.height; //设置布局属性item的frame CGFloat h = [self.delegate waterFlowLayout:self sizeForItemAtIndexPath:indexPath].height; CGFloat w = [self.delegate waterFlowLayout:self sizeForItemAtIndexPath:indexPath].width; CGFloat x = 0; CGFloat y = 0; //找出宽度最短的那一行 NSInteger destRow = 0; CGFloat minRowWidth = [self.rowWidths[destRow] doubleValue]; for (NSInteger i = 1; i < self.rowWidths.count; i++) { //取出第i行 CGFloat rowWidth = [self.rowWidths[i] doubleValue]; if (minRowWidth > rowWidth) {
            minRowWidth = rowWidth;
            destRow = i;
        }
    }
    
    y = destRow == 0 ? self.edgeInsets.top : self.edgeInsets.top + h + self.rowMargin;
    
    x = [self.rowWidths[destRow] doubleValue] == self.edgeInsets.left ? self.edgeInsets.left : [self.rowWidths[destRow] doubleValue] + self.columnMargin; //更新最短那行的宽度 if (h >= collectionH - self.edgeInsets.bottom - self.edgeInsets.top) {
        x = [self.rowWidths[destRow] doubleValue] == self.edgeInsets.left ? self.edgeInsets.left : self.maxRowWidth + self.columnMargin; for (NSInteger i = 0; i < 2; i++) { self.rowWidths[i] = @(x + w);
        }
    }else{ self.rowWidths[destRow] = @(x + w);
    } //记录最大宽度 if (self.maxRowWidth < x + w) { self.maxRowWidth = x + w ;
    } return CGRectMake(x, y, w, h);
}

后台下发字段格式示意图

功能描述： WSLWaterFlowLayout  是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)、栅格布局瀑布流 4种样式的瀑布流布局。

0