UICollectionViewのアニメーションカスタムレイアウト

Question

次の図のようにUICollectionViewを作成する必要があります。

私は、水平方向にスクロールさせることができますが、絵のようなUIを作成することができませんでした。どんな助け？ありがとう。

Answer 1

あなたが望むのは、カスタムの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 

Answer 2

Here LineLayoutは既に必要なカスタムレイアウトを実装しています（これは、画像から推測したものです）。