Day22 待辦清單 (4)

11th鐵人賽

mikewang

團隊G社三劍客

2019-10-08 11:01:47

800 瀏覽

分享至

20191008

前言

今天的內容一樣是代辦清單的實作，主要是完成清單的畫面與程式碼的結合與呈現，並且把新增後的資料，重新載入呈現

現在，我們馬上開始！

練習紀錄

TodoList清單完成事件

首先將TableView Cell中的各個元件做連結

@IBOutlet weak var contentLabel: UILabel!
@IBOutlet weak var checkButton: UIButton!

加入狀態按鈕被點擊的事件

var id:String = ""

// complete todo
@IBAction func checkButtonPressed(_ sender: UIButton) {
    let realm = try! Realm()
    guard let todo =
realm.objects(ToDoList.self).filter("id =
'\(id)'").first else { return }
    let isDone = todo.status == "\(Status.done)"
    let updateStatus = isDone ? "\(Status.ongoing)" :
"\(Status.done)"
    
    try! realm.write {
        todo.status = updateStatus
        todo.endTime = isDone ? nil : Date()
    }
    
    let image = UIImage(named: !isDone ? "Circle1" :
"Circle0")
    checkButton.setImage(image, for: .normal)
}

透過id欄位，來辨別目前修改的資料是那一筆
狀態按鈕被點擊後，修改按鈕圖片，如果是進行中改為完成，如果是完成改為進行中
將資料回寫入Realm資料庫中
打勾為完成，圓圈為進行中
如果Todo清單完成後，會更新endTime時間欄位
內容寫在ListTableViewCell.swift

TodoList清單呈現相關

首先建立一個變數用來儲存TodoList清單資料

var todoList:[ToDoList] = []

在viewDidLoad()事件中讀取資料

override func viewDidLoad() {
    super.viewDidLoad()
    let realm = try! Realm()
    todoList = Array(realm.objects(ToDoList.self).filter("status != 'deleted'"))
}

除了被刪除的資料，完成與進行中的資料都取出

修改呈現資料筆數的方法

override func tableView(_ tableView: UITableView, numberOfRowsInSection section:
Int) -> Int {
            
    return  todoList.count
}

由於Section在本專案中只有一個，直接回傳不修改

修改Cell回傳的方法，將資料與元件做對應

override func tableView(_ tableView: UITableView, cellForRowAt indexPath:
IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for:
indexPath) as! ListTableViewCell
    let index = indexPath.row
    let imageName = todoList[index].status == "\(Status.ongoing)" ? "Circle0" :
"Circle1"
    cell.id = todoList[index].id
    cell.contentLabel.text = todoList[index].content
    cell.checkButton.setImage(UIImage(named: imageName), for: .normal)
    // Configure the cell...
    return cell
}

畫面中的cell id已設定

將cell轉型為自訂的『ListTableViewCell』型別
索引直接使用『indexPath.row』
如果Todo進行中就顯示『Circle0』圖檔，不然就顯示『Circle1』已完成
用『cell.contentLabel.text 』顯示頁面中，Label呈現的content內容

每次顯示頁面前重新讀取資料

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    let realm = try! Realm()
    todoList =
Array(realm.objects(ToDoList.self).filter("status
!= 'deleted'"))
    tableView.reloadData()    
}