概述
本篇一起来学习如何使用UICollectionView来实现水平滚动的缩放式卡片布局，就像Nice App中的卡片布局。
前一篇中讲了如何实现CollectionView旋转水平卡片布局，如果还没有阅读过，不防先看看再继续往下阅读。
实现效果
实现思路
从Demo效果图中，可以看出来，主要是缩放系数的计算。对于不同距离的cell，其缩放系数要变化，以便整体协调显示。
所以，我们必须重写-layoutAttributesForElementsInRect:方法来实现所有当前可见的cell的attributes。
计算比例，通过获取当前偏移rect的最小坐标x，再与atribute的中心x相减，再除以高度，就是高度的缩放倍数scaleForDistance。
最后，通过一个公式来计算缩放的Y系数。公式为：
|
1
2
3
|
scale
=
1
+
scaleFactor
*
(
1
-
fabs
(
scaleForDistance
)
)
|
scaleFactor因子可以自由调整，值越大，显示就越大。
核心代码
|
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
|
#pragma mark - Override
-
(
void
)
prepareLayout
{
self
.
scrollDirection
=
UICollectionViewScrollDirectionHorizontal
;
self
.
minimumLineSpacing
=
20
;
// self.minimumInteritemSpacing = 20;
self
.
sectionInset
=
UIEdgeInsetsMake
(
0
,
30
,
0
,
30
)
;
self
.
itemSize
=
CGSizeMake
(
self
.
collectionView
.
frame
.
size
.
width
-
60
,
self
.
collectionView
.
frame
.
size
.
height
-
180
)
;
[
super
prepareLayout
]
;
}
-
(
BOOL
)
shouldInvalidateLayoutForBoundsChange
:
(
CGRect
)
newBounds
{
return
YES
;
}
-
(
NSArray
<
UICollectionViewLayoutAttributes
*
>
*
)
layoutAttributesForElementsInRect
:
(
CGRect
)
rect
{
NSArray
*superAttributes
=
[
super
layoutAttributesForElementsInRect
:rect
]
;
NSArray
*attributes
=
[
[
NSArray
alloc
]
initWithArray
:superAttributes
copyItems
:YES
]
;
CGRect
visibleRect
=
CGRectMake
(
self
.
collectionView
.
contentOffset
.
x
,
self
.
collectionView
.
contentOffset
.
y
,
self
.
collectionView
.
frame
.
size
.
width
,
self
.
collectionView
.
frame
.
size
.
height
)
;
CGFloat
offset
=
CGRectGetMidX
(
visibleRect
)
;
[
attributes
enumerateObjectsUsingBlock
:
^
(
UICollectionViewLayoutAttributes
*attribute
,
NSUInteger
idx
,
BOOL
*
_Nonnull
stop
)
{
CGFloat
distance
=
offset
-
attribute
.
center
.
x
;
// 越往中心移动，值越小，那么缩放就越小，从而显示就越大
// 同样，超过中心后，越往左、右走，缩放就越大，显示就越小
CGFloat
scaleForDistance
=
distance
/
self
.
itemSize
.
height
;
// 0.2可调整，值越大，显示就越大
CGFloat
scaleForCell
=
1
+
0.2
*
(
1
-
fabs
(
scaleForDistance
)
)
;
// only scale y-axis
attribute
.
transform3D
=
CATransform3DMakeScale
(
1
,
scaleForCell
,
1
)
;
attribute
.
zIndex
=
1
;
}
]
;
return
attributes
;
}
|
实现pagingEnabled的样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
-
(
CGPoint
)
targetContentOffsetForProposedContentOffset
:
(
CGPoint
)
proposedContentOffset
withScrollingVelocity
:
(
CGPoint
)
velocity
{
BOOL
pagingEnabled
=
NO
;
if
(
pagingEnabled
)
{
// 分页以1/3处
if
(
proposedContentOffset
.
x
>
self
.
previousOffsetX
+
self
.
itemSize
.
width
/
3.0
)
{
self
.
previousOffsetX
+=
self
.
collectionView
.
frame
.
size
.
width
-
self
.
minimumLineSpacing
*
2
;
}
else
if
(
proposedContentOffset
.
x
<
self
.
previousOffsetX
-
self
.
itemSize
.
width
/
3.0
)
{
self
.
previousOffsetX
-=
self
.
collectionView
.
frame
.
size
.
width
-
self
.
minimumLineSpacing
*
2
;
}
proposedContentOffset
.
x
=
self
.
previousOffsetX
;
}
else
{
CGFloat
x
=
proposedContentOffset
.
x
/
(
self
.
itemSize
.
width
+
self
.
minimumLineSpacing
)
;
int
base
=
(
int
)
x
;
proposedContentOffset
.
x
=
base
*
(
self
.
itemSize
.
width
+
self
.
minimumLineSpacing
)
;
}
return
proposedContentOffset
;
}
|
这里是以1/3.0为分界，左、右的1/3作为分界线，超过才会切换过去！
感谢
感谢评论的朋友们的一句话，点醒了笔者。对于不分页的情况下，其实只要使用当前的偏移x除(itemSize.width + minimumLineSpacing)就得到一个倍数，然后四舍五入。比如，4.3取整得到4，那么就是没有超过一半，就要往回滚。而4.6取整得到5，表示要滚动到下一个。所以在不分页的情况下，其实也是非常简单的。
结尾
本篇文章经过朋友们的评论及反馈，可以说已经完善了！
