代码地址以下:<br>http://www.demodashi.com/demo/12284.htmlhtml
###1、效果预览 布局
功能描述:WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。atom
/** 初始化 生成每一个视图的布局信息*/ -(void)prepareLayout; /** 决定一段区域全部cell和头尾视图的布局属性*/ -(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect ; /** 返回indexPath位置cell对应的布局属性*/ -(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath; /** 返回indexPath位置头和脚视图对应的布局属性*/ - (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath; //返回内容高度 -(CGSize)collectionViewContentSize;
###3、 用法:注意遵循WSLWaterFlowLayoutDelegate协议,代理方法和TableView、collectionView的代理方法用法类似。 下面是WSLWaterFlowLayout.h中的属性方法和代理方法,含义注释的还算清晰:spa
typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布流 item等宽不等高 */ WSLHorizontalWaterFlow = 1, /** 水平瀑布流 item等高不等宽 不支持头脚视图*/ WSLVHWaterFlow = 2, /** 竖向瀑布流 item等高不等宽 */ WSLLineWaterFlow = 3 /** 线性布局 待完成,敬请期待 */ } WSLFlowLayoutStyle;//样式 @class WSLWaterFlowLayout; @protocol WSLWaterFlowLayoutDelegate <NSObject> /** 竖向瀑布流 item等宽不等高 */ -(CGFloat)waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout heightForItemAtIndexPath:(NSIndexPath *)indexPath itemWidth:(CGFloat)itemWidth; /** 水平瀑布流 item等高不等宽 */ -(CGFloat)waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout widthForItemAtIndexPath:(NSIndexPath *)indexPath itemHeight:(CGFloat)itemHeight; /** 竖向瀑布流 item等高不等宽 列数、行数无用 */ - (CGSize)waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath; /** 头视图Size */ -(CGSize )waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout sizeForHeaderViewInSection:(NSInteger)section; /** 脚视图Size */ -(CGSize )waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout sizeForFooterViewInSection:(NSInteger)section; @optional //如下都有默认值 /** 列数*/ -(CGFloat)columnCountInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout; /** 行数*/ -(CGFloat)rowCountInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout; /** 列间距*/ -(CGFloat)columnMarginInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout; /** 行间距*/ -(CGFloat)rowMarginInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout; /** 边缘之间的间距*/ -(UIEdgeInsets)edgeInsetInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout; @end @interface WSLWaterFlowLayout : UICollectionViewLayout /** delegate*/ @property (nonatomic, weak) id<WSLWaterFlowLayoutDelegate> delegate; /** 瀑布流样式*/ @property (nonatomic, assign) WSLFlowLayoutStyle flowLayoutStyle; @end
初始化仅三行代码,只需设置代理和样式,item的大小、头脚视图的大小、行列数以及间距均可以在对应样式的代理方法中自定义,而后设置为UICollectionView的自动流水布局样式,并结合UICollectionView的用法使用,详情看示例:代理
WSLWaterFlowLayout * _flow = [[WSLWaterFlowLayout alloc] init]; _flow.delegate = self; _flow.flowLayoutStyle = WSLVerticalWaterFlow;
###4、项目结构: code
iOS 瀑布流封装htm
代码地址以下:<br>http://www.demodashi.com/demo/12284.htmlblog
注:本文著做权归做者,由demo大师代发,拒绝转载,转载须要做者受权继承