CollectionView垂直缩放卡片布局
Posted 西贝了爷
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CollectionView垂直缩放卡片布局相关的知识,希望对你有一定的参考价值。
实现效果
实现思路
从效果图可以看到变化是,越是往中间滚动的item显示最大,越显眼。而越是往前面,或者越是后面的,反而显示越小,这样就形成了视觉差。
实现的思路就是通过重写在可见范围内的所有item的方法:
1
2
3
|
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
|
通过这个API可以获取到原始属性,然后利用公式来计算缩放。
难点
如何计算缩放系数。这里实现的效果的公式如下:
1
2
3
|
CGFloat zoom = 1 + 0.15 * (1 - fabs(widthForScale));
|
其中,widthForScale是最难把握的系数。
如何计算widthForScale呢?方法是利用item的中心y与当前collectionview的contentOffset.y来计算:
1
2
3
4
|
CGFloat distance = obj.center.y - fabs(offset) - self.itemSize.width;
CGFloat widthForScale = distance / self.itemSize.height;
|
其中,offset这么计算出来的:
1
2
3
4
5
6
7
|
CGRect visibleRect = CGRectZero;
visibleRect.origin = self.collectionView.contentOffset;
visibleRect.size = self.collectionView.frame.size;
CGFloat offset = CGRectGetMinY(visibleRect);
|
最大的难点是distance的计算,如何拿捏呢?这需要慢慢分析。
假设有三个item显示,那么第一个item的缩放要比第二个item(主显示的item)要小,然后第二个item的缩放要比第三个要大。
第二个item(主)比第一个多了一个item,而第三个又比第二个多了一个item,所以再减去一个item的宽就可以了。
核心代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *superAttributes = [super layoutAttributesForElementsInRect:rect];
NSArray *attributes = [[NSArray alloc] initWithArray:superAttributes copyItems:YES];
CGRect visibleRect = CGRectZero;
visibleRect.origin = self.collectionView.contentOffset;
visibleRect.size = self.collectionView.frame.size;
CGFloat offset = CGRectGetMinY(visibleRect);
[attributes enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes *obj, NSUInteger idx, BOOL * _Nonnull stop) {
CGFloat distance = obj.center.y - fabs(offset) - self.itemSize.width;
CGFloat widthForScale = distance / self.itemSize.height;
CGFloat zoom = 1 + 0.15 * (1 - fabs(widthForScale));
obj.transform3D = CATransform3DMakeScale(zoom, 1.0, 1.0);
}];
return attributes;
}
|
系数0.15自由调整。
结尾
这里没有实现分页的特性,笔者还是尝试了的,不过因为一个item不是占满全屏,所以计算起来总是达不到笔者期望的效果。大家若能在笔者的基础上研究出来,请主动通知笔者,谢谢!
以上是关于CollectionView垂直缩放卡片布局的主要内容,如果未能解决你的问题,请参考以下文章
CollectionView 里面的 CollectionView | CollectionViewCell 自动布局错误