3.11 在Storyboard中使用表格控件 [iOS开发-Xcode教程]

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. 在X输入框内，输入图像视图在单元格内的横向坐标值。

image

14. 在Y输入框内，输入图像视图在单元格内的纵向坐标值。

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

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

image

image

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