原文:http://coolketang.com/staticCoding/5a99105017d009003597a964.html
1. 本节课将为您演示,集合控件在故事板中的使用。首先打开之前创建的单视图项目。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/a3eeffa444995079a7ce58c452a883a9.webp?x-image-process=image/format,png)
2. 然后打开故事板文件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/8c19764dd7cc337c38887fbba3c87a5f.webp?x-image-process=image/format,png)
3. 点击控件库垂直滚动条,定位集合控件所在的位置。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/b99aaba52e1316b39413e4d1e95f604f.webp?x-image-process=image/format,png)
4. 选择集合控件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/4826327158623f1785e5e9f1679f783e.webp?x-image-process=image/format,png)
5. 然后将集合对象,从控件库中,拖动到视图控制器的根视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/367f7e333f1c8926847f57571a66d1e5.webp?x-image-process=image/format,png)
6. 接着将集合对象,移动到视图控制器的适当位置。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/d2edf58302122596f5695f68eaa98b3d.webp?x-image-process=image/format,png)
7. 点击故事板垂直滚动条,显示视图控制器的底部内容。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/b9ae3999412e65aa62377ad03b84d7c8.webp?x-image-process=image/format,png)
8. 在集合视图定界框右下角处按下鼠标,并向下拖动,使集合视图与根视图的尺寸相同。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/d6021fbadc6006c3be440773a1c750c9.webp?x-image-process=image/format,png)
9. 点击故事板垂直滚动条,显示视图控制器的顶部内容。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/bd0058005adeaab4ff4f70e0d0869a2f.webp?x-image-process=image/format,png)
10. 在故事板文档框架区,选择集合视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/1a677fd89c3d042652dc1ec9333969db.webp?x-image-process=image/format,png)
11. 在宽度输入框内,输入集合视图单元格的宽度数值。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/04988b680297a26bc066514089cda603.webp?x-image-process=image/format,png)
12. 接着在高度输入框内,输入集合视图单元格的高度数值。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/54e7edd40872d41f3c7cc3941f9cba0b.webp?x-image-process=image/format,png)
13. 然后从控件库,将图像视图控件,拖动至集合视图内。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/93c01ef3e01a44ea2e74b52b5beed1c6.webp?x-image-process=image/format,png)
14. 在图像视图右下角按下鼠标,并向左下方拖动,调整图像视图的尺寸。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/e08542b60eb133b3113bb2709f9d8a14.webp?x-image-process=image/format,png)
15. 在图像视图顶部按下鼠标,并向上方拖动,使图像视图的尺寸,匹配集合视图单元格的大小。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/3ad829cacbbfeb3dda5833806301d0a5.webp?x-image-process=image/format,png)
16. 点击属性标签器图标,显示属性设置面板。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/73485769eba473672eed3f149da5ce64.webp?x-image-process=image/format,png)
17. 然后在标识输入框内,输入图像视图的标识值。您可以在代码中,通过标识值,获得图像视图对象。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/61f745429228dc2cf5b613c874190e8c.webp?x-image-process=image/format,png)
18. 在故事板文档框架区,选择集合视图的单元格。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/3e997cf743e38f30b8502ac00a02f535.webp?x-image-process=image/format,png)
19. 在标识符输入框内,输入单元格的可重用标识符。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/d2e938e5042fe5602589a27e243bd163.webp?x-image-process=image/format,png)
20. 在故事板文档框架区,选择集合视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/8027fa13b9e1468970722d4667942d30.webp?x-image-process=image/format,png)
21. 在集合视图控件上按下鼠标右键,然后拖动到视图控制器图标,设置集合视图的数据源。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/3b931976cd843f3ebd865ed2995ec0ea.webp?x-image-process=image/format,png)
22. 在弹出的列表中,选择数据源选项,设置集合视图的数据源,为当前的视图控制器类。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f449f2cc94eef3452e00be867754f656.webp?x-image-process=image/format,png)
23. 继续在集合视图控件上按下鼠标右键,然后拖动到视图控制器图标,设置集合视图的代理。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/196a2fb5cd09bd5b21971b7a264ddb8f.webp?x-image-process=image/format,png)
24. 在弹出的列表中,选择代理选项,设置表格的代理。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/23a7373ad250460f3232dd538c6206c6.webp?x-image-process=image/format,png)
25. 在项目导航区,点击打开视图控制器代码文件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/5bbc95656e4c29429fb38991034ebd6b.webp?x-image-process=image/format,png)
26. 点击隐藏或显示检查器图标,隐藏检查器面板。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/a657c7136b0833d63ca2c6da45f889e9.webp?x-image-process=image/format,png)
27. 然后给视图控制器类,添加两个代理协议。一个是集合视图的数据源协议,一个是集合视图的代理协议。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/97254fc6a2b3e74beb5cd0f9b2cf83a6.webp?x-image-process=image/format,png)
28. 接着创建一个数组。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/58a913f37b2742d61ba547cc1a637160.webp?x-image-process=image/format,png)
29. 该数组里面的数据,将作为集合数据的来源。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/df69f7a0ef58b7a1fd479732aaef5732.webp?x-image-process=image/format,png)
30. 给数组对象进行赋值。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/400f42144a96502243e9e194e280f577.webp?x-image-process=image/format,png)
31. 添加一个集合视图代理方法,用来设置集合视图的单元格数量。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/741764a433fbac054015c402334e2641.webp?x-image-process=image/format,png)
32. 添加一个集合视图代理方法,用来初始化和返回集合视图的单元格,是最重要的一个代理方法。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/364cf3d8349f1f32e26b5e5f19697436.webp?x-image-process=image/format,png)
33. 创建一个字符串,作为单元格的标识符。也就是您在故事板中,给单元格控件设置的那个重用标识符。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/280980b09a5bb90204304f34f821a1a8.webp?x-image-process=image/format,png)
34. 单元格的标识符,可以看作是一种重用机制,此方法可以从,所有已经开辟内存的单元格里面,选择一个具有同样标识符的、空闲的单元格。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/78105cb0f95d236d75aa911878778b00.webp?x-image-process=image/format,png)
35. 通过您在故事板中设置的标识值,获得单元格中的图像视图控件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/e3e3c3446b365d85058439bb03966501.webp?x-image-process=image/format,png)
36. 设置图像视图默认为半透明。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/78e92ed4f3f97849ed7c98b62751f051.webp?x-image-process=image/format,png)
37. 根据表格行的编号,从数组中获得对应的图像名称。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f16b309f6c08157ba1256ab9547df6d5.webp?x-image-process=image/format,png)
38. 将加载后的图像,指定给图像视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/230a2e2e75fcd6c52c4d61f88c8b3d2e.webp?x-image-process=image/format,png)
39. 最后返回设置好的单元格对象。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/9f1ec19ceadb94894c5d3ed3b1b9ef67.webp?x-image-process=image/format,png)
40. 添加一个代理方法,用来处理单元格的点击事件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/05df80b8e6226efafe82f0b9799d7e57.webp?x-image-process=image/format,png)
41. 根据单元格的编号,获得被点击的单元格。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/0bd5610cb4451c830b7b5fbd994a5368.webp?x-image-process=image/format,png)
42. 通过您在故事板中设置的标识值,获得单元格中的图像视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f8ae8b6cbc4facce71a09477bb29f35a.webp?x-image-process=image/format,png)
43. 将图像视图的透明度,设置为完全不透明。最后点击[编译并运行]按钮,启动模拟器预览项目。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/fc01be60906428ac9695ac6c86b17e36.webp?x-image-process=image/format,png)
44. 鼠标向上拖动,观察下方的集合视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/ae802c823badb1eb7d84ad6a28a13ea1.webp?x-image-process=image/format,png)
45. 点击图像,观察单元格的点击事件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f89328b09d9ba2123c5ed947cc659d6d.webp?x-image-process=image/format,png)
46. 继续点击图像,观察单元格的点击事件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/bc6e859983fee9a2086c3999725ba940.webp?x-image-process=image/format,png)
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/a373eb8e5934087e701dea2f626a1e4b.webp?x-image-process=image/format,png)
本文整理自:《互动教程 for Xcode9 & Swift4》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1063100471,或扫描本页底部的二维码。课程配套素材下载地址:资料下载