CollectionView旋转水平卡片布局

概述

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突然出现的。