前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >(转)iOS开发之UICollectionViewController系列(四) :一款功能强大的自定义瀑布流

(转)iOS开发之UICollectionViewController系列(四) :一款功能强大的自定义瀑布流

作者头像
VV木公子
修改于 2021-03-07 08:26:53
修改于 2021-03-07 08:26:53
5.5K00
代码可运行
举报
文章被收录于专栏:TechBoxTechBox
运行总次数:0
代码可运行

原文链接:https://www.cnblogs.com/ludashi/p/4831487.html

在上一篇博客中《iOS开发之UICollectionViewController系列(三) –使用UICollectionView自定义瀑布流》,自定义瀑布流的列数,Cell的外边距,Cell的最大以及最小高度是在我们的布局文件中是写死的,换句话说也就是不可配置的。为了循序渐进,由浅入深呢,上篇博客暂且那么写。不过那样写太过死板,本来使用起来比较灵活的自定义布局,如果把其配置参数给写死了,就相当于在笼中的猛兽,再厉害不也白扯蛮。 在今天这篇博客中我们要接着上篇博客中的Demo,使其自定义布局的属性在使用它的UICollectionView中是可配置的。 当然在本篇要介绍的Demo中只提取了四个布局参数,无论添加一个Delegate,但思路都是一样的。我们把上一篇博客中写死的内容,通过布局代理来提供参数配置,这样就灵活多了。好了,咸淡扯的适中,进入我们今天的主题。 一.进化后的运行效果 下图算是Demo的2.0版本的运行效果,和之前的比较起来功能确实强大了不少。因为他是可配置化的,根据用户输入的参数来确定瀑布流的样式。当然Demo中是通过用户输入的参数来确定的,如果你在代码中使用该自定义瀑布流,需要根据你的实际情况可以配置瀑布流的参数,来打造属于你自己的瀑布流。网上虽然好多实现瀑布流的博客和代码,但是像今天这样可配置的瀑布流应该是不多的,至少我没见过,所以喽就写一个,开源一下,给大家分享交流一下。

二、自定义瀑布流使用方式 该自定义瀑布流布局的使用方式和系统自带的UICollectionViewDelegateFlowLayout用法一直,都是通过布局代理来定制布局参数,关于UICollectionViewDelegateFlowLayout的内容详见《iOS开发之窥探UICollectionViewController(二) –详解CollectionView各种回调》中有关UICollectionViewDelegateFlowLayout代理介绍的内容。 如果想使用该布局文件,你需要为我们的UICollectionView来指定该布局文件,在本篇博客中的Demo中是在Storyboard中进行自定义布局文件的指定的,你也可以通过代码的方式指定,再次不做过多的赘述。指定该自定义布局后,你需要做以下事情: 1.为布局指定代理方法 首先获取UICollectionView的布局collectionViewLayout,然后为其设置CustomeCollectionViewLayoutDelegate代理即可,代码如下:

Objective-C

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
_customeLayout = (CustomeCollectionViewLayout *) self.collectionViewLayout;

 _customeLayout.layoutDelegate = self;

2.实现CustomeCollectionViewLayoutDelegate中的方法 需要在UICollectionView的使用控制器中实现自定义布局中的代理方法来设置布局属性,我们这儿定了四个必须实现的方法。 你可以通过这些方法去设定cell的列数,Cell的外边距,Cell的最小高度,Cell的最大高度,如下所示:

Objective-C

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#pragma mark 
- (NSInteger) numberOfColumnWithCollectionView: (UICollectionView *)collectionView
                          collectionViewLayout:( CustomeCollectionViewLayout *)collectionViewLayout{
    return _cellColumn;
}
 
- (CGFloat)marginOfCellWithCollectionView:(UICollectionView *)collectionView collectionViewLayout:(CustomeCollectionViewLayout *)collectionViewLayout{
    return _cellMargin;
}
 
- (CGFloat)minHeightOfCellWithCollectionView:(UICollectionView *)collectionView collectionViewLayout:(CustomeCollectionViewLayout *)collectionViewLayout{
    return _cellMinHeight;
}
 
- (CGFloat)maxHeightOfCellWithCollectionView:(UICollectionView *)collectionView collectionViewLayout:(CustomeCollectionViewLayout *)collectionViewLayout{
    return _cellMaxHeight;
}
  1. 你就可以通过上述Delegate方法来修改自定义布局的属性了,你可以通过一个配置页面,进行参数配置。配置完后,进行CollectionView的刷新即可,这些在本博客中就不做赘述,详情请见博客下方gitHub分享地址。 至此,我们的自定义瀑布流就相对比较完善了,不过还有好大的改善控件。感兴趣的小伙伴可以在此基础上加上你自己的东西。 Demo地址

