使用 Tableview 中的 move 功能來進行更換玩家順序的動作吧!
上一次教學我們學會了在 TableView
進行新增、修改以及刪除的操作,並且我們配合各種不同操作對該行進行不同的動畫效果,而不是使用 reloadData
的方式來重整整個畫面,那這次教學我們會在我們玩家清單中加入更換順序的操作,我們將會使用 TableView
原生的 moveRowAt
來進行更換順序的操作。
首先我們為了要加入這個功能,我們會在 viewDidLoad
開啟我們 TableView
的編輯模式,才能讓我們使用移動 Cell
的操作:
playerListTableView.isEditing = true
這邊要注意 ⚠️ , TableView
開啟 isEditing = true
時,我們的 Cell
是無法點擊的,所以沒辦法執行我們上次為他設計的 didSelectRowAt
方法,因此我們需要多加一條程式碼,來允許它在編輯模式時還能進行點擊操作:
playerListTableView.allowsSelectionDuringEditing = true
讓我們來執行看看吧!
TableView
的編輯模式
你可以看見在預設的編輯模式會開啟我們刪除的模式,所以在這邊我們需要在 editingStyleForRowAt
告訴他我們不想要任何編輯模式,所以我們回傳一個 UITableViewCell.EditingStyle.none
:
func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {
return .none
}
接著我們需要在 canMoveRowAt
回傳一個 true
,來開啟可以移動清單中 TableviewCell
的操作:
func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
return true
}
接著我們需要新增一個 moveRowAt
這邊我們先不加入任何程式碼,單純印出我們 players
這個 Array 的順序:
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
print(players)
}
試著執行看看吧~
移動
TableViewCell
你可以看到我們已經能夠調換順序了,但是我們來看看剛剛我們執行 moveRowAt
時所印出的 players
的結果:
你可以看見雖然我們表面上移動了 TableView
的順序,但是實際上 Array 中的順序是沒有改變的,所以假如我們這時重整了畫面或是 Cell
一離開畫面後,那麼數據源的 Array
與 TableView
的資訊就會無法對上。
因此我們需要在 moveRowAt
中寫下以下程式碼,來執行真正的調換順序的動作:
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
// 刪除 players 中想要移動的項目,也就是 player[sourceIndexPath.row]
// 並且賦給 movePlayer
let movePlayer = players.remove(at: sourceIndexPath.row)
// 在 players 中的目標位置 destinationIndexPath 插入我們 movePlayer
players.insert(movePlayer, at: destinationIndexPath.row)
}
如此一來我們就能真正的調換玩家的順序了:
那麼這次移動 TableViewCell
的教學就到這邊結束了,希望大家能夠學會如何使用編輯模式來移動,並且也能夠正確的將資料來源的資料同時也更換其位置或是資訊,那我們下次教學見~