【iOS App】模仿製作 iOS Clock App - 世界時鐘 World Clock
Published in
6 min readSep 4, 2021
練習刻畫面和實作 tableView ,這篇兩個重點:cell 依 autoLayout 排版、tableView 編輯狀態:刪除、移動順序以及滑動操作。
第一步:建立表格
將畫面基本設定:拉元件 UITableViewController 和設計 prototype cell ,接著自訂型別 UITableViewController、UITableViewCell,再將元件的 class 設成自訂型別,畫面的 cell 需要拉 @IBOutlet 至自訂型別的 cell。
設計 cell 和 autoLayout 設定
- 以 stackView 設計 cell:stackView 的 Distribution 選擇 Fill,讓他整個填滿想要的範圍。
- 設定 autoLayout:讓 tableView 的 cell 的尺寸依內容的限制條件。
實作 tableView 的函數 ( 選擇 dynamic prototype )
- section 數量 numberOfSections(in:)
- 每個 section 的 row 數量 tableView(_:numberOfRowsInSection:)
- cell 內容 tableView(_:cellForRowAt:):記得設定cell id 和轉型
第二步:設計 tableView 編輯狀態
欲呈現效果:
- 按導覽列上的「編輯」按鈕,可重新安排順序和刪除表格,按「完成」後則無法點選。
- 左滑顯示刪除,且左上「編輯」按鈕呈現「完成」;若取消或按下刪除則左上「完成」按鈕呈現「編輯」。
排序
- 設定可編輯:接收到
.setEditng
- 設定哪些儲存格的順序可移動,實作函數
tableView(_: canMoveRowAt:)
。 - 更新顯示資料的順序,改變順序之後才會依此呈現
tableView(_: moveRowAt:to:)
。
- 參考:開發文件 Managing the Reordering of Rows
刪除
- 設定可編輯:接收到
.setEditng
- 設定可編輯的儲存格
tableView(_: canEditRowAt:)
- 編輯狀態,可設定儲存格左邊是否使用刪除或插入功能
tableView(_: editingStyleForRowAt:)
- 刪除或插入儲存格
tableView(_:commit:forRowAt:)
儲存格.deleteRows
、.insertRows
小心刪除儲存格和刪除資料的先後順序,如果先刪除儲存格,則會出錯。
swipe 左滑
如果沒有特別設定左滑和右滑的情況,預設如果 tableView(_: editingStyleForRowAt:)
→ .delete
則左滑顯示刪除,若是 .none
或 .insert
則左滑無反應。預設的左滑,滑到底則直接觸發刪除。
- 開始滑動觸發
tableView(_:willBeginEditingRowAt:)
- 滑動取消時或點選刪除按鈕觸發
tableView(_:didBeginEditingRowAt:)
- 左滑
tableView(_:trailingSwipeActionsConfigurationForRowAt:)
- 右滑
tableView(_:leadingSwipeActionsConfigurationForRowAt:)
- 滑動顯示的按鈕
UIContextualAction
( 樣式 style.normal
預設灰色、.destructive
紅色 ),設定按鈕要做的事。 - 滑動包含的按鈕
UISwipeActionsConfiguration
- 按鈕是否可滑滿
.performsFirstActionWithFullSwipe
,true 即為滑到底直接觸發第一個按鈕。
遇到的問題
- 留意觸發方法的順序 ( sequence ):
因為一開始左滑取消與否,不知道該如何對應更動左上方「編輯/完成」的按鈕文字,關鍵點原來是我搞不清楚整個過程會觸發哪些函數(方法),導致我不知道該在哪個方法去實作變更按鈕的標題文字。
其他功能
【本地端資料儲存 Document directory】
儲存每次新增修改的時區列表於本機,即使關閉 App 仍保留之前儲存的結果
【UISearchController】
新增時區頁面:搜尋時區
其他分頁