• Stars
    star
    1,160
  • Rank 40,222 (Top 0.8 %)
  • Language
    Objective-C
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

为应对类似淘宝首页,京东首页,国美首页等复杂布局而写的Collectionview。基于UICollectionView实现,目前支持标签布局,列布局,百分比布局,定位布局,填充式布局,瀑布流布局等。支持纵向布局和横向布局,可以根据不同的section设置不同的布局,支持拖动cell,头部悬浮,设置section背景色和自定义section背景view,向自定义背景view传递自定义方法。功能强大,超过Android的recyclerview,实现了电影选座等高难度的布局。

ZLCollectionView

为应对类似淘宝首页,京东首页,国美首页等复杂布局而写的ZLCollectionview。基于UICollectionView实现,目前支持标签布局,列布局,百分比布局,定位布局,填充式布局,瀑布流布局等。支持纵向布局和横向布局,可以根据不同的section设置不同的布局,支持拖动cell,头部悬浮,设置section背景色和自定义section背景view,向自定义背景view传递自定义方法。实现了电影选座等高难度的布局。
特别感谢donggelaile贡献了降低cpu占用率的代码

gif效果图

导入

支持cocoapod导入,最新版本 1.4.9

pod 'ZLCollectionViewFlowLayout' 

推荐项目

使用uitableview或者uicollectionview的朋友可以使用我的另外一个库 ZLCellDataSource
至少可以少写1/3的代码量,在开发界面可以快速帮你构建uitableview和uicollectionview
觉得好用的朋友可以去点个star

注意事项:

版本1.0开始加入了横向布局,有升级到1.0的,原来的类ZLCollectionViewFlowLayout提示找不到,请更换成ZLCollectionViewVerticalLayout即可,其余不变。如果不想升级可用 pod 'ZLCollectionViewFlowLayout','0.8.7.1'


  • ZLCollectionViewVerticalLayout ==== 纵向布局
  • ZLCollectionViewHorzontalLayout ==== 横向布局(暂时先做了标签页布局和瀑布流,其余的后续增加)

如果遇到以下错误, Unable to find a specification for ZLCollectionViewFlowLayout 请使用pod update命令来安装。

参数列表

可配置参数 类型 作用
isFloor BOOL 宽度是否向下取整,默认为YES,该参数一般不用改
canDrag BOOL 是否允许拖动cell,默认为NO
header_suspension BOOL 头部是否悬浮,默认为NO
layoutType ZLLayoutType 设置布局类型,适用于只有单一布局可省去写代理的代码
columnCount columnCount 在列布局中设置列数,适用于单一布局可省去写代理的代码
fixTop CGFloat header距离顶部的距离
columnSortType ZLColumnSortType 瀑布流列排序方式,按最小高度或者按顺序

布局名称 布局类型 作用
LabelLayout 标签页布局
ColumnLayout 列布局 瀑布流,单行布局,等分布局
PercentLayout 百分比布局
FillLayout 填充式布局
AbsoluteLayout 绝对定位布局

代理方法 作用 备注
- (ZLLayoutType)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout *)collectionViewLayout typeOfLayout:(NSInteger)section; 指定是什么布局 如没有指定则为FillLayout(填充式布局)
- (UIColor*)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout *)collectionViewLayout backColorForSection:(NSInteger)section; 设置每个section的背景色
- (UIImage*)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout *)collectionViewLayout backImageForSection:(NSInteger)section; 设置每个section的背景图
- (NSString*)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout *)collectionViewLayout registerBackView:(NSInteger)section; 自定义每个section的背景view,
- (ZLBaseEventModel*)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout *)collectionViewLayout backgroundViewMethodForSection:(NSInteger)section; 向每个section自定义背景view传递自定义方法 需要传递的自定义view必须继承ZLCollectionBaseDecorationView类,传递的ZLBaseEventModel对象,eventName:方法名(注意带参数的方法名必须末尾加:),parameter:参数
- (BOOL)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout *)collectionViewLayout attachToBottom:(NSInteger)section; 背景是否延伸覆盖到footerView 默认为NO
- (BOOL)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout *)collectionViewLayout attachToTop:(NSInteger)section; 背景是否延伸覆盖到headerView 默认为NO
- (NSInteger)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout )collectionViewLayout zIndexOfItem:(NSIndexPath)indexPath; 设置每个item的zIndex 默认为0
- (CATransform3D)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout )collectionViewLayout transformOfItem:(NSIndexPath)indexPath; 设置每个item的CATransform3D 默认为CATransform3DIdentity
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout )collectionViewLayout alphaOfItem:(NSIndexPath)indexPath; 设置每个item的alpha 默认为1
- (NSInteger)collectionView:(UICollectionView )collectionView layout:(UICollectionViewFlowLayout)collectionViewLayout columnCountOfSection:(NSInteger)section; 列布局中指定一行有几列 列布局需要的代理,默认为1
- (CGFloat)collectionView:(UICollectionView )collectionView layout:(UICollectionViewFlowLayout)collectionViewLayout percentOfRow:(NSIndexPath*)indexPath; 百分比布局中指定每个item占该行的几分之几 PercentLayout百分比布局需要的代理,如3.0/4,注意为大于0小于等于1的数字。不指定默认为1
- (CGRect)collectionView:(UICollectionView )collectionView layout:(UICollectionViewFlowLayout)collectionViewLayout rectOfItem:(NSIndexPath*)indexPath; 绝对定位布局中指定每个item的frame 绝对定位布局必须实现的代理。不指定默认为CGRectZero
- (void)collectionView:(UICollectionView )collectionView layout:(UICollectionViewFlowLayout)collectionViewLayout didMoveCell:(NSIndexPath*)atIndexPath toIndexPath:(NSIndexPath*)toIndexPath; 拖动cell的相关代理

用法

//在UICollectionView创建之前加入ZLCollectionViewFlowLayout

