• CollectionView水平和竖直瀑布流的实现


      最近在项目中需要实现一个水平的瀑布流(即每个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方法,这个方法在第一次需要布局时立刻被调用,之后在每次布局失效之前被调用,在这个方法里正好适合我们写计算布局信息的逻辑代码。

     1 - (void)prepareLayout
     2 {
     3     [super prepareLayout];
     4     
     5     [self collectionViewFlowLayoutSource];        
     6     
     7     switch (flowLayoutType) {                           //根据布局方式选择进行的方法
     8         case CGYFlowLayoutTypeHorizontal:
     9         {
    10             [self flowLayoutHorizontal];
    11         }
    12             break;
    13         case CGYFlowLayoutTypeVertical:
    14 15             [self flowLayoutVertical];
    16         }
    17         default:
    18             break;
    19     }
    20 }

       

    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 = 0 ; i < verticalNumber ; i++)
        {
            //初始化高度字典
            [_dicVerticalHeight setValue:@"0" forKey:[NSString stringWithFormat:@"%ld",(long)i]];
        }
        
        CGFloat elementsWidth = (flowLayoutWidth - self.minimumLineSpacing*(verticalNumber - 1)-self.sectionInset.left - self.sectionInset.right + 1)/verticalNumber;
        
        for (NSInteger i = 0 ; i < [elementsSize count] ; i++)
        {
            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
            
            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 有问题的地方还请大神拍砖指教。

  • 相关阅读:
    正则表达式学习
    由#pragma GCC diagnostic ignored "-Wdeprecated-declarations" 浅出
    Xcode调试
    多线程GCD 完整版
    [不定时更新-(进阶必看)我常去逛的iOS干货文章、blog等
    老程序自动安装更新程序
    fragment 学习
    Android常用的颜色列表 color.xml
    android的padding和margin的区别
    android shape的使用
  • 原文地址:https://www.cnblogs.com/tiaopi/p/6147231.html
Copyright © 2020-2023  润新知