iOS開(kāi)發(fā)之表視圖詳解

更新時(shí)間：2016年11月01日 10:09:49 作者：MichaelLau

表視圖是iOS開(kāi)發(fā)中最重要的視圖，它以列表的形式展示數(shù)據(jù)。本篇文章詳細(xì)的介紹了表視圖的幾種用法，有需要的小伙伴可以了解一下。

本文詳細(xì)介紹了表視圖的用法。具體如下：

概述

表視圖組成

表視圖是iOS開(kāi)發(fā)中最重要的視圖，它以列表的形式展示數(shù)據(jù)。表視圖又一下部分組成：

表頭視圖：表視圖最上邊的視圖
表腳視圖：表視圖最下邊的視圖
單元格（cell）：表視圖中每一行的視圖
節(jié)(section)：由多個(gè)單元格組成，應(yīng)用于分組列表
- 節(jié)頭
- 節(jié)腳

表視圖的相關(guān)類(lèi)

UITableView繼承自UIScrollView，且有兩個(gè)協(xié)議：UITableViewDelegate和UITableViewDataSource。此外UITableViewCell類(lèi)時(shí)單元格類(lèi)，UITableViewController類(lèi)時(shí)UITableView的控制器，UITableViewHeaderFooterView用于為節(jié)頭和節(jié)腳提供視圖。

表視圖分類(lèi)

普通表視圖：主要用于動(dòng)態(tài)表，而動(dòng)態(tài)表一般在單元格數(shù)目未知的情況下使用
分組表視圖：一般用于靜態(tài)表，用來(lái)進(jìn)行界面布局

單元格的組成和樣式

單元格由圖標(biāo)、主標(biāo)題、副標(biāo)題、擴(kuò)展視圖組成，可以根據(jù)需要進(jìn)行選擇，其中內(nèi)置的擴(kuò)展視圖在枚舉類(lèi)型

Swift枚舉成員	Objective-C枚舉成員	說(shuō)明
none	ITableViewCellAccessoryNone	沒(méi)有擴(kuò)展圖標(biāo)
disclosureIndicator	UITableViewCellAccessoryDisclosureIndicator	擴(kuò)展指示器，為箭頭+問(wèn)號(hào)
detailDisclosureButton	UITableViewCellAccessoryDetailDisclosureButton	細(xì)節(jié)展示圖，為問(wèn)號(hào)
checkmark	UITableViewCellAccessoryCheckmark	選中標(biāo)志，圖標(biāo)為勾
detailButton	UITableViewCellAccessoryDetailButton	細(xì)節(jié)詳情展示，圖標(biāo)為問(wèn)號(hào)

內(nèi)置的單元格樣式在枚舉類(lèi)型UITableViewCellStyle中定義：

Swift枚舉成員	Objective-C枚舉成員	說(shuō)明
default	UITableViewCellStyleDefault	默認(rèn)樣式
subtitle	UITableViewCellStyleSubtitle	有圖標(biāo)、主標(biāo)題、副標(biāo)題、副標(biāo)題在主標(biāo)題的下面
value1	UITableViewCellStyleValue1	有主標(biāo)題、副標(biāo)題，主標(biāo)題左對(duì)齊、副標(biāo)題右對(duì)齊，可以有圖標(biāo)
2alue3	UITableViewCellStyleValue2	有主標(biāo)題、副標(biāo)題，主標(biāo)題和副標(biāo)題居中對(duì)齊，無(wú)圖標(biāo)

數(shù)據(jù)源協(xié)議與委托協(xié)議

UITableViewDataSource

數(shù)據(jù)源協(xié)議主要為表視圖提供數(shù)據(jù)，主要方法如下

方法	返回類(lèi)型	說(shuō)明
func tableView(UITableView, cellForRowAt: IndexPath)	UITableViewCell	為表視圖單元格提供數(shù)據(jù)，必須實(shí)現(xiàn)
tableView(UITableView, numberOfRowsInSection: Int)	Int	返回某個(gè)節(jié)中的行數(shù)，必須實(shí)現(xiàn)
tableView(UITableView, titleForHeaderInSection: Int)	String	返回節(jié)頭的標(biāo)題
tableView(UITableView, titleForFooterInSection: Int)	String	返回節(jié)腳的標(biāo)題
numberOfSections(in: UITableView)	Int	返回節(jié)的個(gè)數(shù)
sectionIndexTitles(for: UITableView)	[String]?	返回表示圖節(jié)索引標(biāo)題

UITableViewDelegate

委托協(xié)議主要主要用來(lái)設(shè)定表視圖中節(jié)頭和節(jié)腳的標(biāo)題，以及一些動(dòng)作事件，主要方法如下

