原文:http://coolketang.com/staticCoding/5a99105017d009003597a964.html

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

3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

2. 然后打开故事板文件。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

3. 点击控件库垂直滚动条,定位集合控件所在的位置。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

4. 选择集合控件。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

5. 然后将集合对象,从控件库中,拖动到视图控制器的根视图。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

6. 接着将集合对象,移动到视图控制器的适当位置。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

7. 点击故事板垂直滚动条,显示视图控制器的底部内容。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

8. 在集合视图定界框右下角处按下鼠标,并向下拖动,使集合视图与根视图的尺寸相同。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

9. 点击故事板垂直滚动条,显示视图控制器的顶部内容。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

10. 在故事板文档框架区,选择集合视图。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

11. 在宽度输入框内,输入集合视图单元格的宽度数值。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

12. 接着在高度输入框内,输入集合视图单元格的高度数值。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

13. 然后从控件库,将图像视图控件,拖动至集合视图内。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

14. 在图像视图右下角按下鼠标,并向左下方拖动,调整图像视图的尺寸。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

15. 在图像视图顶部按下鼠标,并向上方拖动,使图像视图的尺寸,匹配集合视图单元格的大小。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

16. 点击属性标签器图标,显示属性设置面板。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

17. 然后在标识输入框内,输入图像视图的标识值。您可以在代码中,通过标识值,获得图像视图对象。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

18. 在故事板文档框架区,选择集合视图的单元格。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

19. 在标识符输入框内,输入单元格的可重用标识符。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

20. 在故事板文档框架区,选择集合视图。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

21. 在集合视图控件上按下鼠标右键,然后拖动到视图控制器图标,设置集合视图的数据源。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

22. 在弹出的列表中,选择数据源选项,设置集合视图的数据源,为当前的视图控制器类。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

23. 继续在集合视图控件上按下鼠标右键,然后拖动到视图控制器图标,设置集合视图的代理。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

24. 在弹出的列表中,选择代理选项,设置表格的代理。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

25. 在项目导航区,点击打开视图控制器代码文件。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

26. 点击隐藏或显示检查器图标,隐藏检查器面板。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

27. 然后给视图控制器类,添加两个代理协议。一个是集合视图的数据源协议,一个是集合视图的代理协议。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

28. 接着创建一个数组。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

29. 该数组里面的数据,将作为集合数据的来源。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

30. 给数组对象进行赋值。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

31. 添加一个集合视图代理方法,用来设置集合视图的单元格数量。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

32. 添加一个集合视图代理方法,用来初始化和返回集合视图的单元格,是最重要的一个代理方法。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

33. 创建一个字符串,作为单元格的标识符。也就是您在故事板中,给单元格控件设置的那个重用标识符。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

34. 单元格的标识符,可以看作是一种重用机制,此方法可以从,所有已经开辟内存的单元格里面,选择一个具有同样标识符的、空闲的单元格。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

35. 通过您在故事板中设置的标识值,获得单元格中的图像视图控件。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

36. 设置图像视图默认为半透明。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

37. 根据表格行的编号,从数组中获得对应的图像名称。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

38. 将加载后的图像,指定给图像视图。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

39. 最后返回设置好的单元格对象。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

40. 添加一个代理方法,用来处理单元格的点击事件。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

41. 根据单元格的编号,获得被点击的单元格。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

42. 通过您在故事板中设置的标识值,获得单元格中的图像视图。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

43. 将图像视图的透明度,设置为完全不透明。最后点击[编译并运行]按钮,启动模拟器预览项目。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

44. 鼠标向上拖动,观察下方的集合视图。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

45. 点击图像,观察单元格的点击事件。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

46. 继续点击图像,观察单元格的点击事件。 
3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

3.12 在Storyboard中使用集合控件 [原创iOS开发-Xcode教程]

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


相关文章: