table view是一种多用途的用户操作界面. table view使用组/行结构来展示数据, 而且tableView是可滑动的, 它是scrollView的子类.
tableView的用途:
- 可以将大量数据组织化/结构化展示给用户
- 可以索引化数据
- 可以显示详细的信息, 并将内容按照视觉分组管理
- 可以展示可选的一系列信息
图1-1 多样的tableView
tableView和sectionView有区别, tableView只有一列, 每个section由行组成. 每个section可有sectionHeader和sectionFooter, 可以用来展示图片和文字. 另外tableView也有自己的header和footer, footer显示在最后一行的后面, header显示在第一行的前面. 行和组用number表示, 而且是从0开始.
简介
-
tableView是类
UITableView的实例, 分为两种类型:plain(普通/不分组)和grouded(分组), tableView有两个关联对象是DataSource和delegate, DataSource提供数据和控制section/row的数量, delegate用来定制tableView的外观和tableView的行为. -
tableView的行是cell
- tableView的基本组成元素是cell(行), 它是类
UITableViewCell的实例. cell可以展示图片/文字或其他内容, 可以有不同的背景(选中/非选中) - UIKit提供了四种标准的cell, 每一种cell包含三部分内容(main label, detail label and image), 但三部分内容的布局是有区别的, 另外你还可以创建自己的cell, 以供特殊需求的tableView.
- 当你使用storyboard来创建tableView时, 你需要指定cell是static cell还是dynamic cell
- Static Cell 使用static cell来创建固定行数的tableView, 每行的样式都是不同的. 使用static cell是因为你知道tableView的外观已经固定
- Dynamic Cell 使用dynamic cell是因为你需要用一种类型cell来衍生更多的cell. 因为cell的内容不能确定, 而是由DataSource在运行时决定的, 且cell的数量不确定.
- tableView的基本组成元素是cell(行), 它是类
-
响应行的选中
当用户选中一个cell时, delegate的方法会被调用. delegate会将选中的cell的indexPath创给方法, 用来确定cell对应的数据model信息, 方法的实现可以是跳转新界面或是刷新当前界面. -
在编辑模式下, 你可以进行行的删除, 添加, 移动等操作
tableView的编辑模式时, 行的右侧会用一个绿色的➕和红色的➖来分别代码插入和删除, 另外在一些tableView中清扫cell会显示Delete按钮来提示用户可以删除cell, 在编辑cell时, tableView会发送一系列消息给DataSource和delegate -
使用Storyboard来创建tableView
创建tableView的简单方式是使用storyboard, 往storyboard中拖一个UITableViewController对象. 如果你的应用是由大量tableView组成, 可以参考创建一个Master-Detail型的APP. 运行时, 创建UITableviewController, 并设置它的delegate和DataSource对象.
TableView的样式和Accessory View
tableView的样式有plain和grouped之分, 而且cell也有四种样式. 所以tableView适应性很强.
Table View Styles
两种主要类型:plain和grouped, 区别主要在外观上.
Plain TableView
plain样式的TableView中的cell行会充满整个屏幕, cell的背景颜色是光洁平滑的, 如图1-1所示. plain样式中的section数量可以是一个或多个, 每个section可以有header或者footer标题(或者可以自定义footer/header, 在里面放置图片等UI元素). 当一个section中的行数超过屏幕时, 滑动屏幕, header会靠顶, footer靠底.
图1-1 一个plain样式的tableView
plain风格的tableView有一个变种, 就是索引列表 如图1-2所示. 在tableView的右侧边界显示section的header, 数据根据section的header索引来排列, 右侧的某个索引, tableView会自动滚动到该section, 这样能够在大量内容的时候快速定位内容的位置.
图1-2 将tableView设置为索引列表
另外一种超简单的tableView是可选列表(见图 1-3). 可选列表也是一种plain风格的tableView, 该列表枚举了大量的选项供用户选择, 可以单选也可多选, 当选中一个选项时, 会在该行的右侧显示一个✔️(见图1-3)
图1-3 可选列表
Grouped TableView
grouped TableView同样也是用来展示一系列数据, 但数据会按组区分展示. 如图1-4, 每个section都一个圆角矩形区域, tableView的背景是灰黑色的. 每个section的header和footer可以为文字或者图片. grouped TableView特别适用于来展示层级数据的详细信息, 适用分组来却别不同层级数据的详细信息使用户能够快速了解.
图1-4 分组TableView
如图1-5所示, grouped tableView中的section的header和footer都有相对的位置和大小
图1-5 分组的header和footer
在ipad设备中, grouped tableView的margin随着tableView增大而增大.
cell的几种标准style
除了tableView的两种风格外, UIKit还为你提供了四种类型的cell, 另外你也可以自定义cell来满足你的特殊需求, 但是在自定义之前最好先考虑是否能用系统提供的四种样式来满足你需求. 关于如何创建自定义的cell可以看文章A Closer Look at Table View Cells
-
cell的默认样式是单个title和可选的image, 如图1-6所示. 该样式使用
UITableViewCellStyleDefault常量来表示.
cell的默认样式
-
在图1-7中展示了cell的另外一种样式, 该样式的cell中包含一个主标题和一个副标题, 都是靠左对齐, 副标题灰显且在主标题的下方, 同样image是可选的, 这个样式使用常量
UITableViewCellStyleSubtitle来表示.
图1-7 cell的subtitle样式
-
图1-8展示了cell的第三中样式
UITableViewCellStyleValue1, 该样式的cell有一个左对齐的主标题, 有个右对齐的蓝色副标题, 该样式不能设置image, 这种样式, 经常用在APP的配置列表中
图1-8 cell的value1演示
-
图1-9中展示了cell的最后一种样式
UITableViewCellStyleValue2, 该样式的cell和value1样式类似, 知识主标题和副标题的对齐方式不同, 该样式通常用在通讯录中.
图1-9 cell的通讯录样式(value2样式)
Accessory View
这里有三种标准的附加视图, 也是有Accessory-type常量标识:
| 标准的Accessory view | 描述 |
|---|---|
| [图片上传失败...(image-809fe0-1539337722650)] |
Disclosure indicator—UITableViewCellAccessoryDisclosureIndicator. 你使用disclosure 标签来表示该行可以继续显示下一级内容 |
image
|
Detail disclosure button—UITableViewCellAccessoryDetailDisclosureButton. 你使用该图标来表示该cell可以展示结果或者详细信息 |
image
|
Checkmark—UITableViewCellAccessoryCheckmark. 该图标表示你已经选中了该cell, 这类图标一般在选择列表中出现, |
除了使用上面的标准图片, 你还可以使用自定义view或者其他控件.
使用TableView时, 涉及的类(API)
UIKit为了实现tableView提供了一些类,两个protocol(协议)和一个category(分类). 这些构成了UIKit中table view的api.
Table View
table view是类UITableView的一个实例. 你使用该类中的属性和方法来配置tableView的显示和行为. 同时UITableView是UIScrollView的子类, 所有tableView支持滚动操作.
Table View Controller
类UITableViewController是一个视图控制器, 只是该控制器与普通控制器的区别是:该控制器的self.view是一个tableView. 同时该控制器自动将自己设置为table的DataSource和delegate, 也就是说, UITableViewController需要实现UITableView中的DataSource方法和delegate方法.
Data Source 和 Delegate
- DataSource对象是遵守
UITableViewDataSource协议的一个对象, 该对象提供tableView需要的数据, 决定tableView中的section数和行数(row), 该对象需要实现一些协议方法. - delegate对象是遵守
UITableViewDelegate协议的一个对象, 该对象控制tableView的行为和cell的显示, 它决定了tableView的外观(cell, header, footer等的创建), 该对象需要实现一些协议方法.
类NSIndexPath的扩展
tableView也是用indexPath来定位cell, 好多方法的参数和返回值都是indexpath. UIKit提供了一个类NSIndexPath分类, 该分类可以获取key path, row, section等信息, 具体请看它的API
Table View的cell
UITableView中的cell是类UITableViewCell一个实例. 你可以自定义cell,继承该类.
相关文章
相关demo
- 层级数据:SimpleDrillDown
- tableView中的动画和手势:Table View Animations and Gestures
- tableView的使用-展示大量数据TheElements
网友评论