3.12 在Storyboard中使用集合控件 [iOS开发-X

1. 本节课将为您演示，集合控件在故事板中的使用。首先打开之前创建的单视图项目。

image

2. 然后打开故事板文件。

image

3. 点击控件库垂直滚动条，定位集合控件所在的位置。

image

4. 选择集合控件。

image

5. 然后将集合对象，从控件库中，拖动到视图控制器的根视图。

image

6. 接着将集合对象，移动到视图控制器的适当位置。

image

7. 点击故事板垂直滚动条，显示视图控制器的底部内容。

image

8. 在集合视图定界框右下角处按下鼠标，并向下拖动，使集合视图与根视图的尺寸相同。

image

9. 点击故事板垂直滚动条，显示视图控制器的顶部内容。

image

10. 在故事板文档框架区，选择集合视图。

image

11. 在宽度输入框内，输入集合视图单元格的宽度数值。

image

12. 接着在高度输入框内，输入集合视图单元格的高度数值。

image

13. 然后从控件库，将图像视图控件，拖动至集合视图内。

image

14. 在图像视图右下角按下鼠标，并向左下方拖动，调整图像视图的尺寸。

image

15. 在图像视图顶部按下鼠标，并向上方拖动，使图像视图的尺寸，匹配集合视图单元格的大小。

image

16. 点击属性标签器图标，显示属性设置面板。

image

17. 然后在标识输入框内，输入图像视图的标识值。您可以在代码中，通过标识值，获得图像视图对象。

image

18. 在故事板文档框架区，选择集合视图的单元格。

image

19. 在标识符输入框内，输入单元格的可重用标识符。

image

20. 在故事板文档框架区，选择集合视图。

image

21. 在集合视图控件上按下鼠标右键，然后拖动到视图控制器图标，设置集合视图的数据源。

image

22. 在弹出的列表中，选择数据源选项，设置集合视图的数据源，为当前的视图控制器类。

image

23. 继续在集合视图控件上按下鼠标右键，然后拖动到视图控制器图标，设置集合视图的代理。

image

24. 在弹出的列表中，选择代理选项，设置表格的代理。

image

25. 在项目导航区，点击打开视图控制器代码文件。

image

26. 点击隐藏或显示检查器图标，隐藏检查器面板。

image

27. 然后给视图控制器类，添加两个代理协议。一个是集合视图的数据源协议，一个是集合视图的代理协议。

image

28. 接着创建一个数组。

image

29. 该数组里面的数据，将作为集合数据的来源。

image

30. 给数组对象进行赋值。

image

31. 添加一个集合视图代理方法，用来设置集合视图的单元格数量。

image

32. 添加一个集合视图代理方法，用来初始化和返回集合视图的单元格，是最重要的一个代理方法。

image

33. 创建一个字符串，作为单元格的标识符。也就是您在故事板中，给单元格控件设置的那个重用标识符。

image

34. 单元格的标识符，可以看作是一种重用机制，此方法可以从，所有已经开辟内存的单元格里面，选择一个具有同样标识符的、空闲的单元格。

image

35. 通过您在故事板中设置的标识值，获得单元格中的图像视图控件。

image

36. 设置图像视图默认为半透明。

image

37. 根据表格行的编号，从数组中获得对应的图像名称。

image

38. 将加载后的图像，指定给图像视图。

image

39. 最后返回设置好的单元格对象。

image

40. 添加一个代理方法，用来处理单元格的点击事件。

image

41. 根据单元格的编号，获得被点击的单元格。

image

42. 通过您在故事板中设置的标识值，获得单元格中的图像视图。

image

43. 将图像视图的透明度，设置为完全不透明。最后点击[编译并运行]按钮，启动模拟器预览项目。

image

45. 模拟器启动后，点击图像，观察单元格的点击事件。

image

46. 继续点击图像，观察单元格的点击事件。

image

47. 最后点击[停止]按钮，关闭模拟器，并结束本节课程。

image

image

本文整理自：《互动教程 for Xcode9 & Swift4》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1063100471，或扫描本页底部的二维码。课程配套素材下载地址：资料下载