最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统

UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码可复用的原则(其实就是懒,不想再写一遍而已~~),干脆把水平和竖直模式都集成到一个文件中,通过protocol去控制瀑布流的显示模式。

  首先我们需要了解一下UICollectionViewLayout是个啥玩意,为什么通过它可以进行瀑布流的实现呢?在苹果官方Api Reference中我们可以看到,UICollectionViewLayout的作用就是生成集合视图的布局信息。UICollectionViewFlowLayout对UICollectionViewLayout进行了扩充,UICollectionViewFlowLayout不但可以重写页面的布局,而且它还有一些属性可以用于方便的设置诸如cell之间的间距,cell和边界的间距的值,因此我们通过实现一个类继承自UICollectionViewFlowLayout不但可以重写UICollectionViewLayout中的布局方法,还可以快捷的设置cell的间距。接下来我们直接上干货。

  在开始之前我们通过Category来添加一些扩展的方法,以便于我们获取UICollectionView的布局信息。

typedef NS_ENUM(NSInteger, CGYFlowLayoutType)
{
    CGYFlowLayoutTypeHorizontal = 1,                        //水平显示模式,UICollectionView中的元素宽度不同,高度相同
    CGYFlowLayoutTypeVertical,                              //竖直现实模式,UICOllectionView中的元素宽度相同,高度不同
};
 
@protocol CGYFlowLayoutdataSource <NSObject>
 
@required
 
/**
 指定UICollectionView的显示模式
 
 @return CGYFlowLayoutType 瀑布流的展现方式
 */
- (CGYFlowLayoutType)CGYCollectionViewFlowLayoutType;
 
/**
 水平模式下数组中传入的是每个元素的宽度,竖直模式下传入元素的高度
 
 @return 包含Cell高度或宽度的数组
 */
- (NSArray *)CGYFlowLayoutElementsSize;
 
/**
 UICollectionView的宽度
 
 @return UICollectioncView的宽度
 */
- (CGFloat)CGYFlowLayoutWidth;
 
@optional
/**
 Cell高度不定时需要实现此方法,制定CollectionView中显示的列数
 
 @return UICollectionView的列数
 */
- (NSInteger)CGYFlowLayoutVerticalNumber;
 
/**
 Cell宽度不定时需要实现此方法,元素的自定义高度
 
 @return UICollectionView中每个元素的高度
 */
- (CGFloat)CGYFlowLayoutHorizontalCommonHeight;
 
@end
@interface CGYFlowLayout ()
{
NSArray *elementsSize; //布局元素尺寸存储数组
NSInteger verticalNumber; //竖直不规则布局列数
NSMutableArray *_arrayPosition; //元素布局位置存储数组
NSMutableDictionary *_dicVerticalHeight; //对应列高度存储字典 CGFloat flowLayoutWidth; //UICollectionView的宽度 CGFloat horizontalElementsHeight; //水平模式下每行元素的高度 CGFloat HorizontalHeight; //UICollectionView的总高度 CGYFlowLayoutType flowLayoutType; //布局模式
}

在声明一些属性用于存储计算相关的数据,准备工作完成以后就可以开始我们的布局实现了。

  首先,UICollectionViewLayout中有一个prepareLayout方法,这个方法在第一次需要布局时立刻被调用,之后在每次布局失效之前被调用,在这个方法里正好适合我们写计算布局信息的逻辑代码。

 - (void)prepareLayout
{
[super prepareLayout]; [self collectionViewFlowLayoutSource];         switch (flowLayoutType) { //根据布局方式选择进行的方法
case CGYFlowLayoutTypeHorizontal:
{
[self flowLayoutHorizontal];
}
break;
case CGYFlowLayoutTypeVertical:
[self flowLayoutVertical];
}
default:
break;
}
}

  

Cell元素高度相同,宽度不同布局计算方法:

#pragma mark - CGYFlowLayout 布局方法实现

//水平不规则布局方式实现

- (void)flowLayoutHorizontal

{

[_arrayPosition removeAllObjects];

CGFloat positionX = self.sectionInset.left;

HorizontalHeight = self.sectionInset.top;

CGFloat elementsWidth;

for (NSInteger i = 0 ; i < [elementsSize count] ; i++)

{

NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];

UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

elementsWidth = [[elementsSize objectAtIndex:i] floatValue];

NSAssert(elementsWidth>flowLayoutWidth, @"这个元素比CollectionView的宽度还宽");

if ((positionX + self.sectionInset.right + elementsWidth) > flowLayoutWidth)

{

positionX = self.sectionInset.left;

HorizontalHeight = HorizontalHeight + horizontalElementsHeight + self.minimumInteritemSpacing;

attr.frame = CGRectMake(positionX, HorizontalHeight, elementsWidth, horizontalElementsHeight);

positionX = positionX + elementsWidth + self.minimumLineSpacing;

}

else

{

attr.frame = CGRectMake(positionX, HorizontalHeight, elementsWidth, horizontalElementsHeight);

positionX = positionX + elementsWidth + self.minimumLineSpacing;

}

[_arrayPosition addObject:attr];

}

HorizontalHeight = HorizontalHeight + horizontalElementsHeight;

}

在Cell元素高度固定时,代码实现较为简单,只需要判断当前行的宽度是否能够容下下一个Cell元素插入就行了,如果下一个元素插入后行宽超过了UICollectionView的宽度,就将Cell插入到下一行,最后计算出布局的总高度信息。在每次插入Cell元素后,通过_arrayPosition数组记录下Cell元素的位置信息。

Cell元素宽度相同,高度不相同时计算相对来说复杂一些,我们需要判断找出每次插入后最短的那一列,将下一个元素插入到最短的列中。我们通过一个NSMutableDictionary来存储每次插入后的列高,NSMutableDictionary的key值就是第几列,value就是该列的高度,在每次插入后都刷新该列的高度值。

//竖直不规则布局方式实现
- (void)flowLayoutVertical
{
[_arrayPosition removeAllObjects]; //重新布局时移除所有 CGFloat positionX; //元素布局X坐标
CGFloat positionY; //元素布局Y坐标
CGFloat elementsHeight; //元素高度
NSInteger minHeightPosition; //最小高度行位置 _dicVerticalHeight = [[NSMutableDictionary alloc] init];
for(NSInteger i = ; i < verticalNumber ; i++)
{
//初始化高度字典
[_dicVerticalHeight setValue:@"" forKey:[NSString stringWithFormat:@"%ld",(long)i]];
} CGFloat elementsWidth = (flowLayoutWidth - self.minimumLineSpacing*(verticalNumber - )-self.sectionInset.left - self.sectionInset.right + )/verticalNumber; for (NSInteger i = ; i < [elementsSize count] ; i++)
{
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:]; UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; minHeightPosition = [self MinHeightPosition];
positionX = self.sectionInset.left + (elementsWidth + self.minimumLineSpacing)*minHeightPosition;
positionY =self.sectionInset.top + [[_dicVerticalHeight valueForKey:[NSString stringWithFormat:@"%ld",(long)minHeightPosition]] floatValue];
elementsHeight = [[elementsSize objectAtIndex:i] floatValue]; attr.frame = CGRectMake(positionX, positionY, elementsWidth, elementsHeight); [_dicVerticalHeight setValue:[NSNumber numberWithFloat:(positionY + elementsHeight + self.minimumInteritemSpacing)] forKey:[NSString stringWithFormat:@"%ld",(long)minHeightPosition]]; [_arrayPosition addObject:attr];
}
}

  当我们在prepareLayout方法中计算出整个UIcollectionView中所有cell的position后,我们可以通过选择重写layoutAttributesForElementsInRect:(CGRect)rect方法返回一个包含所有cell布局信息的数组。

//返回计算好的布局数组信息
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return _arrayPosition;
}

  现在我们拿到了所有cell的布局信息可以完事了吗?很抱歉,答案是NO!!!UICollectionViewLayout强硬的规定了,当你重写了它的时候,你就必须要实现一个叫做collectionViewContentSize的方法,这个方法确定了UICollectionView可滑动的范围,我试了一下,果然不重写它我们的CollectionView是动不了的。。。

