写博客 发Chat 横向分页滚动的UICollectionView,cell左右排版 支持多组Cell实现。

转自:https://blog.csdn.net/QiuHaoZhou/article/details/54582741

需求:固定高度一个区域,里面左右分页显示很多个图标,在每一页中的图标先从左往右排,排满后再从上往下排。这一页排满后排下一页。



像这样的需求,第一反应是用UICollectionView来写,用UICollectionViewFlowLayout,然后设置为横向的。
但是,显示出来肯定上下上下排版的。下面的图是我借来的。。如果原创的看到这张图莫怪哈。。


这样显示方式就是系统自带的。
我们如果要横向现实。。那我们要如何实现呢? 其实很简单。重写一个 UICollectionViewFlowLayout 就可以的了。

自定义的UICollectionViewLayout

UICollectionViewLayout的功能为向UICollectionView提供布局信息,不仅包括cell的布局信息,也包括追加视图和装饰视图的布局信息。实现一个自定义layout的常规做法是继承UICollectionViewLayout类,然后重载下列方法:

  • -(CGSize)collectionViewContentSize

    • 返回collectionView的内容的尺寸
  • -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

    • 返回rect中的所有的元素的布局属性
    • 返回的是包含UICollectionViewLayoutAttributes的NSArray
    • UICollectionViewLayoutAttributes可以是cell,追加视图或装饰视图的信息,通过不同的UICollectionViewLayoutAttributes初始化方法可以得到不同类型的UICollectionViewLayoutAttributes:

      • layoutAttributesForCellWithIndexPath:
      • layoutAttributesForSupplementaryViewOfKind:withIndexPath:
      • layoutAttributesForDecorationViewOfKind:withIndexPath:
  • -(UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath

    • 返回对应于indexPath的位置的cell的布局属性
  • -(UICollectionViewLayoutAttributes )layoutAttributesForSupplementaryViewOfKind:(NSString )kind atIndexPath:(NSIndexPath *)indexPath

    • 返回对应于indexPath的位置的追加视图的布局属性,如果没有追加视图可不重载
  • -(UICollectionViewLayoutAttributes * )layoutAttributesForDecorationViewOfKind:(NSString)decorationViewKind atIndexPath:(NSIndexPath )indexPath

    • 返回对应于indexPath的位置的装饰视图的布局属性,如果没有装饰视图可不重载
  • -(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

    • 当边界发生改变时,是否应该刷新布局。如果YES则在边界变化(一般是scroll到其他地方)时,将重新计算需要的布局信息。
好了,带大家了解自定义ectionViewFlowLayout 的一些必须重载方法,那么现在就开始上实现代码了。

#import <UIKit/UIKit.h>


@interface BCCollectionViewHorizontalLayout : UICollectionViewFlowLayout


//  一行中 cell 的个数

@property (nonatomic,assignNSUInteger itemCountPerRow;


//    一页显示多少行

@property (nonatomic,assign) NSUInteger rowCount;


@end



#import "BCCollectionViewHorizontalLayout.h"


@interface BCCollectionViewHorizontalLayout () <UICollectionViewDelegateFlowLayout>

@property (strongnonatomic) NSMutableArray *allAttributes;

@end


@implementation BCCollectionViewHorizontalLayout


-(instancetype)init

{

    if (self = [super init])

    {

        

    }

    return self;

}


- (void)prepareLayout

{

    [super prepareLayout];

    

    self.allAttributes = [NSMutableArray array];

    

    NSInteger sections = [self.collectionView numberOfSections];

    for (int i = 0; i < sections; i++)

    {

        NSMutableArray * tmpArray = [NSMutableArray array];

        NSUInteger count = [self.collectionView numberOfItemsInSection:i];

        

        for (NSUInteger j = 0; j<count; j++) {

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

            UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];

            [tmpArray addObject:attributes];

        }


        [self.allAttributes addObject:tmpArray];

    }

}


- (CGSize)collectionViewContentSize

{

    return [super collectionViewContentSize];

}


- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

{

    NSUInteger item = indexPath.item;

    NSUInteger x;

    NSUInteger y;

    [self targetPositionWithItem:item resultX:&x resultY:&y];

    NSUInteger item2 = [self originItemAtX:x y:y];

    NSIndexPath *theNewIndexPath = [NSIndexPath indexPathForItem:item2 inSection:indexPath.section];

    

    UICollectionViewLayoutAttributes *theNewAttr = [super layoutAttributesForItemAtIndexPath:theNewIndexPath];

    theNewAttr.indexPath = indexPath;

    return theNewAttr;

}


- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect

{

    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

    

    NSMutableArray *tmp = [NSMutableArray array];

    

    for (UICollectionViewLayoutAttributes *attr in attributes) {

        for (NSMutableArray *attributes in self.allAttributes)

        {

            for (UICollectionViewLayoutAttributes *attr2 in attributes) {

                if (attr.indexPath.item == attr2.indexPath.item) {

                    [tmp addObject:attr2];

                    break;

                }

            }


        }

    }

    return tmp;

}



- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

{

    return YES;

}


// 根据 item 计算目标item的位置

// x 横向偏移  y 竖向偏移

- (void)targetPositionWithItem:(NSUInteger)item

                       resultX:(NSUInteger *)x

                       resultY:(NSUInteger *)y

{

    NSUInteger page = item/(self.itemCountPerRow*self.rowCount);

    

    NSUInteger theX = item % self.itemCountPerRow + page * self.itemCountPerRow;

    NSUInteger theY = item / self.itemCountPerRow - page * self.rowCount;

    if (x != NULL) {

        *x = theX;

    }

    if (y != NULL) {

        *y = theY;

    }

}


// 根据偏移量计算item

- (NSUInteger)originItemAtX:(NSUInteger)x

                          y:(NSUInteger)y

{

    NSUInteger item = x * self.rowCount + y;

    return item;

}

@end


好啦,代码演示到这也就结束了。希望这篇文章对进来看的朋友有帮助。
觉得有帮助的朋友不妨动动你的小手。帮忙点下赞,谢谢。

猜你喜欢

转载自blog.csdn.net/zhanglizhi111/article/details/79728163