如果您是iOS开发者,或者对本篇文章感兴趣,请关注本人,后续会更新更多相关文章!敬请期待!

参考文章: iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.02.22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
iOS开发之窥探UICollectionViewController(五) --一款炫酷的图片浏览组件
本篇博客应该算的上CollectionView的高级应用了,从iOS开发之窥探UICollectionViewController(一)到今天的(五),可谓是由浅入深的窥探了一下UICollectionView的用法,这些用法不仅包括SDK中自带的流式布局(UICollectionViewDelegateFlowLayout)而且介绍了如何根据你的需求去自定义属于你自己的CollectionView。自定义的CollectionView可谓是非常灵活,其灵活性也决定了其功能的强大。CollectionVie
lizelu
2018/01/11
1.5K0
iOS开发之窥探UICollectionViewController(五) --一款炫酷的图片浏览组件
iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看《iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调》。UICollectionView之所以强大,是因为其具有自定义功能,这一自定义就不得了啦,自由度非常大,定制的高,所以功能也是灰常强大的。本篇博客就不使用自带的流式布局了,我们要自定义一个瀑布流。自定义的瀑布流可以配置其参数: 每个Cell的边距,共有多少列,
lizelu
2018/01/11
1.4K0
iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
Swift 自定义布局实现瀑布流视图
自打 Apple 在 iOS6 中引入 UICollectionView 这个控件之后,越来越多的 iOS 开发者选择将它作为构建 UI 的首选,如此吸引人的原因在于它的可定制化程度非常的高,非常的灵活,这取决于它有一个单独的对象来管理布局,该布局决定了视图的位置和属性。
HelloWorld杰少
2022/08/04
2.7K0
Swift 自定义布局实现瀑布流视图
iOS 瀑布流实现「建议收藏」
我们将collectionview定义为一个属性变量,并在viewDidLoad中对其进行设置:首先我们创建了一个布局对象(layout),类型是我们自己定义的布局类(WaterfallFlowLayout),接着我们又对属性变量collectionview进行了创建,设置了他的frame。然后就是对其代理的设置,collectionview的代理有三个,除了和tableview相同的代理和数据源之外,还有一个布局的代理(UICollectionViewDelegateFlowLayout),这里只设置了两个代理,就是数据源和处理事件的代理。这里需要注意的是tableview的重用机制不需要注册,但是collectionview必须要注册,注册的类是自己定义的cell的类(WaterFallCollectionViewCell),然后再跟上标识。值得一提的是collectionview只能采用重用的方式来加载cell。
全栈程序员站长
2022/11/17
2.5K1
iOS 瀑布流实现「建议收藏」
iOS 多section瀑布流实现(swift)
 最近因项目需求,写了一个支持多 section 的瀑布流实现组件,完全基于 swift 5 来实现。 先来直接看效果图:
我只不过是出来写写代码
2020/05/18
1.9K0
iOS 多section瀑布流实现(swift)
iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局
        前几篇博客从UICollectionView的基础应用到设置UICollectionViewFlowLayout更加灵活的进行布局,但都限制在系统为我们准备好的布局框架中,还是有一些局限性,例如,如果我要进行瀑布流似的不定高布局,前面的方法就很难满足我们的需求了,如下:
