UICollectionView 中的动画自定义布局

Question

我需要创建一个如下图所示的 UICollectionView。

我已经能够水平滚动，但是无法像图片那样UI。有什么帮助吗？谢谢

Answer 1

Here 此示例中的 LineLayout 已经实现了所需的自定义布局（这是我从显示的图像中猜测的）。

Answer 2

这就是你想要的，你只需要有一个自定义的 UICollectionViewFlowLayout，并覆盖 -(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect 方法来更改单元格显示属性。

这是每个主要操作中带有注释的布局代码

@implementation HorizonSclaeLayout

-(instancetype)init{
     self = [super init];
     if (self) {
         self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
     }
     return self;
 }

 static const CGFloat kMaxDistancePercentage = 0.3f;
 static const CGFloat kMaxRotation = 0;//(CGFloat)(70.0 * (M_PI / 180.0));
 static const CGFloat kMaxZoom = 0.6f;

 -(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
     //1 the visible rectangle of the collection view, calculated using the content offset of the view and the bounds size.
     CGRect visibleRect = (CGRect){
         .origin = self.collectionView.contentOffset,
         .size = self.collectionView.bounds.size
     };

     //2 the maximum distance away from the center, which defines the distance from the center at which each cell is fully rotated
     CGFloat maxDistance = visibleRect.size.width/2;
     NSArray *array = [super layoutAttributesForElementsInRect:rect];

     for (UICollectionViewLayoutAttributes *attributes in array) {
         //3 find the distance of the cell from the center of the current visible rectangle
         CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;

         //4 normalize this distance against the maximum distance to give a percentage of how far the view is along the line from the center to the maximum points in either direction
         CGFloat normalizedDistance = distance / maxDistance;
         normalizedDistance = MIN(normalizedDistance, 1.0f);
         normalizedDistance = MAX(normalizedDistance, -1.0f);

         //5 calculate the rotation and zoom
         CGFloat rotation = normalizedDistance * kMaxRotation;
         CGFloat zoom = 1.0f + ((1.0f - ABS(normalizedDistance))*kMaxZoom);

         //6 create the required transform by first setting m34 so that when the rotation is done
         // skew is applied to make it have the appearance of coming out of and going into the screen
         CATransform3D transform = CATransform3DIdentity;
         transform.m34 = - 1.0 / 550.0;
         transform = CATransform3DRotate(transform, rotation, 0.0f, 1.0f, 0.0f);
         transform = CATransform3DScale(transform, zoom, zoom, 0.0f);
         attributes.transform3D = transform;
     }
     return array;
 }

 -(CGSize)itemSize{
     return CGSizeMake(60, 60 * 1.2);
 }

 -(CGFloat)minimumLineSpacing{
     return 30;
 }

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

UICollectionView 中的动画自定义布局

Animated custom layout in UICollectionView

ios

uicollectionview

uicollectionviewlayout