iOS开发之表视图详解_IOS开发教程-查字典教程网
iOS开发之表视图详解
iOS开发之表视图详解
发布时间:2016-12-28 来源:查字典编辑
摘要:本文详细介绍了表视图的用法。具体如下:概述表视图组成表视图是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根视图控制器实现表视图

步骤

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

实现

// // ViewController.swift // TableViewDemo // // Created by Michael on 2016/10/26. // Copyright © 2016年 Michael. All rights reserved. // import UIKit class 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找到Cell let cell = tableView.dequeueReusableCell(withIdentifier: "CustomId", for: indexPath) let row = indexPath.row let rowDict = self.listItems[row] as! NSDictionary cell.textLabel?.text = rowDict["name"] as? String cell.detailTextLabel" let imagePath = String(format: "%@.png", rowDict["image"] as! String) cell.imageView?.image = UIImage(named: imagePath) cell.accessoryType = UITableViewCellAccessoryType.disclosureIndicator return cell } //返回条目数目 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return self.listItems.count } //响应条目点击事件 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { print("点击事件") } }

示例图

none模式

disclosureIndicator

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

步骤

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

实现

import UIKit class 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.row let rowDict = self.listItems[row] as! NSDictionary cell.textLabel?.text = rowDict["name"] as? String cell.detailTextLabel" let imagePath = String(format: "%@.png", rowDict["image"] as! String) cell.imageView?.image = UIImage(named: imagePath) cell.accessoryType = UITableViewCellAccessoryType.disclosureIndicator return cell } //返回条目数目 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return self.listItems.count } //响应条目点击事件 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { print("点击事件") } }

示例图

detailButton模式

checkmark模式

自定义单元格

步骤

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

实现

CustomCell类

// // CustomCell.swift // CustomCell // // Created by Michael on 2016/10/25. // Copyright © 2016年 Michael. All rights reserved. // import UIKit class 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 UIKit class 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.row let rowDict = self.listItems[row] as! NSDictionary //设置控件属性 cell.mLabel.text = rowDict["name"] as? String let imagePath = String(format: "%@.png", rowDict["image"] as! String) cell.mImage.image = UIImage(named: imagePath) cell.accessoryType = .disclosureIndicator return cell } }

示例图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持查字典教程网。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新IOS开发学习
    热门IOS开发学习
    编程开发子分类