Swift —說說 UI TableView（ Editing Style ）

Jeremy Xue

6 min readJul 1, 2018

前言：

TableView 應該算是蠻常會用到的元件之一，許多條列式清單都會使用這種方式實現，加上我本身也蠻喜歡使用 TableView 來實作一些功能，所以一些簡單的顯示方式我都會使用 TableView 來呈現。

所以，這次我就來分享一些基本的 TableView 功能，讓不曉得有這些功能的人實作參考，知道的人可以當作複習（？

首先我們先建立一個 UITableViewController 以及一個 TableViewController 的文件，再加上一個 NavigationBar，接著再開始我們的實作：

# TableView Edit Style

首先，我們可以在我們 TableViewController 的文件的 viewDidLoad 看到一段註解，我們將它註解掉，這時我們 NavigationBar 的右邊按鈕會變成修改按鈕：

self.navigationItem.rightBarButtonItem = self.editButtonItem

這時再往下看我們 TableViewController 的文件下的這段程式碼：

簡單來說，就是詢問 Data source 驗證指定的 Row 是否能夠編輯。所以當我們 return true 的時候，我們按下 edit 的按鈕，會看到我們的畫面會變成：

這時候你可以發現我們也能夠對 cell 刪除（左滑到底或是左滑點選 delete）

接下來，你應該會發現你一刪除 cell 就馬上報錯，這是因為我們的數據沒有同時進行刪除的動作，所以我們要在刪除時 cell 時同步刪除資料，這時我們再往下找可以找到這段程式碼：

這段就是在判斷 TableView 的 editingStyle 是哪一種，所以我們就在修改方式為 delete 的情況下，也把我們資料中的項目刪除即可：

if editingStyle == .delete {  // Delete the row from the data source
  // 刪除 numberArray 中的該項目
  numberArray.remove(at: indexPath.row)
  tableView.deleteRows(at: [indexPath], with: .fade)}

接著我們來設定一個讓使用者可以自訂移動更換 Row 的排序的方式，因此我們可以在文件中找到這個方法：

這個方法會詢問 Data source TableView 中指定的 Row 是否可以移動到 TableView 的另一個位置。如果 return true ，我們就能夠隨意拖動我們的 cell 了。效果如下：

雖然我們可以隨意移動這個 Cell 了，但還記得我們 TableViewCell 有 Reuse 的問題，所以當我們將它向上向下滑動時就會出現資料錯誤的現象：

跟前面刪除一樣，所以我們必須告訴 TableView 我們的 cell 移動到了哪裡，所以我們找到下列方法來進行修改：

所以我們會在其中加上下列這段程式碼：

// 將移動的項目賦值給 number
let number = numberArray[fromIndexPath.row]
// 將原有位置的項目刪除
numberArray.remove(at: fromIndexPath.row)
// 將剛剛移動的項目插入到新的位置
numberArray.insert(number, at: to.row)

如此一來就沒有移動完成時就沒有資料會錯誤的問題了。