[Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应

本文将演示如何在表格中嵌套另一个表格并使Cell的高度自适应,创建更加强大的布局效果。

在项目文件夹【DemoApp】上点击鼠标右键,弹出右键菜单。

【New File】->【Cocoa Touch Class】->【Next】->

【Class】:CustomizeUITableViewCell ,类名。

【Subclass of】:UITableViewCell ,父类

【Language】:Swift

->【Next】->【Create】
在项目导航区,打开刚刚创建的代码文件【CustomizeUITableViewCell.swift】

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

  1 import UIKit
  2
  3 //引入需要遵循的表格视图的相关协议UITableViewDataSource, UITableViewDelegate
  4 class CustomizeUITableViewCell: UITableViewCell, UITableViewDataSource, UITableViewDelegate {
  5
  6     //添加两个属性:
  7     //1.表格对象
  8     var tableView : UITableView!;
  9     //2.数据来源
 10     var comments : [String] = []
 11
 12     //重写单元格的初始化方法,在该方法中对单元格进行自定义操作
 13     override init(style: UITableViewCellStyle, reuseIdentifier: String?)
 14     {
 15         //首先实现父类的初始化方法
 16         super.init(style: style, reuseIdentifier: reuseIdentifier);
 17
 18         //初始化一个表格对象,并设置表格对象的显示区域
 19         tableView = UITableView(frame: CGRect(x: 20, y: 0, width: 280, height: 90))
 20         //设置表格对象的数据源为当前的视图控制器对象
 21         tableView.dataSource = self
 22         //设置表格对象的代理为当前的视图控制器对象
 23         tableView.delegate = self
 24         //设置不允许内部表格的滚动,
 25         //只允许单元格所属表格可以进行滚动
 26         tableView.isScrollEnabled = false;
 27
 28         //将表格视图添加到根视图中
 29         self.addSubview(tableView)
 30     }
 31
 32     //添加一个代理方法,用来设置表格的行数
 33     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
 34     {
 35         //在此设置表格的行数,与数组的长度保持一致
 36         return comments.count
 37     }
 38
 39     //添加一个代理方法,用来初始化或复用表格中的单元格
 40     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
 41     {
 42         //创建一个字符串常量,作为单元格的复用标识
 43         let identifier = "reusedCell"
 44         //根据复用标识,从表格中获得可以复用的单元格
 45         var cell = tableView.dequeueReusableCell(withIdentifier: identifier)
 46
 47         //如果没有可以复用的单元格
 48         if(cell == nil)
 49         {
 50             //则初始化一个默认样式的单元格,并设置单元格的复用标识
 51             cell = UITableViewCell(style: UITableViewCellStyle.default,
 52                                    reuseIdentifier: identifier)
 53         }
 54
 55         //从数组中获得指定序号的字符串,作为单元格的标题文字。
 56         cell?.textLabel?.text = comments[(indexPath as NSIndexPath).row]
 57         //设置标题文字的字体大小为12
 58         cell?.textLabel?.font = UIFont.systemFont(ofSize: 12)
 59         //设置文字的颜色为灰色
 60         cell?.textLabel?.textColor = UIColor.gray
 61         //设置标签可显示多行文字
 62         cell?.textLabel?.numberOfLines = 0;
 63
 64         return cell!
 65     }
 66
 67     //创建一个类方法,用来根据字符串的长度,计算单元格的高度
 68     class func caculateCellHeight(comment:String)->CGFloat
 69     {
 70         //创建一个字体常量,和单元格的字体大小相同
 71         let font = UIFont.systemFont(ofSize: 12)
 72         //通过计算获得文字的显示区域
 73         let size = comment.boundingRect(with: CGSize(),
 74                                         options: .usesFontLeading,
 75                                         attributes: [NSFontAttributeName:font],
 76                                         context: nil);
 77
 78         //通过显示区域的高度,减去文字至基线的距离,获得文字的高度。
 79         //将显示区域的宽度,除以每行文字的宽度,获得文字的行数,两者相乘获得总的高度。
 80         return (size.height-2*size.origin.y)*(size.width/280.0)
 81     }
 82
 83     //添加一个代理方法,用来设置单元格的高度
 84     func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath)-> CGFloat
 85     {
 86         //根据单元格的序号,获得该单元格将要显示的字符串
 87         let subComments = comments[(indexPath as NSIndexPath).row]
 88         //根据刚刚创建的类方法,计算单元格容纳该字符串所需的高度
 89         let cellHeight =  CustomizeUITableViewCell.caculateCellHeight(comment:subComments)
 90         //然后进行临界判断,从而将高度数值保持在一个合理的范围之内。
 91         if(cellHeight < 30)
 92         {
 93             return 30
 94         }
 95         else
 96         {
 97             return cellHeight
 98         }
 99     }
100
101     //添加一个方法,用来设置表格的数据源。该方法将在外部的表格中被调用。
102     func setCommentsForTable(_ comments:[String])
103     {
104         //设置自定义单元格的数组属性,作为该单元格的表格的数据源。
105         self.comments = comments
106
107         //计算单元格内部的表格的高度
108         //首先初始化一个浮点常量
109         var tableHeight:CGFloat = 0
110         //创建一个循环,遍历表格的数据源。
111         //通过对每个单元格的高度进行累计,合计整个表格的高度。
112         for i in 0 ..< comments.count
113         {
114             tableHeight += CustomizeUITableViewCell.caculateCellHeight(comment:comments[i])
115         }
116
117         //重新绘制表格的显示区域
118         tableView.frame = CGRect(x: 20, y: 0, width: 280, height: tableHeight + 20)
119         //并刷新表格中的数据
120         tableView.reloadData()
121     }
122
123     //添加一个方法,用来获得单元格内部表格的高度数值
124     func getMyHeight()->CGFloat
125     {
126        //用来获得单元格内部表格的高度数值
127         return tableView.frame.size.height
128     }
129
130     //最后添加一个必须实现的初始化方法
131     required init(coder aDecoder: NSCoder)
132     {
133         fatalError("init(code:)has not brrn implomented");
134     }
135 }

