2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]

1. 本节课将为您演示,如何在表格中嵌入另一个表格,从而创建更加强大的布局效果。首先在项目文件夹上点击鼠标右键,弹出右键菜单。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第1张图片
image

2. 在弹出的右键菜单中,选择创建新文件选项。我们将创建一个自定义的单元格,在此单元格中添加另一个表格,作为单元格的子元素。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第2张图片
image

3. 在弹出的文件模板选择窗口中,保持默认的选项,然后点击下一步按钮,进入下一步设置页面。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第3张图片
image

4. 在类名输入框内,输入类的名称。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第4张图片
image

5. 点击下一步按钮,进入下一步设置页面。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第5张图片
image

6. 保持默认的文件存储位置 ,点击创建按钮,完成文件的创建。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第6张图片
image

7. 现在开始编写代码,创建一个自定义的单元格的类。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第7张图片
image

8. 首先引入需要遵循的表格视图的相关协议。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第8张图片
image

9. 接着添加两个属性,一个是表格对象,另一个作为表格的数据来源。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第9张图片
image

10. 然后重写单元格的初始化方法,在该方法中对单元格进行自定义操作。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第10张图片
image

11. 首先实现父类的初始化方法。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第11张图片
image

12. 接着初始化一个表格对象,并设置表格对象的显示区域。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第12张图片
image

13. 设置表格对象的数据源和代理,为当前的视图控制器对象。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第13张图片
image

14. 接着设置不允许内部表格的滚动,只允许单元格所属表格可以进行滚动。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第14张图片
image

15. 将表格视图添加到根视图中。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第15张图片
image

16. 添加一个代理方法,用来设置表格的行数,在此设置表格的行数,与数组的长度保持一致。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第16张图片
image

17. 添加一个代理方法,用来初始化或复用表格中的单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第17张图片
image

18. 创建一个字符串常量,作为单元格的复用标识,然后根据复用标识,从表格中获取可以复用的单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第18张图片
image

19. 如果没有可以复用的单元格,则初始化一个默认样式的单元格,并设置单元格的复用标识。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第19张图片
image

20. 从数组中获得指定序号的字符串,作为单元格的标题文字。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第20张图片
image

21. 接着设置标题文字的字体大小为12。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第21张图片
image

22. 设置文字的颜色为灰色。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第22张图片
image

23. 然后设置标签可显示多行文字。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第23张图片
image

24. 接着创建一个类方法,用来根据字符串的长度,计算单元格的高度。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第24张图片
image

25. 创建一个字体常量,和单元格文字的字体大小相同。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第25张图片
image

26. 然后通过计算,获得文字的显示区域。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第26张图片
image

27. 通过将显示区域的高度,减去文字至基线的距离,获得文字的高度。将显示区域的宽度,除以每行文字的宽度200,获得文字的行数。两者相乘得到总的高度。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第27张图片
image

28. 添加一个代理方法,用来设置单元格的高度。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第28张图片
image

29. 首先根据单元格的序号,获得该单元格将要显示的字符串。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第29张图片
image

30. 接着根据刚刚创建的类方法,计算单元格容纳该字符串所需的高度。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第30张图片
image

31. 然后进行临界判断,从而将高度数值保持在一个合理的范围之内。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第31张图片
image

32. 添加一个方法,用来设置表格的数据源。该方法将在外部的表格中被调用。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第32张图片
image

33. 设置自定义单元格的数组属性,作为该单元格的表格的数据源。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第33张图片
image

34. 接着计算单元格内部的表格的高度,首先初始化一个浮点常量。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第34张图片
image

35. 然后创建一个循环,遍历表格的数据源。通过对每个单元格的高度进行累计,合计整个表格的高度。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第35张图片
image

36. 接着重新绘制表格的显示区域,并刷新表格中的数据。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第36张图片
image

37. 继续添加一个方法,用来获得单元格内部表格的高度数值。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第37张图片
image

38. 最后添加一个必须实现的初始化方法。然后在左侧的项目导航区,打开视图控制器的代码文件。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第38张图片
image

39. 现在开始创建处于外部的表格视图,并在表格中使用刚刚自定义的包含表格的单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第39张图片
image

40. 首先使当前的视图控制器类,遵循表格视图的数据源协议和代理协议。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第40张图片
image

41. 接着创建一个数组,作为新闻的标题。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第41张图片
image

42. 创建另一个二维数组,作为新闻的评论内容。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第42张图片
image

43. 获得设备的屏幕尺寸。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第43张图片
image

44. 然后创建一个矩形区域,作为表格视图的显示区域。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第44张图片
image

45. 接着初始化一个指定显示区域的表格对象。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第45张图片
image

46. 设置表格对象的数据源和代理,为当前的视图控制器对象。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第46张图片
image

47. 设置单元格的分隔线为空白。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第47张图片
image

48. 最后将表格视图添加到根视图中。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第48张图片
image

49. 添加一个代理方法,用来设置表格的行数,在此设置表格的行数为新闻标题数组长度的两倍。偶数行用来显示标题,奇数行用来显示评论。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第49张图片
image

50. 添加一个代理方法,用来初始化或复用表格中的单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第50张图片
image

51. 创建两个字符串常量,作为单元格的复用标识。第一个用于显示新闻标题的偶数行单元格,另一个用于显示新闻评论的奇数行的自定义单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第51张图片
image

52. 接着创建两个单元格对象,一个是系统默认样式的单元格,另一个是包含子表格的自定义单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第52张图片
image

53. 判断如果是偶数行,则执行之后的代码。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第53张图片
image

54. 根据偶数行的复用标识,从表格中获取可以复用的单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第54张图片
image

55. 如果没有可以复用的单元格,则初始化一个默认样式的单元格,并设置单元格的复用标识。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第55张图片
image

56. 设置单元格的标题文字为新闻的标题。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第56张图片
image

57. 设置标题文字的字体大小为14。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第57张图片
image

58. 接着设置标题文字的颜色为白色。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第58张图片
image

59. 同时设置单元格的背景颜色为橙色。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第59张图片
image

60. 返回设置好的偶数行的单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第60张图片
image

61. 接着处理奇数行的单元格,首先根据奇数行的复用标识,从表格中获取可以复用的单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第61张图片
image

62. 如果没有可以复用的单元格,则初始化一个包含子表格的自定义单元格,并设置单元格的复用标识。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第62张图片
image

63. 从数组中获得该单元格将要显示的文字内容。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第63张图片
image

64. 然后调用自定义单元格对象的,设置子表格的数据源的方法,在设置子表格数据源的同时,也使子表格的高度做到自适应。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第64张图片
image

65. 最后返回奇数行的单元格。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第65张图片
image

66. 添加一个代理方法,用来设置单元格的高度。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第66张图片
image

67. 判断如果是偶数行的单元格,则设置高度为40。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第67张图片
image

68. 接着处理奇数行单元格的情况。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第68张图片
image

69. 获得该单元格中的所有文字。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第69张图片
image

70. 然后初始化一个浮点数的变量,用来合计单元格的高度。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第70张图片
image

71. 此处使用相同的方式,通过累加的方式计算子表格的高度。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第71张图片
image

72. 最后返回该高度的数值与20的和,避免单元格中的文字过于拥挤。接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第72张图片
image

73. 在弹出的模拟器中,观察表中表的排版效果。最后点击此处的[停止]按钮,关闭模拟器,并结束本节课程。

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第73张图片
image

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第74张图片
image

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

2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器]_第75张图片
apps8 2.png

你可能感兴趣的:(2.3 在表格中嵌套另一个表格并使Cell的高度自适应 [iOS开发中的神兵利器])