[Swift通天遁地]九、拔剑吧-(11)创建强大的Pinterest风格的瀑布流界面
作者：互联网
本文将演示如何创建强大的Pinterest风格的瀑布流界面。
Github项目：【demonnico/PinterestSwift】，下载并解压文件。
【PinterestSwift】文件夹->【CHTCollectionViewWatrfallLayout.swift】文件
->按下【Command】，继续选择【Extension.swift】->继续选择【Macro.swift】
->继续选择【NTHorizontalPagViewCell.swift】
->继续选择【NTTransition.swift】
->继续选择【NTTransitionProtocol.swift】
->继续选择【NTWaterfallViewCell.swift】
将上面选择的文件，拖入到自己的项目中。
在弹出的文件导入确认窗口中，点击【Finish】完成按钮，确认文件的导入。
在项目文件夹上点击鼠标右键，弹出右键菜单。
【New File】->【Cocoa Touch】->【Next】->
【Class】：HorizontalPageViewController
【Subclass of】:UICollectionViewController
【Language】：Swift
->【Next】->【Create】
点击打开【HorizontalPageViewController.swift】,
现在开始编写代码，创建一个自定义的集合视图。
1 import Foundation
2 import UIKit
3
4 //初始化一个字符串常量，作为集合单元格的复用标识。
5 let horizontalPageViewCellIdentify = "horizontalPageViewCellIdentify"
6
7 //给当前的类添加两个协议，使用第一个协议中的方法，返回页面切换所需的集合视图，
8 //使用第二个协议的方法，设置集合视图的单元格的偏移距离。
9 class HorizontalPageViewController : UICollectionViewController, NTTransitionProtocol ,NTHorizontalPageViewControllerProtocol
10 {
11 //添加一个字符串数组属性，作为集合视图每个单元格显示的图片内容。
12 var imageNameList : Array <NSString> = []
13 //添加一个属性，作为集合视图单元格的偏移距离。
14 var pullOffset = CGPoint.zero
15
16 //添加一个初始化方法，用来设置集合视图的布局。
17 init(collectionViewLayout layout: UICollectionViewLayout!, currentIndexPath indexPath: IndexPath)
18 {
19 super.init(collectionViewLayout:layout)
20 //获得集合视图控制器的集合视图。
21 let collectionView :UICollectionView = self.collectionView!;
22 //设置集合视图在页面跳转时自动停止滚动
23 collectionView.isPagingEnabled = true
24 //使用第三方类库提供的集合单元格类，注册集合视图的单元格，并设置单元格的复用标识。
25 collectionView.register(NTHorizontalPageViewCell.self, forCellWithReuseIdentifier: horizontalPageViewCellIdentify)
26 //通过扩展方法，把一个对象与另外一个对象进行关联。
27 //这需要使用到运行时函数，包含四个参数：
28 //源对象、关键字、关联的对象、一个关联策略。
29 collectionView.setToIndexPath(indexPath)
30
31 //调用集合视图对象的序列刷新方法，该方法可以执行多个插入、删除、重新加载、移动等操作。
32 collectionView.performBatchUpdates({collectionView.reloadData()}, completion: { finished in
33 if finished
34 {
35 //调用集合视图对象的滑动到指定项目方法，在垂直方向上，滑动到指定索引的单元格。
36 collectionView.scrollToItem(at: indexPath,at:.centeredHorizontally, animated: false)
37 }});
38 }
39
40 override func viewDidLoad()
41 {
42 super.viewDidLoad()
43 }
44
45 //添加一个代理方法，用来初始化或复用集合视图中的单元格。
46 override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
47 {
48 //根据复用标识，从集合视图中获取可以复用的单元格。
49 let collectionCell: NTHorizontalPageViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: horizontalPageViewCellIdentify, for: indexPath) as! NTHorizontalPageViewCell
50
51 //设置集合视图的扩展设置，从而往集合视图中添加一个图像视图。
52 collectionCell.imageName = self.imageNameList[(indexPath as NSIndexPath).row] as String
53 //初始化集合视图的扩展属性。
54 collectionCell.tappedAction = {}
55 //给集合视图添加一个下拉动作。
56 collectionCell.pullAction = { offset in
57 //当接收到下拉事件时，
58 self.pullOffset = offset
59 //在导航控制器的堆栈中，返回上一个页面。
60 self.navigationController!.popViewController(animated: true)
61 }
62 //在绘制周期开始前，首先对集合视图进行布局，
63 collectionCell.setNeedsLayout()
64
65 //最后返回设置好的集合视图单元格。
66 return collectionCell
67 }
68
69 //添加一个代理方法，用来设置集合视图的单元格的数据。
70 override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
71 {
72 return imageNameList.count
73 }
74
75 //添加一个代理方法，用来返回页面切换所需的集合视图
76 func transitionCollectionView() -> UICollectionView!
77 {
78 return collectionView
79 }
80
81 //添加一个代理方法，设置集合视图的单元格的偏移距离。
82 func pageViewCellScrollViewContentOffset() -> CGPoint
83 {
84 return self.pullOffset
85 }
86
87 //添加一个必须实现的初始化方法
88 required init?(coder aDecoder: NSCoder)
89 {
90 fatalError("init(coder:) has not been implemented")
91 }
92 }
在左侧的项目导航区，打开视图控制器的代码文件【ViewController.swift】
现在开始编写代码，将系统默认的视图控制器，修改为另一个集合视图控制器，
作为瀑布流的载体。
1 import UIKit
2
3 let waterfallViewCellIdentify = "waterfallViewCellIdentify"
4
5 //创建一个遵循导航控制器代理协议的类
6 class NavigationControllerDelegate: NSObject, UINavigationControllerDelegate
7 {
8 //添加一个方法，用来处理导航控制器页面之间的跳转事件，
9 //并返回页面跳转的动画样式。
10 func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationController.Operation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?{
11
12 //初始化三个对象，作为导航控制器跳转前的页面。
13 let fromVCConfromA = (fromVC as? NTTransitionProtocol)
14 let fromVCConfromB = (fromVC as? NTWaterFallViewControllerProtocol)
15 let fromVCConfromC = (fromVC as? NTHorizontalPageViewControllerProtocol)
16
17 //初始化三个对象，作为导航控制器跳转后的页面。
18 let toVCConfromA = (toVC as? NTTransitionProtocol)
19 let toVCConfromB = (toVC as? NTWaterFallViewControllerProtocol)
20 let toVCConfromC = (toVC as? NTHorizontalPageViewControllerProtocol)
21
22 //判断当从瀑布流页面，跳转到详情页面，或者从详情页面，返回瀑布流页面时的跳转样式。
23 if((fromVCConfromA != nil)&&(toVCConfromA != nil)&&(
24 (fromVCConfromB != nil && toVCConfromC != nil)||(fromVCConfromC != nil && toVCConfromB != nil))){
25 //初始化一个动画跳转对象
26 let transition = NTTransition()
27 //根据导航控制器的页面跳转的类型是否为出栈操作，
28 //来设置跳转对象的布尔属性。
29 transition.presenting = operation == .pop
30 //最后返回设置好的切换对象。
31 return transition
32 }
33 else
34 {
35 return nil
36 }
37 }
38 }
39
40 //修改当前视图控制器的父类，将父类修改为集合视图控制器，
41 //并遵循瀑布流布局协议、动画切换协议、以及瀑布流视图控制器协议。
42 class ViewController:UICollectionViewController, CHTCollectionViewDelegateWaterfallLayout, NTTransitionProtocol, NTWaterFallViewControllerProtocol{
43
44 //初始化一个字符串数组，作为集合视图所有图像的名称。
45 var imageNameList : Array <NSString> = []
46 //初始化一个导航控制器代理对象。
47 let delegateHolder = NavigationControllerDelegate()
48 override func viewDidLoad()
49 {
50 super.viewDidLoad()
51 // Do any additional setup after loading the view, typically from a nib.
52 //设置当前导航控制器的代理对象。
53 self.navigationController!.delegate = delegateHolder
54
55 var index = 1
56 //添加一个循环语句，用来往数组中添加图片的名称。
57 while(index<14)
58 {
59 //根据循环的索引，初始化一个由图片名称组成的字符串数组。
60 let imageName = NSString(format: "Pic%d.png", index)
61 //将图片名称添加到数组中。
62 imageNameList.append(imageName)
63 index += 1
64 }
65
66 //获得当前集合视图控制器中的集合视图。
67 let collection :UICollectionView = collectionView!
68 //设置集合视图的显示区域与屏幕相同，在此使用了宏定义常量。
69 collection.frame = screenBounds
70 //设置集合视图的布局样式
71 collection.setCollectionViewLayout(CHTCollectionViewWaterfallLayout(), animated: false)
72 //设置集合视图的背景颜色为黑色
73 collection.backgroundColor = UIColor.black
74 //给集合视图注册复用标识符
75 collection.register(NTWaterfallViewCell.self, forCellWithReuseIdentifier: waterfallViewCellIdentify)
76 //重新加载集合视图中的数据
77 collection.reloadData()
78 }
79
80 //添加一个方法，用来设置单元格的尺寸
81 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize
82 {
83 //加载数组中的指定名称的图片
84 let image:UIImage! = UIImage(named: self.imageNameList[(indexPath as NSIndexPath).row] as String)
85 //单元格的宽度时固定的，在此根据单元格的高度和图片的宽度，获得等比例的图片高度。
86 let imageHeight = image.size.height*gridWidth/image.size.width
87
88 //返回计算好的图片尺寸
89 return CGSize(width: gridWidth, height: imageHeight)
90 }
91
92 //添加一个代理方法，用来初始化或复用集合视图中的单元格。
93 override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
94 {
95 //根据复用标识，从集合视图中获取可以复用的单元格。
96 let collectionCell: NTWaterfallViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: waterfallViewCellIdentify, for: indexPath) as! NTWaterfallViewCell
97 //设置集合视图的扩展方法，从而往集合视图中添加一个图像视图。
98 collectionCell.imageName = self.imageNameList[(indexPath as NSIndexPath).row] as String
99 //对单元格在绘制之前进行重新布局。并返回设置好的单元格。
100 collectionCell.setNeedsLayout()
101 return collectionCell
102 }
103
104 //添加一个代理方法，用来设置单元格的数量
105 override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
106 {
107 return imageNameList.count
108 }
109
110 //添加一个代理方法，用来处理单元格的触摸事件。
111 override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
112 {
113 //初始化一个视图控制器，作为即将显示的细节页面。
114 let pageViewController =
115 HorizontalPageViewController(collectionViewLayout: pageViewControllerLayout(), currentIndexPath:indexPath)
116 //设置控制器的图片名称列表属性
117 pageViewController.imageNameList = imageNameList
118 //在集合视图中，跳转到指定位置的单元格
119 collectionView.setToIndexPath(indexPath)
120 //在导航控制器的堆栈中，压入新的集合控制器。
121 navigationController!.pushViewController(pageViewController, animated: true)
122 }
123
124 //添加一个方法，用来设置集合视图的布局方式
125 func pageViewControllerLayout () -> UICollectionViewFlowLayout
126 {
127 //初始化一个集合视图流布局对象。
128 let flowLayout = UICollectionViewFlowLayout()
129 //根据导航栏的显示状态，创建集合视图的尺寸。
130 let itemSize = self.navigationController!.isNavigationBarHidden ?
131 CGSize(width: screenWidth, height: screenHeight+20) : CGSize(width: screenWidth, height: screenHeight-navigationHeaderAndStatusbarHeight)
132 //设置集合视图的单元格的尺寸。
133 flowLayout.itemSize = itemSize
134 //设置单元格之间的最小行距
135 flowLayout.minimumLineSpacing = 0
136 //设置同一行的单元格之间的最小间距。
137 flowLayout.minimumInteritemSpacing = 0
138 //设置布局对象的滚动方向为水平方向。
139 flowLayout.scrollDirection = .horizontal
140
141 //返回设置好的布局对象
142 return flowLayout
143 }
144
145 //添加一个方法，用来返回进行动态切换的集合视图
146 func transitionCollectionView() -> UICollectionView!
147 {
148 return collectionView
149 }
150
151 func viewWillAppearWithPageIndex(_ pageIndex : NSInteger)
152 {
153
154 }
155
156 override func didReceiveMemoryWarning() {
157 super.didReceiveMemoryWarning()
158 // Dispose of any resources that can be recreated.
159 }
160 }
在项目导航区，打开故事板文件。
在故事板中添加一个集合视图控制器，首先选择并删除默认的视图控制器。
选择默认的视图控制器，【Command】+【Delete】删除选择的视图控制器。
点击控件库图标，打开控件库的列表窗口。双击集合视图控制器，往故事板中插入一个控制器。
依次点击：【Editor】编辑器->【Embed In】植入->【Navigation Controller】导航控制器
将集合视图控制器植入导航控制器。植入导航控制器。
打开检查器设置面板，点击属性检查器图标，进入属性设置面板。
勾选【Is Initial View Controller】是否初始视图控制器。
将导航控制器修改为项目的初始控制器。
选择集合视图控制器，点击身份检查器图标，打开身份设置面板。
在类名输入框内，输入所绑定的自定义集合视图类。
【Class】：ViewController
模拟器启动后，由下往上拖动，可以浏览瀑布流底部的内容。
在详情页面的顶部往下方拖动，
通过下拉动作，返回瀑布流页面。
标签：11,控制器,Pinterest,collectionView,单元格,视图,let,集合,Swift 来源： https://www.cnblogs.com/strengthen/p/10357522.html