- (UICollectionView*)collectionViewLabel {
    if (!_collectionViewLabel) {
        ZLCollectionViewFlowLayout *flowLayout = [[ZLCollectionViewFlowLayout alloc] init];
        flowLayout.delegate = self;
        
        _collectionViewLabel = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
        _collectionViewLabel.dataSource = self;
        _collectionViewLabel.delegate = self;
        _collectionViewLabel.backgroundColor = [UIColor whiteColor];
        [_collectionViewLabel registerClass:[SEMyRecordLabelCell class] forCellWithReuseIdentifier:[SEMyRecordLabelCell cellIdentifier]];
        [_collectionViewLabel registerClass:[SEMyRecordHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:[SEMyRecordHeaderView headerViewIdentifier]];
    }
    return _collectionViewLabel;
}

//实现代理,如果不实现也可以自己直接设置self.sectionInset,self.minimumLineSpacing,self.minimumInteritemSpacing。但是这种设置不支持不同section不同数值

//指定section用的样式。LabelLayout是标签样式,ClosedLayout用于tableviewcell或者瀑布流,九宫格之类的。
- (ZLLayoutType)collectionView:(UICollectionView *)collectionView layout:(ZLCollectionViewFlowLayout *)collectionViewLayout typeOfLayout:(NSInteger)section {
    switch (section) {
        case 0:
            return LabelLayout;
        case 1:
        case 2:
            return FillLayout;
        case 3:
        case 4:
            return AbsoluteLayout;
        case 5:
        case 6:
            return PercentLayout;
        default:
            return ClosedLayout;
    }
}

//如果是ClosedLayout样式的section,必须实现该代理,指定列数
- (NSInteger)collectionView:(UICollectionView *)collectionView layout:(ZLCollectionViewFlowLayout*)collectionViewLayout columnCountOfSection:(NSInteger)section {
    switch (section) {
        case 7:
            return 4;
        case 8:
            return 2;
        case 9:
            return 1;
        default:
            return 0;
    }
}
//如果是百分比布局必须实现该代理,设置每个item的百分比,如果没实现默认比例为1
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(ZLCollectionViewFlowLayout*)collectionViewLayout percentOfRow:(NSIndexPath*)indexPath; {
    switch (indexPath.section) {
        case 5: {
            switch (indexPath.item) {
                case 0:
                    return 1.0/3;
                case 1:
                    return 2.0/3;
                case 2:
                    return 1.0/3;
                case 3:
                    return 1.0/3;
                case 4:
                    return 1.0/3;
                case 5:
                    return 1.0/4;
                case 6:
                    return 1.0/4;
                case 7:
                    return 1.0/2;
                case 8:
                    return 3.0/5;
                case 9:
                    return 2.0/5;
                default:
                    break;
            }
        }
        case 6: {
            if (indexPath.item % 2==0) {
                return 3.0/4;
            } else {
                return 1.0/4;
            }
        }
        default:
            return 1;
    }
}
//如果是绝对定位布局必须是否该代理,设置每个item的frame
- (CGRect)collectionView:(UICollectionView *)collectionView layout:(ZLCollectionViewFlowLayout*)collectionViewLayout rectOfItem:(NSIndexPath*)indexPath {
    switch (indexPath.section) {
        case 3: {
            CGFloat width = (collectionView.frame.size.width-200)/2;
            CGFloat height = width;
            switch (indexPath.item) {
                case 0:
                    return CGRectMake(0, 0, width, height);
                case 1:
                    return CGRectMake(width, 0, width, height);
                case 2:
                    return CGRectMake(0, height, width, height);
                case 3:
                    return CGRectMake(width, height, width, height);
                case 4:
                    return CGRectMake(width/2, height/2, width, height);
                default:
                    return CGRectZero;
            }
        }
            break;
        case 4: {
            switch (indexPath.item) {
                case 0:
                    return CGRectMake((collectionView.frame.size.width-20)/2-100, 0, 200, 30);
                default: {
                    NSInteger column = (collectionView.frame.size.width-20)/30;
                    return CGRectMake(((indexPath.item-1)%column)*30, 100+((indexPath.item-1)/column)*30, 20, 20);
                }
                    
            }
        }
            break;
        default:
            return CGRectZero;
    }
    return CGRectZero;
}

更新

v1.4.9 (2022.03.29)
  • 增加瀑布流排列方式的字段
v1.4.0 (2020.04.18)
  • 自定义背景view的代理方法增加
v1.3.1 (2020.04.14)
  • 修改填充式布局的bug
v1.3.0 (2020.03.25)
  • 增加头部偏移量设置
v1.2.0 (2019.12.25)
  • 降低cpu的占用率
v1.1.6 (2019.10.1)
  • 修复bug
v1.1.0 (2019.5.13)
  • 横向布局增加绝对定位布局
v1.0.3 (2019.5.7)
  • 修改适配swift
v1.0.2 (2019.2.20)
  • 拆分成横向布局和纵向布局两个类,使用方法和类名有所改变
v0.8.6 (2019.1.11)
  • 降低了头部不悬浮情况下的cpu占用率
v0.8.2 (2018.9.26)
  • 去掉基础布局
  • 提取代理出来
  • 增加高度向下取整
v0.7.0 (2018.8.6)
  • 增加头部可以悬浮的设置
v0.6.2 (2018.7.26)
  • 增加拖动cell和高度自适应的测试。高度自适应需要用到第三方库
v0.5.3 (2018.7.12)
  • 增加自定义section背景图
v0.5 (2018.7.10)
  • 增加了可以设置每个section的背景色
v0.4.1 (2018.7.8)
  • 修改了一些bug
v0.3.0 (2018.3.1)
  • 新增加了绝对定位布局,自己定义每个item的位置,可以做层叠布局,电影选座布局等等,详细操作请见demo
v0.2.0 (2018.2.27)
  • 新增加了填充式布局,详细操作请见demo
v0.1.1 (2018.2.26)
  • 修复百分比布局的若干bug
v0.1.0 (2018.1.29)
  • 新增加了百分比布局,详细操作请见demo

More Repositories

1

football_frontend

一个自己写的足球比赛预测代码,通过大数据匹配亚盘历史相同赔率相同水位的比赛,来得出赢盘或者输盘的结果。目前持续测试中。
HTML
106
star
2

Pyramid

opengl es绘制金字塔,通过shader文件进行索引绘制以及模型矩阵的变换,让金字塔绕x轴,y轴,z轴旋转。注释详细,可作为opengl es入门参考案例。
Objective-C
55
star
3

ZLCellDataSource

mvvm,mvp的应用。为viewcontroller瘦身,把tableview和collectionview的datasource提取出来,可节省1/3的代码量。
Objective-C
54
star
4

uniapp-demo

uniapp各种开发实战,包含基本布局,动画,组件(时间轴,轮播,聊天,tabbar,导航等),微动画,抽屉,侧滑,唤醒原生app,数据库操作等等。
Vue
49
star
5

VoiceChange-Andorid

Android studio 3.1.4使用fmod库实现变声技巧
Java
26
star
6

wechat-components

自己写的一些微信小程序的自定义组件,目前完成圆环进度条,手写签名版功能,雷达图,能力值图,刻度表,转盘,底部弹框组件
JavaScript
22
star
7

BaiduNetdisk_golang

采用golang从0开始打造百度网盘服务端,包含文件上传下载,不同用户文件隔离,文件的秒传,断点续传,分块上传,离线下载,分布式云存储。
Go
16
star
8

richman

c++写的大富翁游戏,适合入门初学者。编译工具visual studio 2017
C++
16
star
9

Literature-python3

我写的电子书网站。前端采用vue3+vant-ui开发,后端采用python3。9+flask开发,后台管理系统采用vue3+elementui-plus开发
TypeScript
16
star
10

MVVMTest-Android

一步一步教你实现安卓下mvvm架构,双向数据绑定。
Java
15
star
11

LiveStreaming-iOS

不使用任何第三方库,分多个demo带着你一步一步从底层开始实现自己的iOS直播框架。包括音视频采集,美颜,硬编码,软编码,推流,拉流。(未完待续)
Objective-C
12
star
12

Lottery-go

做高并发的抽奖系统后台
Go
11
star
13

android_app_update

一步一步教你从0开始实现安卓增量更新,包括前端和后台的全部教程。
C
11
star
14

vue-prerender-demo

vue 预渲染教程,如何优化SEO
JavaScript
9
star
15

pebble

mac设备如何通过编程通过usb数据线与hid设备通讯,以及如何通过串口通讯。
Objective-C
9
star
16

football_analysis

开源一个自己写的竞彩足彩预测代码,通过大数据匹配亚盘历史相同赔率相同水位的比赛,来得出赢盘或者输盘的结果。目前持续测试中。
Python
8
star
17

Landlords

c++写的斗地主,适合初学者,采用visual studio 2017编译
C++
7
star
18

ZLCategory

IOSUtils,整合一些ios常用的category类
Objective-C
7
star
19

zuozhu

开源了一个我写的无限滚动gridview。
Objective-C
6
star
20

Array-

mac 应用程序开发。应用图表操作,类似excel
Objective-C
6
star
21

ZLPolygonView-IOS

类似六芒星的能力值控件,可自由变换点数。
Objective-C
6
star
22

KeepAlive-Android

app进程包活的几种实现方式
Java
6
star
23

dx_test

利用direct3d实现3d场景载入,人体骨骼动画,智能摄像头,阳光,蝴蝶,花草。 采用最新vs2017编译。
C++
6
star
24

ZLImageTextButton

支持autolayout的图上文下,图左文右,图下文上,图右文左的按钮。
Objective-C
5
star
25

tanchishe

微信小程序练手---贪吃蛇游戏的实现
JavaScript
5
star
26

ZLDotProgressbar-android

安卓版时间节点的控件
Java
5
star
27

ZLChartView

我写的一个线性图和时间轴图
Objective-C
5
star
28

ZLWaveView

ios实现杯子装水效果的进度条
Objective-C
5
star
29

AVDecode

音频的AAC解码和视频的H264解码
Objective-C
4
star
30

AndBugFix

一步一步带你从0开始实现安卓apk的热修复功能。
Java
4
star
31

ZLSqlDatabase-Android

一行代码操作安卓数据库读写,以及增删改查。
Java
4
star
32

ZLPageView

GitHub上唯一支持autolayout的tablayout。
Objective-C
4
star
33

ZLScrollButtonsView

图标列表的滚动视图
Objective-C
4
star
34

ZLSwipeViewController

实现左侧副页面在主页面上的拖动效果
Objective-C
4
star
35

ZLPolygonView-Android

类似六芒星的能力值图/雷达图,可自定义点数和值。Android版
Java
4
star
36

ZLKVO

阐述系统KVO的底层实现原理,以及如何自己手写一个KVO,在系统KVO的基础上进行深度优化。
Objective-C
4
star
37

ZLKeyboard

ios系统下自定义键盘,可以在键盘上更换自己的图片,支持autolayout和横竖屏切换
Objective-C
3
star
38

ionic3-keycloak

ionic3集成keycloak登录
JavaScript
3
star
39

ZLCompressDemo

图片压缩的方法,质量压缩,尺寸压缩,采样率压缩,哈夫曼编码压缩
C++
3
star
40

crawler-go

go语言爬取豆瓣网电影教学
3
star
41

ZLKeyboard-Android

自定义键盘安卓版本
Java
3
star
42

ZLRevealDrawable

一个自定义drawable的简单示例
Java
3
star
43

ZLHttpConnection-Android

自己写的网络访问框架
Java
3
star
44

qipaipm

我做的一个Ionic3开发的小项目
JavaScript
3
star
45

ZLCommonCell-Android

android的常用item布局封装
Java
3
star
46

ZLDynamicProxyDemo-Android

使用动态代理来实现类似butterknife的功能
Java
3
star
47

ZLCommonCell

一些通用的tableview和collectionview的cell,header。
Objective-C
3
star
48

ZLPopMenuView

IOS类似QQ的导航栏右上角弹出更多菜单。
Objective-C
3
star
49

FFmpegTest-Android

ffmpeg在android系统的编译导入以及开发
C
3
star
50

ZLFloatWindowDemo

适配安卓9.0,让自己的应用在上层应用显示,仿悬浮框
Java
3
star
51

iHome_flask

使用flask前后端分离开发爱家租房网
Python
2
star
52

Android-SMS

安卓短信保存后台及写入
Python
2
star
53

wechat-hop

threejs开发微信跳一跳练手
JavaScript
1
star
54

Django_start

第一个django入门起步小项目,新建django项目,配置mysql,sql语句操作,MVT基本操作。
Python
1
star
55

IpInput

一个vue3版本的ip地址输入框
Vue
1
star
56

ZLProgressHUD

基于svprogresshud做了优化的android loading框,显示加载成功失败的hud
Java
1
star
57

lottery-golang

用go写的后台抽奖系统
Go
1
star
58

DailyHeadline

springboot打造今日头条后台
Java
1
star
59

PlaneWar

飞机大战游戏,使用python的pygame开发
Python
1
star
60

superstar-golang

golang后台实现的球星库
Go
1
star
61

blog-beego

beego开发个人博客项目
Go
1
star
62

threejs-study

我的threejs学习笔记
JavaScript
1
star
63

vue3-element-admin

电子书管理后台,vue3开发
Vue
1
star
64

RedEnvelope-spring

spring工程 企业红包雨项目
Java
1
star