代码地址如下:
http://www.demodashi.com/demo/12284.html

一、效果预览

功能描述: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 瀑布流封装

代码地址如下:
http://www.demodashi.com/demo/12284.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

iOS 瀑布流封装的更多相关文章

  1. iOS 瀑布流之栅格布局

    代码地址如下:http://www.demodashi.com/demo/14760.html 一 .效果预览 二.确定需求 由下面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后的 ...

  2. IOS 瀑布流UICollectionView实现

    IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和 ...

  3. 瀑布流封装(仿写UITableView)

    本篇文章将会仿照苹果系统提供的UITableView类,封装一个瀑布流效果的控件!!! 该控件和系统的UITableView是相同级别的 (继承自系统的UIScrollView) GitHub中Dem ...

  4. iOS瀑布流实现(Swift)

    这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及 ...

  5. IOS 瀑布流

    本篇博客应该算的上CollectionView的高级应用了,从iOS开发之窥探UICollectionViewController(一)到今天的(五),可谓是由浅入深的窥探了一下UICollectio ...

  6. iOS 瀑布流的Demo

    /** * 瀑布流Demo的主要代码,若想看完整的代码请到下面链接去下载 * * 链接: https://pan.baidu.com/s/1slByAHB 密码: r3q6 */ #import &l ...

  7. iOS 瀑布流的基本原理

    /** * 源代码链接 * 链接: https://pan.baidu.com/s/1nvLamEX 密码: kya5 */ #import <UIKit/UIKit.h> @interf ...

  8. ios 瀑布流的那些事情

    转载: 屎壳郎情调-成长日记 首先要知道:瀑布流的核心就是要获取到图片的长宽 网上的很多例子都是加载本地图片的 对于新手而言 改成加载网络图片的确是有点压力的  因为本地的图片 我们是很容易就能获取到 ...

  9. ios瀑布流

    http://blog.csdn.net/shenjx1225/article/details/9037631

随机推荐

  1. BZOJ2194 快速傅立叶之二 【fft】

    题目 请计算C[k]=sigma(a[i]*b[i-k]) 其中 k < = i < n ,并且有 n < = 10 ^ 5. a,b中的元素均为小于等于100的非负整数. 输入格式 ...

  2. oracle存储过程、声明变量、for循环

    oracle存储过程.声明变量.for循环  1.创建存储过程 create or replace procedure test(var_name_1 in type,var_name_2 out t ...

  3. import组件的时候报错

    去webpack.base.js配置 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.e ...

  4. nodeJS(2)深了解: nodeJS 项目架构详解(app.js + Express + Http)

    简略了解:nodeJS 深了解(1): Node.js + Express 构建网站预备知识 环境: 环境: win7 + nodeJS 版本(node): 新建 nodeJS 项目: 名称为: te ...

  5. 【CF1068D】Array Without Local Maximums(计数DP)

    题意: n<=1e5 思路:卡内存 dp[i][j][k]表示当前第i个数字为j,第i-1个数字与第i个之间大小关系为k的方案数(a[i-1]<a[i],=,>) 转移时使用前缀和和 ...

  6. a kind of async programming in c#, need to reference definition

    void Main() { Run d=new Run(RunHandler); IAsyncResult result= d.BeginInvoke(new AsyncCallback(CallBa ...

  7. NGINX配置获取CloudFlare 下的访客真实IP并记录到日志

    我用的是lnmp.org的环境 /usr/local/nginx/conf/nginx.conf 在 http { } 部分增加 map $HTTP_CF_CONNECTING_IP $clientR ...

  8. LeetCode OJ-- Pow(x, n) **@

    https://oj.leetcode.com/problems/powx-n/ 二分法 class Solution { public: double pow(double x, int n) { ...

  9. (6)python tkinter-容器、子窗体

    Frame f = tkinter.Frame(width=380, height=270, bg='white').pack() LabelFrame f = tkinter.LabelFrame( ...

  10. Graphs (Cakewalk) 1 B - medium

    Discription Bear Limak examines a social network. Its main functionality is that two members can bec ...