瀑布流.gif 思路: 自定义UICollectionViewLayout实际上就是需要返回每个item的fram就可以了. collectionViewHeightAtIndexPath:(NSIndexPath *)indexPath withItemWidth:(CGFloat)width; @end @interface WaterFallLayout : UICollectionViewLayout UIEdgeInsets edge;//设置边距 @property(nonatomic,strong)id<WaterFallLayoutDelegate>delegate; @end 由于我们的自定义布局继承UICollectionViewLayout
UICollectionViewDelegate> @optional - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout (NSIndexPath *)indexPath; - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout insetForSectionAtIndex:(NSInteger)section; - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout UICollectionViewLayout是一个抽象类,上面我讲了UICollectionViewFlowLayout,它是系统为我们提供的继承自UICollectionViewLayout的用于流式布局的 layout,如果我们想要实现一个自定义的布局,那么就新建一个继承自UICollectionViewLayout的子类,然后去自定义。
没有注册这个 设置区头高度 -(CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout NEWX}; return top; } 设置顶部的大小 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout NEWX}; return size; } 设置元素大小 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout ); } 每个section中不同的行之间的行间距 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout ; return size; } 设置footer高度 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout
设置每个item的大小,双数的为50*50 单数的为100*100 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout 我们只需要实现我们需要的即可: 动态设置每个Item的尺寸大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout NSInteger)section; 动态设置每行的间距大小 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout NSInteger)section; 动态设置每列的间距大小 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout NSInteger)section; 动态设置某个分区头视图大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout
的构成,我们能看到的有三个部分: Cells Supplementary Views 追加视图 (类似Header或者Footer) Decoration Views 装饰视图 (用作背景展示) 一、UICollectionViewLayout 在展示之前,一般需要生成合适的UICollectionViewLayout子类对象,并将其赋予CollectionView的collectionViewLayout属性。 UICollectionViewLayout的功能为向UICollectionView提供布局信息. 继承UICollectionViewLayout类。 -(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds 另外需要了解的是,在初始化一个UICollectionViewLayout实例后
UICollectionViewCell是单元格类,它的布局是由UICollectionViewLayout类定义的,它是一个抽象类。 UICollectionViewFlowLayout类是UICollectionViewLayout类的子类,对于复杂的布局,可以自定义UICollectionViewLayout类。 )section{ } 复制代码 //动态设置每行的间距大小 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout section{ } 复制代码 //动态设置某个分区头视图大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout section{ } 复制代码 //动态设置某个分区尾视图大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout
UICollectionViewLayout 在介绍上述效果实现原理之前,需要介绍一下UICollectionViewLayout。 UICollectionView的自定义功能就是自己去实现UICollectionViewLayout的子类,然后重写相应的方法来实现Cell的布局,先介绍一下需要重写的方法,然后再此方法上进行应用实现上述瀑布流 UICollectionViewLayout的应用 经过上面的简单介绍,想必对UICollectionViewLayout有一定的了解吧,UICollectionViewLayout中还有好多方法,以后用到的时候在给大家介绍 我们需要在UICollectionViewLayout的子类中实现相应的布局方法,因为UICollectionViewLayout是虚基类,是不能直接被实例化的,所以我们需要新建一个布局类,这个布局类继承自 UICollectionViewLayout。
UICollectionViewDelegateFlowLayout //定义每个Item 的大小 (CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout 定义每个UICollectionView 的 margin -(UIEdgeInsets)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout
二、设计一个圆环布局 接着我们以前的想法,依然时候随机颜色的色块来表达我们的item,先自定义一个layout类,这个类继承于UICollectionViewLayout,UICollectionLayout 是一个布局抽象基类,我们要使用自定义的布局方式,必须将其子类化,可能你还记得,我们在进行瀑布流布局的时候使用过UICollectionViewFlowLayout类,这个类就是继承于UICollectionViewLayout @interface MyLayout : UICollectionViewLayout //这个int值存储有多少个item @property(nonatomic,assign)int itemCount
的尺寸 */ - (CGSize)collectionView: (UICollectionView *)collectionView layout: (UICollectionViewLayout (UIEdgeInsets)collectionView: (UICollectionView *)collectionView layout: (UICollectionViewLayout */ - (CGFloat)collectionView: (UICollectionView *)collectionView layout: (UICollectionViewLayout */ - (CGFloat)collectionView: (UICollectionView *)collectionView layout: (UICollectionViewLayout 的大小 */ - (CGSize)collectionView: (UICollectionView *)collectionView layout: (UICollectionViewLayout
cell; } func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout model.imageUrl]; return picCell; } -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout 使用自定义布局 继承 UICollectionViewDataSource,UICollectionViewDelegate 自定义布局 import UIKit class MainLayout : UICollectionViewLayout
UICollectionViewLayout 在介绍上述效果实现原理之前,需要介绍一下UICollectionViewLayout。 UICollectionView的自定义功能就是自己去实现UICollectionViewLayout的子类,然后重写相应的方法来实现Cell的布局,先介绍一下需要重写的方法,然后再此方法上进行应用实现上述瀑布流 UICollectionViewLayout的应用 经过上面的简单介绍,想必对UICollectionViewLayout有一定的了解吧,UICollectionViewLayout中还有好多方法,以后用到的时候在给大家介绍 我们需要在UICollectionViewLayout的子类中实现相应的布局方法,因为UICollectionViewLayout是虚基类,是不能直接被实例化的,所以我们需要新建一个布局类,这个布局类继承自 UICollectionViewLayout。
4 */ 5 - (CGSize)collectionView: (UICollectionView *)collectionView 6 layout: (UICollectionViewLayout UIEdgeInsets)collectionView: (UICollectionView *)collectionView 5 layout: (UICollectionViewLayout */ 4 - (CGFloat)collectionView: (UICollectionView *)collectionView 5 layout: (UICollectionViewLayout */ 4 - (CGFloat)collectionView: (UICollectionView *)collectionView 5 layout: (UICollectionViewLayout 3 */ 4 - (CGSize)collectionView: (UICollectionView *)collectionView 5 layout: (UICollectionViewLayout
中的常用方法和属性 //通过一个布局策略初识化CollectionView - (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout; //获取和设置collection的layout @property (nonatomic, strong) UICollectionViewLayout *collectionViewLayout 可以重新设置collection的布局,后面的方法多了一个布局完成后的回调,iOS7后可以用 //使用这两个方法可以产生非常炫酷的动画效果 - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated; - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated 对象管理动画的相关属性,我们可以进行设置 - (UICollectionViewTransitionLayout *)startInteractiveTransitionToCollectionViewLayout:(UICollectionViewLayout
[瀑布流.gif] 功能描述:WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。 edgeInsetInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout; @end @interface WSLWaterFlowLayout : UICollectionViewLayout
AnimatedCollectionViewLayout 是一个 UICollectionViewLayout 子类,可在不影响您现有代码的情况下向您的 UICollectionView 添加自定义过渡和动画 CollectionViewSlantedLayout CollectionViewSlantedLayout 是 UICollectionViewLayout 的另一个子类,它允许在 UICollectionView
1.6 UICollectionViewLayout 这是UICollectionView和UITableView最大的不同。 UICollectionViewLayout可以说是UICollectionView的大脑和中枢,它负责了将各个cell、Supplementary View和Decoration Views进行组织, 在展示之前,一般需要生成合适的UICollectionViewLayout子类对象,并将其赋予CollectionView的collectionViewLayout属性。 关于详细的自定义UICollectionViewLayout和一些细节,我将写在之后一篇笔记中。 定义每个UICollectionViewCell 的大小 - (CGSize) collectionView: (UICollectionView *)collectionView layout: (UICollectionViewLayout
UICollectionReusableView func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout Int) -> CGSize func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout / 返回追加视图尺寸 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout / 返回追加视图尺寸 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout 赶紧撸起你的袖子,开始吧~ 创建 Decoration View Decoration View 的创建方式不同于创建 Cell 和 Supplementary View,它只能由布局对象来定义和管理,所以 UICollectionViewLayout
瀑布流Demo 瀑布流截图.gif 使用UICollectionView实现瀑布流 自定义UICollectionViewLayout中的主要代码: YJWaterFlowLayout.h中代码: #import edgeInsetInWaterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout; @end @interface YJWaterFlowLayout : UICollectionViewLayout
答案当然是用UICollectionView了,然后自定义流水布局UICollectionViewLayout,主要代码如下:计算记录每一个cell对应的布局属性。 self.maxRowWidth = x + w ; } return CGRectMake(x, y, w, h); } 后台下发字段格式示意图 功能描述:WSLWaterFlowLayout 是在继承于UICollectionViewLayout