[个人博客搬运]定制UICollectionViewLayout实现集合视图

最新推荐文章于 2021-10-11 17:45:31 发布

zzqiltw

最新推荐文章于 2021-10-11 17:45:31 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/zzqiltw/article/details/51920520

版权

最新的需求中，需要实现一个展示宝贝上新的视图，展现方式是点击一个UITableView的cell，在cell拉出一个空白的“抽屉”视图，“抽屉”中横向展示可滚动的多个宝贝的图文视图，于是很自然地想到用UICollectionView来实现。后来这个需求被砍掉了（orz），不过UICollectionView是一个很有意思很灵活的视图，类似Android的GridView，但是比之功能更强大，它可以具体到每一个item的定制，完全取决于UICollectionViewLayout的实现。

answer huang的译文中这样说明UICollectionView：

UITableView和UICollectionView都是由data-source和delegate驱动的。他们为其显示的子视图集扮演为愚蠢的容器(dumb containers)，对他们真实的内容（contents）毫不知情。

UICollectionView进一步抽象了。它将其子视图的位置，大小和外观的控制权委托给一个单独的布局对象。通过提供一个自定义布局对象，你几乎可以实现任何你能想象到的布局。布局继承自UICollectionViewLayout这个抽象基类。iOS6中以UICollectionViewFlowLayout类的形式提出了一个具体的布局实现。

关于UICollectionView，其他的同事已经介绍过啦，可以看这里

我们写一个简单的小demo，效果类似这样

这是最简单的流水布局：UICollectionViewFlowLayout。类如其义，它提供一个流水布局，item（类似UITableView中的cell）会排列在上一个item的右边，如果屏幕空间不够，它会自动排到下一行，和水流一样。

代码如下：

- (UICollectionView *)collectionView
{
    if (!_collectionView) {
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
        self.currentLayout = layout;
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 150, [UIScreen mainScreen].bounds.size.width, 240) collectionViewLayout:layout];
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        [_collectionView registerClass:[ZQCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    }
    
    return _collectionView;
}

我们现在想实现一个这样的效果：

当左右拖动item的时候，靠近屏幕中心item放大，远离中心的item缩小
左右滑动的时候，停止下来的item的中心永远和屏幕中心对齐

效果如图：

首先，我们需要自定义UICollectionViewLayout。由于需求效果仍然保持流水特性，我们选择继承UICollectionViewFlowLayout。需要重写的方法如下：

- (void)prepareLayout：该方法是每次布局时一些准备工作，可以在这里做一些初始化的操作，记得调用super实现！
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds：当布局的边界发送改变的时候，会询问该方法是否重新布局
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect：返回可见的rect中所有的Elements的布局属性（UICollectionViewLayoutAttributes）。在UICollectionViewLayoutAttributes可设置item的size、center、transform等等属性，来精确定制item的位置和形变.UICollectionViewFlowLayout对该方法有一个默认实现，可使item流水式排列。而UICollectionViewLayout则完全是空实现，需要我们自己计算
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity：当item被滑动自行停止时，我们可以根据这个方法设定item停在我们期望的地方

代码如下：

- (void)prepareLayout
{
    [super prepareLayout];
    // 每个item的size
    self.itemSize = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
    // 最小间距
    self.minimumLineSpacing = 50;
    // 横向滚动
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 内间距
    self.sectionInset = UIEdgeInsetsMake(90, (self.collectionView.bounds.size.width - ITEM_SIZE) * 0.5, 40, 150);
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    // 当前屏幕的rect
    CGRect visiableRect = {proposedContentOffset, self.collectionView.bounds.size};
    CGFloat currentCenterX = proposedContentOffset.x + self.collectionView.bounds.size.width * 0.5;
    // 调用super实现可以获取到当前rect中所有item的布局属性
    NSArray *attributesArray = [super layoutAttributesForElementsInRect:visiableRect];
    CGFloat adjustDistance = MAXFLOAT;
    // 计算距离中心点最近的item,来算偏移量
    for (UICollectionViewLayoutAttributes *attributes in attributesArray) {
        if (CGRectIntersectsRect(attributes.frame, visiableRect)) {// 在屏幕内
            CGFloat x = attributes.center.x;
            if (ABS(x - currentCenterX) < ABS(adjustDistance)) {
                adjustDistance = x - currentCenterX;
            }
        }
    }
    
    return CGPointMake(proposedContentOffset.x + adjustDistance, proposedContentOffset.y);
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    CGRect visiableRect = {self.collectionView.contentOffset, self.collectionView.bounds.size};
    CGFloat currentCenterX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width * 0.5;
    NSArray *attributesArray = [super layoutAttributesForElementsInRect:visiableRect];
    for (UICollectionViewLayoutAttributes *attributes in attributesArray) {
        if (CGRectIntersectsRect(attributes.frame, visiableRect)) {// 在屏幕内
            CGFloat itemCenterX = attributes.center.x;
            // 设定一个放大的系数，公式大家可以自己来定，效果接近就可以
            CGFloat scale = 1 + SCALE_FACTOR * (1 - (ABS(itemCenterX - currentCenterX) / SCALE_BIG_DISTANCE));
            attributes.transform3D = CATransform3DMakeScale(scale, scale, 1.0);
        }
    }
    return attributesArray;
}

