CollectionView旋转水平卡片布局 概述 效果图 重写API 自定义布局 结尾
UICollectionView真的好强大，今天我们来研究一下这种很常见的卡片动画效果是如何实现了。本篇不能太深入地讲解，因为笔者也是刚刚摸索出点眉目，但是并没有深刻地理解。如果在讲解过程中，出现不对的地方，请及时反馈。
效果图
重写API
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 我们必须重写此方法，指定布局大小
// 每次layout invalidated或者重新query布局信息时，会调用
;
// 用于决定布局信息
// 我们必须重写它来实现布局信息
;
// 重写它来布局信息
;
|
还有一个非常关键的API，必须重写：
|
1
2
3
4
5
|
// return YES to cause the collection view to requery the layout for geometry information
// 当重新查询布局信息时，就会调用此API。要设置为YES，才能实现自定义布局。
;
|
自定义布局
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
//
// HYBCardFlowLayout.m
// CollectionViewDemos
//
// Created by huangyibiao on 16/3/26.
// Copyright © 2016年 huangyibiao. All rights reserved.
//
)
;
;
@end
HYBCardFlowLayout
{
;
,
;
;
;
;
}
#pragma mark - Override
{
;
}
{
;
;
;
}
{
;
// 一定要深复制一份，不能修改父类的属性，不然会有很多error打印出来
;
;
{
;
{
;
;
{
;
// 说明是往左滚动
{
// 记录将要移进来的位置
;
// 往右滚动
;
// 更新下一个成为main
;
}
}
{
;
}
;
}
{
;
{
;
{
;
}
}
{
// cell的起始偏移
;
;
// 当前偏移
;
// 计算偏移angle
;
;
;
{
;
{
;
}
;
}
@end
|
这里主要是要处理旋转。然后要处理切换cell的attribute设置。mainIndexPath属性用于记录当前显示的cell的位置。willMoveToMainIndexPath记录将要出现的cell的位置。
结尾
这里在慢慢切换时，效果是挺好的，但是如果快速切换卡片，你会发现会有一点点不好之处，就是下一个cell突然出现的。