首页 / 移动开发 / IOS / iOS开发之表视图详解

本文详细介绍了表视图的用法。具体如下：

概述

表视图组成

表视图是iOS开发中最重要的视图，它以列表的形式展示数据。表视图又一下部分组成：

• 表头视图：表视图最上边的视图
  
• 表脚视图：表视图最下边的视图
  
• 单元格（cell）：表视图中每一行的视图
  
• 节（section）：由多个单元格组成，应用于分组列表
  
  • 节头
    
  • 节脚
    

表视图的相关类

UITableView继承自UIScrollView，且有两个协议：UITableViewDelegate和UITableViewDataSource。此外UITableViewCell类时单元格类，UITableViewController类时UITableView的控制器，UITableViewHeaderFooterView用于为节头和节脚提供视图。


表视图分类

• 普通表视图：主要用于动态表，而动态表一般在单元格数目未知的情况下使用
• 分组表视图：一般用于静态表，用来进行界面布局
  

单元格的组成和样式

单元格由图标、主标题、副标题、扩展视图组成，可以根据需要进行选择，其中内置的扩展视图在枚举类型

Swift枚举成员	Objective-C枚举成员	说明
none	ITableViewCellAccessoryNone	没有扩展图标
disclosureIndicator	UITableViewCellAccessoryDisclosureIndicator	扩展指示器，为箭头+问号
detailDisclosureButton	UITableViewCellAccessoryDetailDisclosureButton	细节展示图，为问号
checkmark	UITableViewCellAccessoryCheckmark	选中标志，图标为勾
detailButton	UITableViewCellAccessoryDetailButton	细节详情展示，图标为问号

内置的单元格样式在枚举类型UITableViewCellStyle中定义：

Swift枚举成员	Objective-C枚举成员	说明
default	UITableViewCellStyleDefault	默认样式
subtitle	UITableViewCellStyleSubtitle	有图标、主标题、副标题、副标题在主标题的下面
value1	UITableViewCellStyleValue1	有主标题、副标题，主标题左对齐、副标题右对齐，可以有图标
2alue3	UITableViewCellStyleValue2	有主标题、副标题，主标题和副标题居中对齐，无图标

数据源协议与委托协议

UITableViewDataSource
数据源协议主要为表视图提供数据，主要方法如下

方法	返回类型	说明
func tableView（UITableView, cellForRowAt: IndexPath）	UITableViewCell	为表视图单元格提供数据，必须实现
tableView（UITableView, numberOfRowsInSection: Int）	Int	返回某个节中的行数，必须实现
tableView（UITableView, titleForHeaderInSection: Int）	String	返回节头的标题
tableView（UITableView, titleForFooterInSection: Int）	String	返回节脚的标题
numberOfSections（in: UITableView）	Int	返回节的个数
sectionIndexTitles（for: UITableView）	[String]?	返回表示图节索引标题

UITableViewDelegate

委托协议主要主要用来设定表视图中节头和节脚的标题，以及一些动作事件，主要方法如下

方法	返回类型	说明
tableView（UITableView, didSelectRowAt: IndexPath）		单元格响应事件
tableView（UITableView, accessoryButtonTappedForRowWith: IndexPath）		扩展视图响应事件

简单表视图
UIViewController根视图控制器实现表视图

步骤

1. 创建一个iOS工程
2. 从对象库中拖入一个TableView到storyboard文件中，并将TableView覆盖整个View
3. 打开Table View的属性检查器，将PrototypeCells的值设为1，注意不要添加多个，否则会发生错误；此时Table View会添加一个Table View Cell。
4. 打开Table View Cell的属性检查器，设置Identifier属性。
5. 注册UITableViewDataSource和UITableViewDelegate协议
6. 编写代码实现功能

实现

//// ViewController.swift// TableViewDemo//// Created by Michael on 2016/10/26.// Copyright © 2016年 Michael. All rights reserved.//import UIKitclass ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {//全部数据 var listItems: NSArray！ override func viewDidLoad（） {super.viewDidLoad（）//读取资源文件数据let listPath = Bundle.main.path（forResource: "team", ofType: "plist"）self.listItems = NSArray（contentsOfFile: listPath！） } override func didReceiveMemoryWarning（） {super.didReceiveMemoryWarning（）// Dispose of any resources that can be recreated. } //返回列表每行的视图 func tableView（_ tableView: UITableView, cellForRowAt indexPath: IndexPath） -> UITableViewCell { //根据Identifier找到Celllet cell = tableView.dequeueReusableCell（withIdentifier: "CustomId", for: indexPath）let row = indexPath.rowlet rowDict = self.listItems[row] as！ NSDictionarycell.textLabel?.text = rowDict["name"] as? Stringcell.detailTextLabel?.text = "123"let imagePath = String（format: "%@.png", rowDict["image"] as！ String）cell.imageView?.image = UIImage（named: imagePath）cell.accessoryType = UITableViewCellAccessoryType.disclosureIndicatorreturn cell } //返回条目数目 func tableView（_ tableView: UITableView, numberOfRowsInSection section: Int） -> Int {return self.listItems.count }//响应条目点击事件 func tableView（_ tableView: UITableView, didSelectRowAt indexPath: IndexPath） {print（"点击事件"） } }

