CollectionView旋转水平卡片布局

Posted 2020-07-01 西贝了爷

概述

UICollectionView真的好强大，今天我们来研究一下这种很常见的卡片动画效果是如何实现了。本篇不能太深入地讲解，因为笔者也是刚刚摸索出点眉目，但是并没有深刻地理解。如果在讲解过程中，出现不对的地方，请及时反馈。

效果图

重写API

 

1 2 3 4 5 6 7 8 9 10 11 12

// 我们必须重写此方法，指定布局大小 // 每次layout invalidated或者重新query布局信息时，会调用 - (void)prepareLayout;   // 用于决定布局信息 // 我们必须重写它来实现布局信息 - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;   // 重写它来布局信息 - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

还有一个非常关键的API，必须重写：

 

1 2 3 4 5

// return YES to cause the collection view to requery the layout for geometry information // 当重新查询布局信息时，就会调用此API。要设置为YES，才能实现自定义布局。 - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;

自定义布局

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112

// //  HYBCardFlowLayout.m //  CollectionViewDemos // //  Created by huangyibiao on 16/3/26. //  Copyright © 2016年 huangyibiao. All rights reserved. //   #import "HYBCardFlowLayout.h"   @interface HYBCardFlowLayout ()   @property (nonatomic, strong) NSIndexPath *mainIndexPath; @property (nonatomic, strong) NSIndexPath *willMoveToMainIndexPath;   @end   @implementation HYBCardFlowLayout   - (void)prepareLayout {   CGFloat inset = 32;   self.itemSize = CGSizeMake(self.collectionView.frame.size.width - 2 * inset,                              self.collectionView.frame.size.height * 3 / 4);   self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);   self.scrollDirection = UICollectionViewScrollDirectionHorizontal;      [super prepareLayout]; }   #pragma mark - Override - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {   return YES; }   - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {   UICollectionViewLayoutAttributes *attribute = [super layoutAttributesForItemAtIndexPath:indexPath];      [self setTransformForLayoutAttributes:attribute];      return attribute; }   - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {   NSArray *attributesSuper = [super layoutAttributesForElementsInRect:rect];   // 一定要深复制一份，不能修改父类的属性，不然会有很多error打印出来   NSArray *attributes = [[NSArray alloc] initWithArray:attributesSuper copyItems:YES];      NSArray *visibleIndexPaths = [self.collectionView indexPathsForVisibleItems];      if (visibleIndexPaths.count <= 0) {     return attributes;   } else if (visibleIndexPaths.count == 1) {     self.mainIndexPath = [visibleIndexPaths firstObject];     self.willMoveToMainIndexPath = nil;   } else if (visibleIndexPaths.count == 2) {     NSIndexPath *indexPath = [visibleIndexPaths firstObject];          // 说明是往左滚动     if (indexPath == self.mainIndexPath) {       // 记录将要移进来的位置       self.willMoveToMainIndexPath = visibleIndexPaths[1];     } else {// 往右滚动       self.willMoveToMainIndexPath = visibleIndexPaths[0];              // 更新下一个成为main       self.mainIndexPath = visibleIndexPaths[1];     }   }      for (UICollectionViewLayoutAttributes *attribute in attributes) {     [self setTransformForLayoutAttributes:attribute];   }      return attributes; }   - (void)setTransformForLayoutAttributes:(UICollectionViewLayoutAttributes *)attribute {   UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:attribute.indexPath];      if (self.mainIndexPath && attribute.indexPath.section == self.mainIndexPath.section) {     attribute.transform3D = [self tranformForView:cell];   } else if (self.willMoveToMainIndexPath && attribute.indexPath.section == self.willMoveToMainIndexPath.section) {     attribute.transform3D = [self tranformForView:cell];   } }   - (CATransform3D)tranformForView:(UICollectionViewCell *)view {   // cell的起始偏移   CGFloat w = self.collectionView.frame.size.width;   CGFloat offset = [self.collectionView indexPathForCell:view].section * w;      // 当前偏移   CGFloat currentOffset = self.collectionView.contentOffset.x;      // 计算偏移angle   CGFloat angle = (currentOffset - offset) / w;      CATransform3D t = CATransform3DIdentity;   t.m34 = 1.0 / -500;      if (currentOffset - offset >= 0) {     t = CATransform3DRotate(t, angle, 1, 1, 0);   } else {     t = CATransform3DRotate(t, angle, -1, 1, 0);   }      return t; }   @end

这里主要是要处理旋转。然后要处理切换cell的attribute设置。mainIndexPath属性用于记录当前显示的cell的位置。willMoveToMainIndexPath记录将要出现的cell的位置。

结尾

这里在慢慢切换时，效果是挺好的，但是如果快速切换卡片，你会发现会有一点点不好之处，就是下一个cell突然出现的。