iOS:使用Table View类(表视图)实现显示数据列表详解

1.将Table View控件(UITableView类的一个实例)添加到视图控制器中,Table View类实现显示数据列表时使用Table View Cell控件(UITableViewCell类的一个实例)来实现每一行。

2.Table View控件的数据来源是所在的视图控制器。
Table View控件需要委托(delegate)和数据源(dataSource)(即将所在视图控制器作为其委托和数据源),Table View将一些工作分配给它的委托和数据源:
委托:用于配置表视图的外观并处理某些用户交互。
数据源:Table View通过数据源获取显示的行数。在Table View上的特定行显示数据;Table View从委托中获取数据。
将Table View所在控制器作为其委托和数据源的方式;
选中该Table View控件,打开编辑器,
在这里插入图片描述
选中Outlets下方dataSource和delegate右边的小圆圈,拖拉至控制器最上方左边第一个小图案建立连接。
连接成功后:
在这里插入图片描述
3.将控制器作为委托和数据源后还需修改与控制器相关联的类的.swift文件,添加该类继承UITableViewDataSource和UITableViewDelegate两个协议,swift里的协议相当于其他语言里的接口,继承协议的类必须实现协议里指定的方法。

在这里插入图片描述
如图,上述两个方法是UITableViewDataSource协议的一部分。第一个方法的第一个参数是选定的Table View(这样可以让一个控制器作为多个Table View的数据来源),这个控制器里只有一个Table View,默认为这一个。第二个参数为选定的分区数。是通过它来返回获取指定分区中的行数。默认的分区数是1。这里返回数组中的元素数量。
第二个方法是Table View显示数据的方法。方法的第二个参数是IndexPath实例,Table View利用IndexPath结构体将分区和行的索引集成到一个对象中,从IndexPath中获取行或分区的索引,只需要访问row属性和section属性,它们都会返回一个整数值。方法中的dequeueReusableCell是一个单元队列,当一个Table View Cell单元滚离屏幕时,它们将被放在这个单元队列中,另一个Table View Cell单元从另一边滚动到屏幕上。if语句里的内容是处理单元队列为空的情况,手动创建一个全新的Table View Cell单元。单元队列具有名为textLabel的UILabel属性,可以设置此值显示字符串,indexPath.row为获取当前行。
4.给每一个Table View Cell添加图像
虽然表视图只有一列,但是默认每个UITableViewCell对象可以包含图像,文本,还有一个可选的附加图标。可以通过两种方法来实现:创建单元时在程序中添加;从storyboard或nil文件中加载它们。
使用代码:
在这里插入图片描述

Table View Cell单元的imageView属性有名为image和highlightedImage两个UIImage类型的属性,设置指定的图像后每行左边显示image属性的图像,选中的行显示highlightedImage属性的图像。
显示结果:
在这里插入图片描述
在xib文件中加载UITableViewCell:
新建一个.xib文件,往里面添加Tab View Cell控件。
在这里插入图片描述
在含有Tab View的视图控制器相对应的.swift文件中找到创建TabViewCell使用的withIdentifier值:
在这里插入图片描述
选中.xib文件中的Tab View Cell并修改特征检查器中的identifier值为上一步的withIdentifier值。
在这里插入图片描述
将该Tab View Cell与具体的UITableViewCell类相关联:
在这里插入图片描述
重写viewDidLoad()方法为:
在这里插入图片描述
3.表视图单元样式
上例的表视图选用默认单元样式(UITableViewCellStyle.default),还可以使用其他样式。
首先了解单元格样式涉及的单元格元素:
图像(image):如果指定的样式包含图像,那么该图像显示在单元的文本左侧位置;
文本标签(text label):单元的主要文本
详细文本标签(detail text label):单元格的次要文本,通常用作解释性的说明或标签。
(1)副标题样式(UITableViewCellStyle.subtitle):,包含详细文本,设定指定行的详细文本内容方式:
在ViewController.swift文件中的tableView(_ tableView:UITableView, cellForRowAt indexPath:IndexPath)方法中添加:
在这里插入图片描述
显示结果:
在这里插入图片描述
(2)UITableViewCellStyle.value1
此样式将文本标签与详细文本标签放在同一行,分别位于单元的两端:
在这里插入图片描述

(3)UITableViewCellStyle.value2
此样式不显示图标,详细文本标签相对于UITableViewCellStyle.value1样式放在文本标签(蓝色显示)的右侧更近的地方:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值