iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
自我挑戰組

一天一蘋果,Bug 遠離我。系列 第 28

Day 28: Soda Shake - 裁判,可以這樣換了又換嗎?

使用 Tableview 中的 move 功能來進行更換玩家順序的動作吧!
https://ithelp.ithome.com.tw/upload/images/20181112/20107701veYRXHpKOw.png


前言:

上一次教學我們學會了在 TableView 進行新增、修改以及刪除的操作,並且我們配合各種不同操作對該行進行不同的動畫效果,而不是使用 reloadData 的方式來重整整個畫面,那這次教學我們會在我們玩家清單中加入更換順序的操作,我們將會使用 TableView 原生的 moveRowAt 來進行更換順序的操作。


# 開啟編輯模式:

首先我們為了要加入這個功能,我們會在 viewDidLoad 開啟我們 TableView 的編輯模式,才能讓我們使用移動 Cell 的操作:

playerListTableView.isEditing = true

這邊要注意 ⚠️ , TableView 開啟 isEditing = true 時,我們的 Cell 是無法點擊的,所以沒辦法執行我們上次為他設計的 didSelectRowAt 方法,因此我們需要多加一條程式碼,來允許它在編輯模式時還能進行點擊操作:

playerListTableView.allowsSelectionDuringEditing = true

讓我們來執行看看吧!

https://ithelp.ithome.com.tw/upload/images/20181112/20107701Vr0aotiJf8.png

TableView 的編輯模式

你可以看見在預設的編輯模式會開啟我們刪除的模式,所以在這邊我們需要在 editingStyleForRowAt 告訴他我們不想要任何編輯模式,所以我們回傳一個 UITableViewCell.EditingStyle.none

func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {
  return .none
}

#Move Row At

接著我們需要在 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)
}

試著執行看看吧~

image

移動 TableViewCell

你可以看到我們已經能夠調換順序了,但是我們來看看剛剛我們執行 moveRowAt 時所印出的 players 的結果:

https://ithelp.ithome.com.tw/upload/images/20181112/2010770113d0DW5BkW.png

你可以看見雖然我們表面上移動了 TableView 的順序,但是實際上 Array 中的順序是沒有改變的,所以假如我們這時重整了畫面或是 Cell 一離開畫面後,那麼數據源的 ArrayTableView 的資訊就會無法對上。
因此我們需要在 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)
}

如此一來我們就能真正的調換玩家的順序了:

https://ithelp.ithome.com.tw/upload/images/20181112/20107701cF67choKut.png


後記:

那麼這次移動 TableViewCell 的教學就到這邊結束了,希望大家能夠學會如何使用編輯模式來移動,並且也能夠正確的將資料來源的資料同時也更換其位置或是資訊,那我們下次教學見~


上一篇
Day 27: Soda Shake - 做一個玩家列表吧!
下一篇
Day 29: Soda Shake -給玩家一點回饋感吧!
系列文
一天一蘋果,Bug 遠離我。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言