在项目导航区,打开视图控制器的代码文件【ViewController.swift】

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

  1 import UIKit
  2
  3 //使当前的视图控制器类,遵循表格的数据源协议UITableViewDataSource和代理协议UITableViewDelegate
  4 class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
  5
  6     //创建一个数组,作为新闻的标题。
  7     var articles = ["SpaceX wants to launch 4,425 satellites",
  8     "Free Workshop in Los Angeles, December 10!",
  9     "Stephen Hawking just gave humanity a due date for finding another planet"]
 10     //创建另一个二维数组,作为新闻的评论内容。
 11     var comments = [["1.Elon Musk‘s SpaceX wants to launch thousands of satellites into space with the aim of providing super-fast global internet coverage, according to a regulatory filing.","2.SpaceX – the company on a mission to colonize Mars – outlined plans to put 4,425 satellites into space in a Federal Communications Commission (FCC) filing from earlier this week.","3.Billionaire Musk – who is also the chief executive of electric car company Tesla – first announced plans for the project in 2015, with an estimated cost of $10 billion."],["1.Join us for a free Rich Dad Education financial workshop in Los Angeles.","2.All attendees are entered to win a tablet. Save your spot now!","3.Dream of working in Australia?"],["1.If humanity survives the rise of artificial intelligence, the ravages of climate change and the threat of nuclear terrorism in the next century, it doesn‘t mean we‘re home free, according to Stephen Hawking.","2.The renowned theoretical physicist has gone as far as providing humanity with a deadline for finding another planet to colonize: We have 1,000 years.","3.Remaining on Earth any longer, Hawking believes, places humanity at great risk of encountering another mass extinction."]]
 12
 13     override func viewDidLoad() {
 14         super.viewDidLoad()
 15         // Do any additional setup after loading the view, typically from a nib.
 16
 17         //获得设备的屏幕尺寸
 18         let screenRect = UIScreen.main.bounds
 19         //创建一个矩形区域,作为表格视图的显示区域
 20         let tableRect = CGRect(x: 0,
 21                                y: 20,
 22                                width: screenRect.size.width,
 23                                height: screenRect.size.height - 20)
 24         //初始化一个指定显示区域的表格对象
 25         let tableView = UITableView(frame: tableRect)
 26
 27         //设置表格对象的数据源为当前的视图控制器对象
 28         tableView.dataSource = self
 29         //设置表格对象的代理为当前的视图控制器对象
 30         tableView.delegate = self
 31
 32         //设置单元格的分隔线为空白
 33         tableView.separatorStyle = UITableViewCellSeparatorStyle.none
 34         //将表格视图添加到根视图中
 35         self.view.addSubview(tableView)
 36     }
 37
 38     //添加一个代理方法,用来设置表格的行数
 39     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
 40     {
 41         //在此设置表格的行数为新闻标题数组长度的两倍。
 42         //偶数行用来显示标题,奇数行用来显示评论
 43         return articles.count * 2
 44     }
 45
 46     //添加一个代理方法,用来初始化或复用表格中的单元格
 47     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)-> UITableViewCell
 48     {
 49         //创建两个字符串常量,作为单元格的复用标识
 50         //1.用于显示新闻标题的偶数行单元格
 51         let cellForArticle = "cellForArticle"
 52         //2.用于显示新闻评论的奇数行的自定义单元格
 53         let cellForComments = "cellForComments"
 54
 55         //创建两个单元格对象
 56         //1.系统默认样式的单元格
 57         var cell1:UITableViewCell?;
 58         //2.包含子表格的自定义单元格
 59         var cell2:CustomizeUITableViewCell?;
 60
 61         //判断偶数行
 62         if (indexPath as NSIndexPath).row % 2 == 0
 63         {
 64             //根据偶数行的复用标识,从表格中获得可以复用的单元格
 65             cell1 = tableView.dequeueReusableCell(withIdentifier: cellForArticle)
 66             //如果没有可以复用的单元格
 67             if cell1 == nil
 68             {
 69                 //则初始化一个默认样式的单元格,并设置单元格的复用标识
 70                 cell1 = UITableViewCell(style: UITableViewCellStyle.default,
 71                                         reuseIdentifier: cellForArticle)
 72             }
 73
 74             //设置单元格的标题文字为新闻的标题
 75             cell1?.textLabel?.text = articles[(indexPath as NSIndexPath).row/2]
 76             //设置标题文字的字体大小为14
 77             cell1?.textLabel?.font = UIFont.systemFont(ofSize: 14)
 78             //设置文字的颜色为白色
 79             cell1?.textLabel?.textColor = UIColor.white
 80             //设置单元格的背景颜色为橙色
 81             cell1?.backgroundColor = UIColor.orange
 82
 83             //返回设置好的偶数行单元格
 84             return cell1!
 85         }
 86         else
 87         {
 88             //处理奇数行的单元格
 89              //根据奇数行的复用标识,从表格中获得可以复用的单元格
 90             cell2 = tableView.dequeueReusableCell(withIdentifier: cellForComments) as? CustomizeUITableViewCell
 91             //如果没有可以复用的单元格
 92             if cell2 == nil
 93             {
 94                 //则初始化一个默认样式的单元格,并设置单元格的复用标识
 95                 cell2 = CustomizeUITableViewCell(style: UITableViewCellStyle.default,
 96                                                  reuseIdentifier: cellForComments)
 97             }
 98
 99             //从数组中获得该单元格将要显示的文字内容
100             let subComments = comments[(indexPath as NSIndexPath).row/2]
101             //然后调用自定义单元格对象的,设置子表格的数据源的方法,
102             //在设置子表格数据源的同时,也使子表格的高度做到自适应。
103             cell2?.setCommentsForTable(subComments)
104
105             //返回奇数行的单元格
106             return cell2!
107         }
108     }
109
110     //添加一个代理方法,用来设置单元格的高度
111     func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
112     {
113         //如果是偶数行的单元格,则设置高度为40
114         if (indexPath as NSIndexPath).row % 2 == 0
115         {
116             return 40
117         }
118         else
119         {
120             //处理奇数行单元格的情况
121             //获得该单元格中的所有文字
122             let subComments = comments[(indexPath as NSIndexPath).row/2]
123             //初始化一个浮点数的变量,用来合计单元格的高度
124             var cellHeight:CGFloat = 0
125             //此处通过相同的方式
126             for i in 0 ..< subComments.count
127             {
128                 //通过累加的方式计算子表格的高度
129                 cellHeight += CustomizeUITableViewCell.caculateCellHeight(comment: subComments[i])
130             }
131
132             //最后返回该高度与20的和,避免单元格中的文字过于拥挤
133             return cellHeight + 20
134         }
135     }
136
137     override func didReceiveMemoryWarning() {
138         super.didReceiveMemoryWarning()
139         // Dispose of any resources that can be recreated.
140     }
141 }