- (CGSize)collectionViewContentSize
{
if (flowLayoutType == CGYFlowLayoutTypeVertical)
{
return CGSizeMake(flowLayoutWidth, [self maxHeightPosition]);
}
else
{
return CGSizeMake(flowLayoutWidth, HorizontalHeight);
}
}

  当UICollectionView的元素高度固定时,返回值就是我们记录下来的HorizontalHeight,但是当元素高度不固定时,我们就要从所有列中找出高度最高的那一列,并返回那一列的高度信息,这样才可以保证在滑动时每个Cell都是可见的。

代码的github地址是:https://github.com/cgy-tiaopi/CGYUICollectionViewFlowLayout 有问题的地方还请大神拍砖指教。

CollectionView水平和竖直瀑布流的实现的更多相关文章

  1. border-radius的水平和竖直半径

    通常我们设置border-radius都只区分四个角的, 如border-radius: 1em 2em. 其实每个角的border-radius都由两部分组成, 水平半径和竖直半径. 要设置水平和竖 ...

  2. 设置UIScrollView只可以水平或者竖直滚动

    UIScrollView里边包含多个UIWebView: 可以通过设置contentSize的值,设置其width为UIScrollerView可视区域的宽度:即UIScrollView的width, ...

  3. Winform中设置ZedGraph曲线图的水平与竖直参考线

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  4. ListView 水平滑动 水平和竖直滑动

    效果 Activity public class MainActivity extends Activity {     @Override     protected void onCreate(B ...

  5. android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果

    代码地址如下:http://www.demodashi.com/demo/13381.html 先来一波demo截图 实现ListView.GridView.瀑布流 1.导入RecyclerView的 ...

  6. 用collectionview实现瀑布流-转(后面附demo,供参考)

    算法总体思路 先说一下总体上的思路.既然图片的大小.位置各不一样,我们很自然地会想到需要算出每个item的frame,然后把这些frame赋值给当前item的UICollectionViewLayou ...

  7. 用collectionview实现瀑布流-转

    算法总体思路 先说一下总体上的思路.既然图片的大小.位置各不一样,我们很自然地会想到需要算出每个item的frame,然后把这些frame赋值给当前item的UICollectionViewLayou ...

  8. Android RecyclerView(瀑布流)水平/垂直方向分割线

     Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...

  9. 【iOS开发】collectionView 瀑布流实现

    一.效果展示 二.思路分析 1> 布局的基本流程 当设置好collectionView的布局方式之后(UICollectionViewFlowLayout),当系统开始布局的时候,会调用 pre ...

随机推荐

  1. 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍

    我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...

  2. 【Other】Ubuntu 14.04 pptp 客户端连接配置

    sudo apt-get install pptp-linux binutils modprobe ppp_mppe sudo pptpsetup --create testvpn --server ...

  3. jquery中checkbox选中的问题之prop&amp;attr惹的祸

    一个网上很多的例子如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  4. BZOJ-1951 古代猪文 (组合数取模Lucas+中国剩余定理+拓展欧几里得+快速幂)

    数论神题了吧算是 1951: [Sdoi2010]古代猪文 Time Limit: 1 Sec Memory Limit: 64 MB Submit: 1573 Solved: 650 [Submit ...

  5. javascript笔记——js面试问题

    1:javascript中的变量提升(先使用再声明,js中的函数也存在函数提升) 2:js中的事件捕获和事件冒泡(是两个相反的过程) 3:js中的动画队列(比如animate动画没有在点击的时候阻止正 ...

  6. RHCS集群理论暨最佳实践

    RHCS集群理论暨 最佳实践 什么是集群?     集群是一组(>2)相互独立的,通过高速网络互联的计算机组成的集合.群集一般可以分为科学集群,负载均衡集群,高可用性集群三大类.     科学集 ...

  7. Bootstrap3.0入门学习系列

    Bootstrap3.0入门学习系列规划[持续更新]   前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...

  8. 解决CenOS 7下启动ActiveMQ时报错

    基于 CentOS 7,ActiveMQ 5.9.1 问题重现 在 CentOS 7 下安装好ActiveMQ后,执行 /usr/local/apache-activemq-5.9.1/bin/act ...

  9. css3滚动效果

    .css{ -webkit-transition-duration: .3s;    transition-duration: .3s; }

  10. MySQL的InnoDB引擎与MyISAM引擎

    MyISAM:这个是默认类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.与 ...