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



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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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




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

0