引言:
瀑布流效果是商品展示效果中一个较难实现的样式, 接下来我们介绍一个支持垂直, 水平, 浮动效果的瀑布流, ZZLayout(包含在ZZTools中, github传送门).
效果展示
i垂直瀑布流
浮动瀑布流
水平瀑布流
功能简介
1.垂直瀑布流, 在对应的协议方法中传入列数(默认为3), 以及item的高即可实现.(宽度相同, 自适应)
2.水平瀑布流, 在对应的协议方法中传入列数(默认为3), 以及item的宽即可实现,(高度相同, 自适应)
3.浮动瀑布流, 类似淘宝SKU选择页面中的等间距, 不等宽, 自动换行的效果, 在对应的协议方法传入item的宽即可实现,(高度相同, 自适应)
4.支持区头, 区尾部, 并且支持UITableView的headerView效果, 支持各种间距, 如每个分区的内边距等.
5.支持cocoapods集成, 请使用: pod 'ZZTools'
用法简介
1.垂直瀑布流的使用方法, 具体请查看点击github传送门查看demo, 另外星星评价哦.
//根据枚举初始化layou, 确定你想要的浮动效果, 传入你的collectionView即可
ZZLayout *layout = [[ZZLayout alloc] initWith:ZZLayoutFlowTypeVertical delegate:self];
2.协议方法
//ZZLyout的流协议方法
- (CGFloat)layout:(ZZLayout *)collectionViewLayout heightForRowAtIndexPath:(NSIndexPath *)indexPath {//返回item的高
return rand() % 100 + 60;
}
- (NSInteger)layout:(ZZLayout *)collectionViewLayout columnNumberAtSection:(NSInteger)section {//每个区有几列
return section;//默认值为3, 第0个区传入0时其实是使用了默认值.
}
3.头文件简介
协议方法
@class ZZLayout;
@protocol ZZLayoutDelegate <NSObject>
@optional
/**cell的宽(垂直瀑布流时此协议方法无效, 根据columnNumber和各种间距自适应)*/
- (CGFloat)layout:(ZZLayout *)collectionViewLayout widthForRowAtIndexPath:(NSIndexPath *)indexPath;
/**cell的高(水平瀑布流是此协议方法无效, 根据columnNumber和各种间距自适应)*/
- (CGFloat)layout:(ZZLayout *)collectionViewLayout heightForRowAtIndexPath:(NSIndexPath *)indexPath;
/**每个区多少列(浮动瀑布流时时此协议方法无效)*/
- (NSInteger)layout:(ZZLayout *)collectionViewLayout columnNumberAtSection:(NSInteger )section;
/**每个区的边距(上左下右)*/
- (UIEdgeInsets)layout:(ZZLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
/**每个item行间距(如果为水平方向瀑布流, 这里则是左右间距)*/
- (NSInteger)layout:(ZZLayout *)collectionViewLayout lineSpacingForSectionAtIndex:(NSInteger)section;
/**每个item列间距(如果是水平方向瀑布流, 这里则是上下间距)*/
- (CGFloat)layout:(ZZLayout*)collectionViewLayout interitemSpacingForSectionAtIndex:(NSInteger)section;
/**header的size*/
- (CGSize)layout:(ZZLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
/**footer的size*/
- (CGSize)layout:(ZZLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;
/**本区区头和上个区区尾的间距*/
- (CGFloat)layout:(ZZLayout*)collectionViewLayout spacingWithLastSectionForSectionAtIndex:(NSInteger)section;
@end
初始化
/**自定义初始化方法, 建议使用*/
- (instancetype)initWith:(ZZLayoutFlowType)flowType delegate:(id<ZZLayoutDelegate>)delegate;
/**传入回调的代理, 建议通过自定义协议方法传入*/
@property (nonatomic , weak) id<ZZLayoutDelegate> delegate;
/**layout的类型, 暂不支持横向*/
@property (nonatomic , assign) ZZLayoutFlowType scrollDirection;
关于我们:
好用的话, 记得留下你的小星星哦.
欢迎吐槽, qq邮箱: 1156858877@qq.com
网友评论