原文地址:https://www.cnblogs.com/strengthen/p/10181992.html

时间: 2024-10-04 02:11:12

[Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应的相关文章

[Swift通天遁地]二、表格表单-(7)电子邮件Mail:实现单元格左右滑动调出功能按钮

本文将演示对单元格进行扩展,当手指在单元格左右滑动时,弹出不同的功能菜单. Github项目:[MGSwipeTableCell] 下载该项目的源代码.文件夹[demo]->文件夹[MailAppDemoSwift]->文件夹[MailAppDemoSwift] ->双击文件[MailAppDemoSwift.xcodeproj]打开示例工程. 选择该项目中的几个文件,拖动到自己的开发项目中.按住[Shift],选择 [MGSwipeButton.h] [MGSwipeButton.m]

[Swift通天遁地]二、表格表单-(8)快速实现表单的输入验证

本文将演示如何快速实现表单是输入验证. 首先确保在项目中已经安装了所需的第三方库. 点击[Podfile],查看安装配置文件. 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'SwiftValidator', :git => 'https://github.com/jpotts18/SwiftVali

[Swift通天遁地]二、表格表单-(10)快速添加日期选择/多选/动作表单/地图等自定义表单

本文将演示创建一个更加强大的表单. Github项目:[Eureka] 下载该项目的源代码. 选择该项目中的几个文件,拖动到自己的开发项目中.按住[Shift],选择 文件夹[Example]->选择 一个自定义的单元格的类文件[CustomCells.swift] 文件夹[Helpers] 文件夹[CustomRows] ->保持默认的设置选项,点击[Finish] 选择资源文件夹[Assets.xcassets],导入项目中需要使用的图片. 在项目导航区,打开视图控制器的代码文件[View

[Swift通天遁地]二、表格表单-(14)实时调整表单元素的激活和失效

本文将演示如何激活或使表单的区域失效. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 现在开始编写代码,实现激活或使表单的区域失效. 1 import UIKit 2 //首先在当前类文件中, 3 //引入以及安装的第三方类库 4 import Eureka 5 6 //修改当前视图控制器类的父类的名称 7 class ViewController: FormViewController { 8 9 override func viewDidLoad() {

[Swift通天遁地]二、表格表单-(16)在表单行内嵌入日期和时间拾取器

本文将演示如何在表单行内嵌拾取器. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 现在开始编写代码,实现在表单行内嵌入日期和时间拾取器. 1 import UIKit 2 //首先在当前类文件中, 3 //引入以及安装的第三方类库 4 import Eureka 5 6 //修改当前视图控制器类的父类的名称 7 class ViewController: FormViewController { 8 9 override func viewDidLoad()

[Swift通天遁地]二、表格表单-(15)自定义表单文本框内容的格式

本文将演示如何设置表单中的输入内容的格式. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 现在开始编写代码,实现设置表单中的输入内容的格式. 1 import UIKit 2 //首先在当前类文件中, 3 //引入以及安装的第三方类库 4 import Eureka 5 6 //创建一个货币类,该类继承自数学格式类,并遵循格式化协议. 7 class CurrencyFormatter : NumberFormatter, FormatterProtocol

[Swift通天遁地]九、拔剑-(1)实现在程序中跳转到微信、App Store、地图

本文将演示如何从应用程序跳跳转到微信.App Store.地图等. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Appz' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文件[DemoA

[Swift通天遁地]九、拔剑吧-(2)在项目中使用大量美观的图标

本文将演示如何在项目中添加大量的字体类型的矢量图标. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'PagingMenuController' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项

表格 表单总结

HTML表格table <table>标签表示这是一个表格,构成元素有<tr>.<td>.<th> HTML表单 **form** <form>标签表示这是一个表单,它的属性有action. method,action表示提交到的地址, method表示提交的方式,有post和get **input** <input>标签表示输入控件,它的属性有type,type的有: text 表示文本框 radio 表示单选框 checkbox