CollectionView缩放水平卡片布局

实现思路

从Demo效果图中,可以看出来,主要是缩放系数的计算。对于不同距离的cell,其缩放系数要变化,以便整体协调显示。

所以,我们必须重写-layoutAttributesForElementsInRect:方法来实现所有当前可见的cell的attributes。

计算比例,通过获取当前偏移rect的最小坐标x,再与atribute的中心x相减,再除以高度,就是高度的缩放倍数scaleForDistance。

 

最后,通过一个公式来计算缩放的Y系数。公式为:

 
1
2
3
 
)
 

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
{
;
;
//  self.minimumInteritemSpacing = 20;
;
,
;
;
}
 
{
;
}
 
{
;
;
  
,
,
,
;
;
  
{
;
// 越往中心移动,值越小,那么缩放就越小,从而显示就越大
// 同样,超过中心后,越往左、右走,缩放就越大,显示就越小
;
// 0.2可调整,值越大,显示就越大
;
    
// only scale y-axis
;
;
;
  
;
}
 

实现pagingEnabled的样式

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
{
;
{
// 分页以1/3处
{
;
{
;
}
    
;
{
;
;
    
;
}
  
;
}
 

这里是以1/3.0为分界,左、右的1/3作为分界线,超过才会切换过去!

感谢

感谢评论的朋友们的一句话,点醒了笔者。对于不分页的情况下,其实只要使用当前的偏移x除(itemSize.width + minimumLineSpacing)就得到一个倍数,然后四舍五入。比如,4.3取整得到4,那么就是没有超过一半,就要往回滚。而4.6取整得到5,表示要滚动到下一个。所以在不分页的情况下,其实也是非常简单的。

 

相关文章: