【iOS App】模仿製作 iOS Clock App - 世界時鐘 World Clock

練習刻畫面和實作 tableView ，這篇兩個重點：cell 依 autoLayout 排版、tableView 編輯狀態：刪除、移動順序以及滑動操作。

第一步：建立表格

將畫面基本設定：拉元件 UITableViewController 和設計 prototype cell ，接著自訂型別 UITableViewController、UITableViewCell，再將元件的 class 設成自訂型別，畫面的 cell 需要拉 @IBOutlet 至自訂型別的 cell。

設計 cell 和 autoLayout 設定

• 以 stackView 設計 cell：stackView 的 Distribution 選擇 Fill，讓他整個填滿想要的範圍。
• 設定 autoLayout：讓 tableView 的 cell 的尺寸依內容的限制條件。

以 stackView 設計 cell且設定 autoLayout

實作 tableView 的函數 ( 選擇 dynamic prototype )

• section 數量 numberOfSections(in:)
• 每個 section 的 row 數量 tableView(_:numberOfRowsInSection:)
• cell 內容 tableView(_:cellForRowAt:)：記得設定cell id 和轉型

第二步：設計 tableView 編輯狀態

欲呈現效果：

• 按導覽列上的「編輯」按鈕，可重新安排順序和刪除表格，按「完成」後則無法點選。
• 左滑顯示刪除，且左上「編輯」按鈕呈現「完成」；若取消或按下刪除則左上「完成」按鈕呈現「編輯」。

排序

1. 設定可編輯：接收到 .setEditng
2. 設定哪些儲存格的順序可移動，實作函數 tableView(_: canMoveRowAt:)。
3. 更新顯示資料的順序，改變順序之後才會依此呈現 tableView(_: moveRowAt:to:)。

• 參考：開發文件 Managing the Reordering of Rows

刪除

1. 設定可編輯：接收到 .setEditng
2. 設定可編輯的儲存格 tableView(_: canEditRowAt:)
3. 編輯狀態，可設定儲存格左邊是否使用刪除或插入功能
   tableView(_: editingStyleForRowAt:)
4. 刪除或插入儲存格 tableView(_:commit:forRowAt:)
   儲存格 .deleteRows、.insertRows
   小心刪除儲存格和刪除資料的先後順序，如果先刪除儲存格，則會出錯。

• 參考：開發文件 Inserting and Deleting Rows and Sections

swipe 左滑

如果沒有特別設定左滑和右滑的情況，預設如果 tableView(_: editingStyleForRowAt:) → .delete 則左滑顯示刪除，若是 .none 或 .insert 則左滑無反應。預設的左滑，滑到底則直接觸發刪除。

1. 開始滑動觸發 tableView(_:willBeginEditingRowAt:)
2. 滑動取消時或點選刪除按鈕觸發 tableView(_:didBeginEditingRowAt:)

• 左滑 tableView(_:trailingSwipeActionsConfigurationForRowAt:)
• 右滑 tableView(_:leadingSwipeActionsConfigurationForRowAt:)
• 滑動顯示的按鈕 UIContextualAction ( 樣式 style .normal 預設灰色、.destructive 紅色 )，設定按鈕要做的事。
• 滑動包含的按鈕 UISwipeActionsConfiguration
• 按鈕是否可滑滿 .performsFirstActionWithFullSwipe ，true 即為滑到底直接觸發第一個按鈕。

tableView: swipe

遇到的問題

• 留意觸發方法的順序 ( sequence )：
  因為一開始左滑取消與否，不知道該如何對應更動左上方「編輯/完成」的按鈕文字，關鍵點原來是我搞不清楚整個過程會觸發哪些函數(方法)，導致我不知道該在哪個方法去實作變更按鈕的標題文字。

其他功能

【本地端資料儲存 Document directory】

儲存每次新增修改的時區列表於本機，即使關閉 App 仍保留之前儲存的結果

本地端資料儲存 Document directory

【UISearchController】

新增時區頁面：搜尋時區

UISearchController 實作搜尋功能

其他分頁

【iOS App】模仿製作 iOS Clock App - 鬧鐘 Alarm

【iOS App】模仿製作 iOS Clock App — 計時器 Timer

【iOS App】模仿製作 iOS Clock App - 碼錶 Stopwatch