珲少
2018/08/15
3.2K0
iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局
(转)iOS开发之UICollectionViewController系列(二) :详解CollectionView各种回调
原文链接:https://www.cnblogs.com/ludashi/p/4792480.html
VV木公子
2018/06/05
7.8K0
(转)iOS开发之UICollectionViewController系列(二) :详解CollectionView各种回调
iOS 瀑布流封装
初始化仅三行代码,只需设置代理和样式,item的大小、头脚视图的大小、行列数以及间距都可以在对应样式的代理方法中自定义,然后设置为UICollectionView的自动流水布局样式,并结合UICollectionView的用法使用,详情看示例
且行且珍惜_iOS
2018/05/21
1.6K0
iOS瀑布流
瀑布流Demo 瀑布流截图.gif 使用UICollectionView实现瀑布流 自定义UICollectionViewLayout中的主要代码: YJWaterFlowLayout.h中代码: #
hrscy
2018/08/30
1.5K0
iOS瀑布流
UICollectionView 很简单的写个瀑布流
你项目中要用到它吗? 可能会在你的项目中用到这玩意,最近也是要用就简单的写了一个 Demo。没多少代码,就不放Git了,下面会详细点的说说代码的,要还有什么问题的小伙伴可以直接Q我,也可以把Demo发给你,这里有Q可以找一下加我 多多交流,互相学习!    下面是简单的一个效果图,先给看看效果图! 739006-20160607165303027-1215360678.png 先说说控制器里面的代码,控制器里面就是我们的  UICollectionView  的一些基本的创建了。其实它和 UITabl
Mr.RisingSun
2018/01/09
1.1K0
UICollectionView 很简单的写个瀑布流
iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调
UICollectionView的布局是可以自己定义的,在这篇博客中先在上篇博客的基础上进行扩充,我们先使用UICollectionViewFlowLayout,然后好好的介绍一下UICollectionView的一些回调方法,主要包括UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,UICollectionViewDelegate相关回调方法,并通过实例来介绍每个回调的用法。并且给每个Section添加定制的Header和Foote
lizelu
2018/01/11
1.7K0
iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调
iOS UICollectionView的用法
UICollectionViewDataSource,UICollectionViewDelegateFlowLayout
码客说
2019/10/22
1.3K0
UI篇-UICollectionView 补充
http://blog.csdn.net/xiyouios/article/details/50191101
進无尽
2018/09/12
1.6K0
UI篇-UICollectionView 补充
iOS开发之资讯类App常用分类控件的封装与实现(CollectionView+Swift3.0+)
今天博客中,我们就来实现一下一些常用资讯类App中常用的分类选择的控件的封装。本篇博客中没有使用到什么新的技术点,如果非得说用到了什么新的技术点的话,那么勉强的说,用到了一些iOS9以后UICollectionView添加的一些新的特性。本篇博客所涉及的技术点主要有UICollectionView的Cell移动,手势识别,控件封装,闭包回调,面向接口编程,Swift中的泛型等等。这些技术点在之前的博客中也多次使用到,只不过本篇博客使用这些技术点来完成我们的具体需求。 一、实例运行效果 先入为主,下方这个效果
lizelu
2018/01/11
1.6K0
iOS开发之资讯类App常用分类控件的封装与实现(CollectionView+Swift3.0+)
UICollectionView
平常我在业务开发中,绝大部分情况都是使用的UITableView,而UICollectionView则是在极少情况下才会去使用,这就导致了我对UICollectionView略感陌生。本篇文章就是以二者对比的方式对UICollectionView做一个小总结。
拉维
2019/08/12
1.2K0
Objectiv-c - UICollectionViewLayout自定义布局-瀑布流Demo地址
公开变量以及代理. 公开的变量是可以进行调用时设置,一般就为这些,delegate用来实现动态的高度设置
gwk_iOS
2018/08/23
5500
Objectiv-c - UICollectionViewLayout自定义布局-瀑布流Demo地址
iOS---UICollectionView详解和常用API翻译
UICollectionView 1.必须要设置布局参数 2.注册cell 用法类似于UITableView 类。自动实现重用,必须注册初始化。 使用UICollectionView必须实现UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。 Collection View的构成,我们能看到的有三个部分: Cells Supplementary Views 追加视图 (类似He
用户1941540
2018/05/11
2.3K0
iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局
        前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类UICollectionViewFlowLayout没有着重探讨,这篇博客介绍关于布局的相关设置和属性方法。
珲少
2018/08/16
2.1K0
iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局
iOS 瀑布流之栅格布局
实现的栅格布局效果示意图 需求示意图 确定需求 由上面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后的四等份,而每个模块的样式有小正方形(1:1)、大正方形(2:2)、横长方形(2:1)、纵长方形(1:2),动态的根据服务器下发模块样式绘制布局,可以横向滑动,限定为两行的高度。 注意:上面的示意宽高比是约等于,忽略了间距,计算的时候千万别忘了。 实现思路 由上需求分析可知,我们可以让后台每个模块下发width和height两个字段,字段的值是1或2就行了,然后我们就能根据宽高字
且行且珍惜_iOS
2018/08/13
1.8K0
iOS 瀑布流之栅格布局
iOS流布局UICollectionView系列七——三维中的球型布局
        通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑布流布局,再到平面中的圆环布局,我们突破了线性布局的局限,在后面,我们将布局扩展到了空间,在Z轴上进行了平移,我们实现了一个类似UIPickerView的布局模型,其实我们还可以再进一步,类比于平面布局,picKerView只是线性排列布局在空间上的旋转与平移,这次,我们更加充分了利用一下空间的尺寸,来设计一个圆球的布局模型。以下是前几篇博客地址:
珲少
2018/08/16
1.5K0
iOS流布局UICollectionView系列七——三维中的球型布局
推荐阅读
相关推荐
iOS开发之窥探UICollectionViewController(五) --一款炫酷的图片浏览组件
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验