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

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

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

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

概述

表視圖組成

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

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

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

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

表視圖分類

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

單元格的組成和樣式

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

Swift枚舉成員	Objective-C枚舉成員	說明
none	ITableViewCellAccessoryNone	沒有擴展圖標
disclosureIndicator	UITableViewCellAccessoryDisclosureIndicator	擴展指示器，為箭頭+問號
detailDisclosureButton	UITableViewCellAccessoryDetailDisclosureButton	細節(jié)展示圖，為問號
checkmark	UITableViewCellAccessoryCheckmark	選中標志，圖標為勾
detailButton	UITableViewCellAccessoryDetailButton	細節(jié)詳情展示，圖標為問號

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

Swift枚舉成員	Objective-C枚舉成員	說明
default	UITableViewCellStyleDefault	默認樣式
subtitle	UITableViewCellStyleSubtitle	有圖標、主標題、副標題、副標題在主標題的下面
value1	UITableViewCellStyleValue1	有主標題、副標題，主標題左對齊、副標題右對齊，可以有圖標
2alue3	UITableViewCellStyleValue2	有主標題、副標題，主標題和副標題居中對齊，無圖標

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

UITableViewDataSource

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

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

UITableViewDelegate

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

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

簡單表視圖

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

步驟

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

實現(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)條目點擊事件
 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  print("點擊事件")
 }
 
}

示例圖

none模式

disclosureIndicator

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

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

實現(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)條目點擊事件
 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  print("點擊事件")
 }
 
}

示例圖

detailButton模式

checkmark模式

自定義單元格

步驟

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

實現(xiàn)
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
  //設(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
  
 }
}

示例圖