方法	返回類(lèi)型	說(shuō)明
tableView(UITableView, didSelectRowAt: IndexPath)		單元格響應(yīng)事件
tableView(UITableView, accessoryButtonTappedForRowWith: IndexPath)		擴(kuò)展視圖響應(yīng)事件

簡(jiǎn)單表視圖

UIViewController根視圖控制器實(shí)現(xiàn)表視圖

步驟

創(chuàng)建一個(gè)iOS工程
從對(duì)象庫(kù)中拖入一個(gè)TableView到storyboard文件中，并將TableView覆蓋整個(gè)View
打開(kāi)Table View的屬性檢查器，將PrototypeCells的值設(shè)為1，注意不要添加多個(gè)，否則會(huì)發(fā)生錯(cuò)誤；此時(shí)Table View會(huì)添加一個(gè)Table View Cell。
打開(kāi)Table View Cell的屬性檢查器，設(shè)置Identifier屬性。
注冊(cè)UITableViewDataSource和UITableViewDelegate協(xié)議
編寫(xiě)代碼實(shí)現(xiàn)功能

實(shí)現(xiàn)

//
// ViewController.swift
// TableViewDemo
//
// Created by Michael on 2016/10/26.
// Copyright © 2016年 Michael. All rights reserved.
//

import UIKit

class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {
 
 //全部數(shù)據(jù)
 var listItems: NSArray!

 override func viewDidLoad() {
  super.viewDidLoad()
  
  //讀取資源文件數(shù)據(jù)
  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 {
 //根據(jù)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?.text = "123"
  
  let imagePath = String(format: "%@.png", rowDict["image"] as! String)
  cell.imageView?.image = UIImage(named: imagePath)
  cell.accessoryType = UITableViewCellAccessoryType.disclosureIndicator
  return cell
 }

 //返回條目數(shù)目
 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return self.listItems.count
 }
 
 //響應(yīng)條目點(diǎn)擊事件
 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  print("點(diǎn)擊事件")
 }
 
}

示例圖

none模式

disclosureIndicator

UITableViewController根視圖控制器實(shí)現(xiàn)表視圖
步驟

創(chuàng)建一個(gè)iOS工程
刪除storyboard中View Controller Scene 中的View Controller，再?gòu)膶?duì)象庫(kù)拖入一個(gè)Table View Controller到設(shè)計(jì)界面
打開(kāi)Table View Controller屬性檢查器，勾選Is Initial View Controller選項(xiàng)，否則應(yīng)用啟動(dòng)后是黑屏
將ViewController類(lèi)的父類(lèi)由UIViewController改為UITableViewController
打開(kāi)View Controller的屬性選擇器在Class列表中選擇ViewController
UITableViewController默認(rèn)以注冊(cè)UITableViewDataSource和UITableViewDelegate協(xié)議，不需要再注冊(cè)

實(shí)現(xiàn)

import UIKit

class ViewController: UITableViewController {
 
 //全部數(shù)據(jù)
 var listItems: NSArray!

 override func viewDidLoad() {
  super.viewDidLoad()
  
  //讀取資源文件數(shù)據(jù)
  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?.text = "123"
  
  let imagePath = String(format: "%@.png", rowDict["image"] as! String)
  cell.imageView?.image = UIImage(named: imagePath)
  cell.accessoryType = UITableViewCellAccessoryType.disclosureIndicator
  return cell
 }

 //返回條目數(shù)目
 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return self.listItems.count
 }
 
 //響應(yīng)條目點(diǎn)擊事件
 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  print("點(diǎn)擊事件")
 }
 
}

示例圖

detailButton模式

checkmark模式

自定義單元格

步驟

創(chuàng)建一個(gè)表視圖工程
修改根視圖控制器為表視圖控制器UITableViewController，參照上節(jié)的步驟
從對(duì)象庫(kù)中拖入控件到單元格內(nèi)部，比如Lable和ImageView
創(chuàng)建自定義單元格類(lèi)CustomCell文件，并繼承UITableViewCell類(lèi)
在設(shè)計(jì)界面中選擇View Controller Scene中的Table View Cell，并打開(kāi)屬性檢查器，將Class設(shè)為CustomCell類(lèi)，并設(shè)置單元格的Identifier
為單元格中的控件Label和ImageView控件連接輸出接口，將控件綁定到CustomCell類(lèi)中
打開(kāi)ViewController類(lèi)，編寫(xiě)代碼實(shí)現(xiàn)

實(shí)現(xiàn)
CustomCell類(lèi)

//
// 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類(lèi)

//
// 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
  //設(shè)置控件屬性
  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
  
 }
}

示例圖