iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
自我挑戰組

iOS 新手開發的大小事系列 第 21

Day 21: [UIKit] UITableView 介紹 -1

  • 分享至 

  • xImage
  •  

概觀

iOS 上的表格視圖顯示一列垂直滾動的內容,分為幾行。表格中的每一行都包含應用的一部分內容。例如,「聯絡人」應用程序在單獨的行中顯示每個聯絡人的姓名,「設定」應用程式的主頁顯示可用的設置組。可以將表配置為顯示單個長行列表,也可以將相關行分組為小節,以更容易導航內容。

數據是高度結構化或分層組織的應用程式通常使用表。包含層次結構數據的應用程式通常將表與導航視圖控制器 (navigation view controller) 結合使用,這有助於在層次結構的不同級別之間進行導航。例如,「設定」應用程式使用表格和導航控制器來組織系統設定。UITableView 管理表的基本外觀,但是應用程式提供了顯示實際內容的單元格(UITableViewCell 物件)。標準單元格配置顯示文字和圖像的簡單組合,但是可以定義顯示所需內容的自定義單元格。還可以提供頁首和頁腳視圖,以提供有關單元格組的其他信息。

在界面中添加表視圖

要將表視圖添加到界面,請將表視圖控制器(UITableViewController)物件拖到 Storyboad 上。 Xcode 創建一個新的場景,其中包括視圖控制器 (view controller) 和表視圖 (table view),供配置和使用。表視圖是由數據驅動的,通常從提供的數據源物件中獲取數據。數據源物件管理應用數據,並負責創建和配置表格的單元格。如果表的內容永不更改,則可以在 Storyboard 文件中配置該內容。

用數據填充表 (Filling a Table with Data)

表視圖是界面的數據驅動元素。使用數據源物件(即採用 UITableViewDataSource 協定的物件)提供應用程式的數據以及在屏幕上呈現每個數據所需的視圖。表格視圖將視圖排列在屏幕上,並與數據源物件一起使用讓數據保持最新。表視圖將數據組織成行 (rows) 和節 (sections)。行顯示單個數據項,各節將相關行分組在一起。節為非必須,但是節是組織是將數據分層的好方法。例如,「聯絡人」應用程式顯示一行中每個聯絡人的姓名,並根據該人的姓氏的首字母將行分組為多個節。

提供行數和節數 (Provide the Numbers of Rows and Sections)

在表格出現在屏幕上之前,表格視圖會要求指定行和節的總數。數據源物件使用兩種方法提供此訊息:

func numberOfSections(in tableView: UITableView) -> Int  // Optional 
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

在這些方法的實現中,盡快返回行數和節數。這樣做可能需要以一種易於檢索行和節訊息的方式來構造數據。例如,考慮使用數組來管理表的數據。數組是組織部分和行的好工具,因為它們與表視圖本身的自然組織匹配。下面的範例代碼顯示了數據源方法的實現,該方法返回多節表中的行數和節數。在此表中,每一行顯示一個字串,因此實現為每個部分存儲一個字串數組。為了管理這些部分,使用數組的數組(稱為 hierarchicalData)實現。要獲取節數,數據源將返回 hierarchicalData 數組中的項目數。為了獲得特定節中的行數,數據源返回相應子數組中的項目數。

var hierarchicalData = [[String]]() 
 
override func numberOfSections(in tableView: UITableView) -> Int {
   return hierarchicalData.count
}
   
override func tableView(_ tableView: UITableView, 
                        numberOfRowsInSection section: Int) -> Int {
   return hierarchicalData[section].count
}

定義行的外觀 (Define the Appearance of Rows)

可以使用單元格在 Storyboard 文件中定義表格行的外觀。單元格是一個 UITableViewCell 物件,其作用類似於表中各行的模板。單元格是視圖,它們可以包含顯示內容所需的任何子視圖。可以將標籤,圖像視圖和其他視圖添加到它們的內容區域,並使用約束來排列這些視圖。將表格視圖添加到應用程序界面時,它會包含一個原型單元配置。要添加更多原型單元,請選擇表視圖並更新其「原型單元」屬性。每個單元格都有一種樣式,可以定義其外觀。可以選擇 UIKit 提供的標準樣式之一,也可以定義自己的自定義樣式。

下圖顯示了帶有兩個原型單元格的表,每個原型單元格都使用一種標準單元格樣式。

在 Storyboard 文件中,對每個原型單元執行以下操作:

  • 將單元格樣式設置為「自定義」(custom),或將其設置為標準單元格樣式之一。
  • 為單元格的「標識符」(Identifier) 屬性分配一個非空字串。
  • 對於自定義單元格,向單元格添加視圖和約束。
  • 在身份檢查器中 (Identity inspector) 指定自定義單元格的類別。

使用自定義視圖創建單元時,請定義 UITableViewCell 的子類來管理這些視圖。在子類中,為顯示應用程序數據的自定義視圖添加出口,並將這些 outlets 連接到 Storyboard 文件中的實際視圖。需要這些 outlets 來在運行時配置單元。

為表格配置單元格 (Configuring the Cells for Your Table)

單元格提供表格行的可視表示。對於大多數表,僅提供一種或兩種不同類型的單元格。設計單元,以確保最重要的訊息脫穎而出。為此,請謹慎選擇視圖並查看單元中的配置。可以設計時在 Storyboard 文件中指定單元格的外觀。Xcode 為每個表提供一個原型單元,可以根據需要添加更多原型單元。原型單元為單元外觀的模板。它包括要顯示的視圖及其在單元格內容區域內的排列。在運行時,表格的數據源物件會根據原型創建實際的單元格,並使用應用程式的數據對其進行配置。

為每個單元分配一個重用標識符 (Assign a Reuse Identifier to Each Cell)

重用標識符有助於創建和回收表單元格。重用標識符是分配給表的每個原型單元的字串。在 Storyboard 要中,選擇原型單元,並為其標識符屬性分配一個非空值。表格視圖中的每個單元格必須具有獨有的重用標識符 (reuse identifier)。當運行時需要單元格物件時,請調用表格視圖的 dequeueReusableCell(withIdentifier: for :) 方法,並傳遞所需單元格的重用標識符。表視圖維護已創建單元的內部隊列。如果隊列包含所請求類型的單元格,則表視圖將返回該單元格。如果不是,它將使用情節提要中的原型單元創建一個新單元。重用單元格可以在關鍵時刻(例如在滾動過程中)最小化內存分配來提高性能。

var cell = tableView.dequeueReusableCell(withIdentifier: “myCellType”, for: indexPath)

上一篇
Day 20: [UIKit] UIPickerView 介紹
下一篇
Day 22: [UIKit] UITableView 介紹 -2
系列文
iOS 新手開發的大小事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言