Swift — 做個 To-Do List 吧（基礎篇）

Jeremy Xue

6 min readJul 2, 2018

前言

Swift — 說說 TableView（ reload & updates）

前言

medium.com

前幾次教學有提到關於 tableView 的重新加載方式，這是想透過一些簡單的重整方式教大家做出一個簡單的 To-Do List （待辦事項）。

畫面規劃

不管畫面規劃如何，反正我們需要一個輸入的區塊（ TextField ）以及一個按鈕動作將數據傳入我們任務陣列，以及一個顯示數據的表（ TableView）。

程式碼

TableView 基本設置

首先我們需要有一個陣列來儲存我們的資料，我們希望傳進來的任務為 String 的型別，所以我們這樣定義：

// 記得使用 var 來宣告 Array 為變數
var myTask:[String] = []

接著我們會將 tableView 與我們的程式碼做連結，並讓我們的 viewController 遵循 UITableViewDataSource、UITableViewDelegate 這兩個 Protocol

遵循 UITableViewDataSource、UITableViewDelegate 協定

接著它會要求我們實作下列兩個方法，第一個方法是要求我們 return 該 Section row 的數量，所以我們回傳 myTask.count；第二個方法則是要求我們回傳一個 UITableViewCell，這邊我們只是單純顯示輸入的字元，所以只有設定 cell 中的 textLabel.text 為我們 myTask 中的數據：

最後在 viewDidLoad 將我們 TableView 的 datasource 及 delegate 設為 self：

listTableView.dataSource = selflistTableView.delegate = self

新增任務

這邊我們會讓我們按鈕與程式碼做一個 Action 的連結，新增任務到我們的 TableView中，接著我們就來定義這個方法吧：

@IBAction func addTask(_ sender: Any) {  // 檢查 textField 是否沒有輸入值，若為空就執行 showAlert 並 return
  // 這邊我們 showAlert 會跳出一個警告視窗  if taskTextField.text == "" {
    showAlert()
    return
  }  // 將任務加到 Array 中
  myTask.append(taskTextField.text!)
  // 將 textField 清空
  taskTextField.text = ""
  // 重新載入我們的 TableView
  listTableView.reloadData()}

如此一來，我們就能進行簡單的輸入資料了：

接著我們需要一個修改鍵讓它能夠刪除任務，這邊我們會使用它原生的 editButton 來進行修改 TableView 的操作，所以我們會在 viewDidLoad 建立 editButton 再使用 setEditing 來變更 tableView 的修改狀態：

self.navigationItem.rightBarButtonItem = self.editButtonItem

這時我們點選右上方的 barButtonItem 就能進入刪除 cell 的模式：

接著我們使用 UITableViewDelegate 中的方法，來對我們的 TableView 的 delete 模式下進行刪除的動作，於是新增找到下列方法，在該方法新增下段程式碼：

接著來看看我們是否能夠進行刪除任務的操作吧：

儲存任務

當然我們的待辦事項總不能夠關掉 APP 後就清空資料了，所以我們需要把數據保存下來，因此，我們會用到 UserDefault 這個功能，將我們的數據存放到 APP 中，這邊我簡單定義兩個 functions 讓大家清楚意思：

這邊 saveData 方法將我們的 myTask 這個 Array 以 key 值為 ” myTask “ 儲存到本地。我們會在添加任務以及刪除任務的時候調用這個方法，即時儲存當前的 myTask 陣列。

接著 loadData 會在讀取 UserDefault 中一個key 值為 ” myTask “字串陣列，若是沒有值則回傳一個空的陣列，我們會在 viewDidLoad 的時候調用它。

如此一來，我們簡易版的 To-Do List 就完成啦（撒花

後記

這個簡易版 TableView 的練習只是一開始，順便給一些還不太熟悉或是剛入門學習的，之後會添加更多功能讓這個 APP 更加完善，感謝觀看。

本次 github 連結：

JeremyXue77/To-Do-List-Simple-

Contribute to To-Do-List-Simple- development by creating an account on GitHub.

github.com

Swift — 做個 To-Do List 吧（ 基礎篇 ）

前言