以上是继承UICollectionViewFlowLayout的布局，如果我们想做一次更深层次的定制，我们可以直接继承UICollectionViewLayout来完全自定义布局，要重写的方法和UICollectionViewFlowLayout类似，只是我们需要自己来实现这些方法：

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect：需要自己新建UICollectionViewLayoutAttributes，也可以通过下面的方法2完成
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath：该方法确定当前indexPath下的item的布局属性

代码如下：

- (void)prepareLayout
{
    [super prepareLayout];
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    NSMutableArray *attributesArray = [NSMutableArray array];
    for (NSInteger i = 0; i < count; ++i) {
        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
        [attributesArray addObject:attributes];
    }
    return attributesArray;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    CGPoint currentCenter = CGPointMake(self.collectionView.contentOffset.x + self.collectionView.bounds.size.width * 0.5, self.collectionView.bounds.size.height * 0.5);
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attributes.size = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
    
    CGFloat angelDelta = M_PI * 2 / count;
    CGFloat angel = M_PI_2 - angelDelta * indexPath.row;
    attributes.center = CGPointMake(currentCenter.x + CIRCLE_RADIUS * cosf(angel), currentCenter.y + CIRCLE_RADIUS * sinf(angel));
    return attributes;

}

以上可实现一个环形（circle）布局, demo中还添加了点击item就把该item删除的事件
circel

还可以做一个类似蜂巢的布局：

- (CGSize)collectionViewContentSize
{
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    return CGSizeMake(0, (count / COL)* count);
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    UICollectionView *collection = self.collectionView;
    
    float x = (SIZE + self.margin) * (indexPath.item % COL + 1) * 0.75 + 40;
    float y = (SIZE + self.margin) * (indexPath.item / COL + 0.5) * cos(M_PI * 30.0f / 180.0f) + 20;
    if (indexPath.item % 2 == 1) {
        y += (SIZE + self.margin) * 0.5 * cosf(M_PI * 30.0f / 180.0f);
    }
    
    attributes.center = CGPointMake(x + collection.contentOffset.x, y + collection.contentOffset.y);
    attributes.size = CGSizeMake(SIZE, SIZE * cos(M_PI * 30.0f / 180.0f));
    
    return attributes;
}

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *arr = [super layoutAttributesForElementsInRect:rect];
    if ([arr count] > 0) {
        return arr;
    }
    NSMutableArray *attributes = [NSMutableArray array];
    for (NSInteger i = 0 ; i < [self.collectionView numberOfItemsInSection:0 ]; i++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
    }
    return attributes;
}

其中cell的样式：

- (instancetype)initWithFrame:(CGRect)frame

{

    if (self = [super initWithFrame:frame]) {

        self.backgroundColor = ZQRandomColor;

        CGFloat longSide = SIZE * 0.5 * cosf(M_PI * 30 / 180);

        CGFloat shortSide = SIZE * 0.5 * sinf(M_PI * 30 / 180);

        UIBezierPath *path = [UIBezierPath bezierPath];

        [path moveToPoint:CGPointMake(0, longSide)];

        [path addLineToPoint:CGPointMake(shortSide, 0)];

        [path addLineToPoint:CGPointMake(shortSide + SIZE * 0.5, 0)];

        [path addLineToPoint:CGPointMake(SIZE, longSide)];

        [path addLineToPoint:CGPointMake(shortSide + SIZE * 0.5, longSide * 2)];

        [path addLineToPoint:CGPointMake(shortSide, longSide * 2)];

        [path closePath];

        

        CAShapeLayer *maskLayer = [CAShapeLayer layer];

        maskLayer.path = [path CGPath];

        

        self.layer.mask = maskLayer;

    }

    return self;

}

效果如图：
honeycomb

zzqiltw

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[个人博客搬运]定制UICollectionViewLayout实现集合视图

最新的需求中，需要实现一个展示宝贝上新的视图，展现方式是点击一个UITableView的cell，在cell拉出一个空白的“抽屉”视图，“抽屉”中横向展示可滚动的多个宝贝的图文视图，于是很自然地想到用UICollectionView来实现。后来这个需求被砍掉了（orz），不过UICollectionView是一个很有意思很灵活的视图，类似Android的GridView，但是比之功能更强大，它可以
复制链接

扫一扫