示例图

none模式


disclosureIndicator


UITableViewController根视图控制器实现表视图
步骤

1. 创建一个iOS工程
2. 删除storyboard中View Controller Scene 中的View Controller，再从对象库拖入一个Table View Controller到设计界面
3. 打开Table View Controller属性检查器，勾选Is Initial View Controller选项，否则应用启动后是黑屏
4. 将ViewController类的父类由UIViewController改为UITableViewController
5. 打开View Controller的属性选择器在Class列表中选择ViewController
6. UITableViewController默认以注册UITableViewDataSource和UITableViewDelegate协议，不需要再注册
   

实现

import UIKitclass ViewController: UITableViewController {//全部数据 var listItems: NSArray！ override func viewDidLoad（） {super.viewDidLoad（）//读取资源文件数据let listPath = Bundle.main.path（forResource: "team", ofType: "plist"）self.listItems = NSArray（contentsOfFile: listPath！） } override func didReceiveMemoryWarning（） {super.didReceiveMemoryWarning（）// Dispose of any resources that can be recreated. } //返回列表每行的视图 func tableView（_ tableView: UITableView, cellForRowAt indexPath: IndexPath） -> UITableViewCell {let cell = tableView.dequeueReusableCell（withIdentifier: "CustomId", for: indexPath）let row = indexPath.rowlet rowDict = self.listItems[row] as！ NSDictionarycell.textLabel?.text = rowDict["name"] as? Stringcell.detailTextLabel?.text = "123"let imagePath = String（format: "%@.png", rowDict["image"] as！ String）cell.imageView?.image = UIImage（named: imagePath）cell.accessoryType = UITableViewCellAccessoryType.disclosureIndicatorreturn cell } //返回条目数目 func tableView（_ tableView: UITableView, numberOfRowsInSection section: Int） -> Int {return self.listItems.count }//响应条目点击事件 func tableView（_ tableView: UITableView, didSelectRowAt indexPath: IndexPath） {print（"点击事件"） } }

示例图

detailButton模式


checkmark模式


自定义单元格

步骤

1. 创建一个表视图工程
2. 修改根视图控制器为表视图控制器UITableViewController，参照上节的步骤
3. 从对象库中拖入控件到单元格内部，比如Lable和ImageView
4. 创建自定义单元格类CustomCell文件，并继承UITableViewCell类
5. 在设计界面中选择View Controller Scene中的Table View Cell，并打开属性检查器，将Class设为CustomCell类，并设置单元格的Identifier
6. 为单元格中的控件Label和ImageView控件连接输出接口，将控件绑定到CustomCell类中
7. 打开ViewController类，编写代码实现

实现
CustomCell类

//// CustomCell.swift// CustomCell//// Created by Michael on 2016/10/25.// Copyright © 2016年 Michael. All rights reserved.//import UIKitclass CustomCell: UITableViewCell { @IBOutlet weak var mImage: UIImageView！ @IBOutlet weak var mLabel: UILabel！ override func awakeFromNib（） {super.awakeFromNib（）// Initialization code } override func setSelected（_ selected: Bool, animated: Bool） {super.setSelected（selected, animated: animated）// Configure the view for the selected state }}

ViewController类

//// ViewController.swift// SimpleTableView//// Created by Michael on 2016/10/24.// Copyright © 2016年 Michael. All rights reserved.//import UIKitclass ViewController: UITableViewController {var listItems: NSArray！override func viewDidLoad（） {super.viewDidLoad（）// Do any additional setup after loading the view, typically from a nib.let listPath = Bundle.main.path（forResource: "team", ofType: "plist"）self.listItems = NSArray（contentsOfFile: listPath！） }override func didReceiveMemoryWarning（） {super.didReceiveMemoryWarning（）// Dispose of any resources that can be recreated. } override func tableView（_ tableView: UITableView, numberOfRowsInSection section: Int） -> Int {return self.listItems.count }override func tableView（_ tableView: UITableView, cellForRowAt indexPath: IndexPath） -> UITableViewCell { //找到自定义单元格let cell:CustomCell！ = tableView.dequeueReusableCell（withIdentifier: "CustomCellId", for: indexPath） as? CustomCell//let cell = UITableViewCell（style: .value1, reuseIdentifier: "CellIdentifier"）let row = indexPath.rowlet rowDict = self.listItems[row] as！ NSDictionary//设置控件属性cell.mLabel.text = rowDict["name"] as? Stringlet imagePath = String（format: "%@.png", rowDict["image"] as！ String）cell.mImage.image = UIImage（named: imagePath）cell.accessoryType = .disclosureIndicatorreturn cell }}

示例图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。