iOS 瀑布流封装
一、效果预览

功能描述:WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。
- 前言 :近几个月一直在忙公司的ChinaDaily和国务院项目,没有抽出时间来写,现在终于算是告一段落了,抽出时间来更一篇
二、实现:主要是重写父类的几个涉及布局属性的方法,在对应的布局属性方法中根据需求自定义视图布局属性信息。详情看示例
/** 初始化 生成每个视图的布局信息*/
-(void)prepareLayout;
/** 决定一段区域所有cell和头尾视图的布局属性*/
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect ;
/** 返回indexPath位置cell对应的布局属性*/
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
/** 返回indexPath位置头和脚视图对应的布局属性*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
//返回内容高度
-(CGSize)collectionViewContentSize;
三、 用法:注意遵循WSLWaterFlowLayoutDelegate协议,代理方法和TableView、collectionView的代理方法用法相似。
下面是WSLWaterFlowLayout.h中的属性方法和代理方法,含义注释的还算清晰:
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;
四、项目结构:

iOS 瀑布流封装
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
iOS 瀑布流封装的更多相关文章
- iOS 瀑布流之栅格布局
代码地址如下:http://www.demodashi.com/demo/14760.html 一 .效果预览 二.确定需求 由下面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后的 ...
- IOS 瀑布流UICollectionView实现
IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和 ...
- 瀑布流封装(仿写UITableView)
本篇文章将会仿照苹果系统提供的UITableView类,封装一个瀑布流效果的控件!!! 该控件和系统的UITableView是相同级别的 (继承自系统的UIScrollView) GitHub中Dem ...
- iOS瀑布流实现(Swift)
这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及 ...
- IOS 瀑布流
本篇博客应该算的上CollectionView的高级应用了,从iOS开发之窥探UICollectionViewController(一)到今天的(五),可谓是由浅入深的窥探了一下UICollectio ...
- iOS 瀑布流的Demo
/** * 瀑布流Demo的主要代码,若想看完整的代码请到下面链接去下载 * * 链接: https://pan.baidu.com/s/1slByAHB 密码: r3q6 */ #import &l ...
- iOS 瀑布流的基本原理
/** * 源代码链接 * 链接: https://pan.baidu.com/s/1nvLamEX 密码: kya5 */ #import <UIKit/UIKit.h> @interf ...
- ios 瀑布流的那些事情
转载: 屎壳郎情调-成长日记 首先要知道:瀑布流的核心就是要获取到图片的长宽 网上的很多例子都是加载本地图片的 对于新手而言 改成加载网络图片的确是有点压力的 因为本地的图片 我们是很容易就能获取到 ...
- ios瀑布流
http://blog.csdn.net/shenjx1225/article/details/9037631
随机推荐
- Python爬虫教程-21-xpath
本篇简单介绍 xpath 在python爬虫方面的使用,想要具体学习 xpath 可以到 w3school 查看 xpath 文档 Python爬虫教程-21-xpath 什么是 XPath? XPa ...
- [python]做一个简单爬虫
为什么选择python,它强大的库可以让你专注在爬虫这一件事上而不是更底层的更繁杂的事 爬虫说简单很简单,说麻烦也很麻烦,完全取决于你的需求是什么以及你爬的网站所决定的,遇到的第一个简单的例子是pas ...
- val
val 题目描述 有一个值初始为0,接下来n次你可以令其在之前基础上+2或+1或-1.你需要保证,这个值在整个过程中达到的最大值减去达到的最小值不大于k,求方案数,模1,000,000,007. 输入 ...
- 基于深度摄像头的障碍物检测(realsense+opencv)
前几天老大给了个任务,让我帮slam组写一个基于深度摄像头的障碍物检测,捣鼓了两天弄出来了,效果还不错,就在这里记一下了. 代码的核心思路是首先通过二值化,将一米之外的安全距离置零不考虑,然后通过开运 ...
- bzoj4292 PA2015 Równanie 枚举
貌似应该是找出n后,带回去看看是不是对的. #include<cstdio> #include<cstring> #include<algorithm> #incl ...
- Python matplotlib 柱状图
matplotlib是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中.它的文档相当完备,并且 ...
- POJ1195Mobile phones
二维树状数组板子题. #include<cstdio> #include<cstring> #include<iostream> #include<cstdl ...
- MySQL命令行导入脚本文件
通过命令行执行sql脚本文件的方法: cmd命令行下: C:\users\test_dir>"C:\Program Files\MySQL\MySQL Server 5.7\bin\m ...
- poj 2100(尺取法)
Graveyard Design Time Limit: 10000MS Memory Limit: 64000K Total Submissions: 6107 Accepted: 1444 ...
- .NET下XML文件的读写
一.前言: XML是微软.Net战略的一个重要组成部分,而且它可谓是XML Web服务的基石,所以掌握.Net框架下的XML技术自然显得非常重要了.本文将指导大家如何运用C#语言完成.Net框架下的X ...