iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
自我挑戰組

30天Swift純Code之旅 - 鬧鐘篇系列 第 30

Swift純Code之旅 Day30. 「新增鬧鐘功能(最終章) - 分手快樂」

前言

昨天我們已經完成使用Delegate回傳值到首頁的部分了,那今天就要來完成最後一個步驟:

如何讓回傳回來的資料顯示在畫面中

馬上開始吧!

實作

  1. 鬧鐘首頁顯示的鬧鐘可以有多個,因此我們這邊先宣告一個型態為「AddAlarmInfo」陣列
var alarmDatas: [AddAlarmInfo] = []
  1. 接下來在剛剛接收回傳值的地方,將這些回傳值給加入「alarmDatas」陣列內
extension AlarmViewController: UpdateAlarmListDelegate {
    
    func updateAlarmList(alarmData: AddAlarmInfo) {
        
        // 將回傳回來的鬧鐘資訊加入該陣列內
        self.alarmDatas.append(alarmData)
    }
}
  1. 修改TableView Delegate中的「numberOfRowsInSection」、「cellForRowAt」

numberOfRowsInSection:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        switch section {
        case 0:
            // 第一個Section下顯示一個Cell即可
            return 1
        case 1:
            // 第二個Section顯示的Cell數量為:alarmDatas陣列的成員個數
            return alarmDatas.count
        default:
            // 其餘不顯示任何Cell
            return 0
        }
    }
cellForRowAt:
case 1:
            // 將實作的AlarmOtherTableViewCell實體化,並顯示於第二個Section的畫面上
            guard let cell = tableView.dequeueReusableCell(withIdentifier: AlarmOtherTableViewCell.identifier, for: indexPath) as? AlarmOtherTableViewCell else { return UITableViewCell() }
            
            // 每個cell的alarmTimeLabel的文字內容 放入 相對應「alarmDatas」的time
            cell.alarmTimeLabel.text = alarmDatas[indexPath.row].time
            // 每個cell的alarmNoteLabel的文字內容 放入 相對應「alarmDatas」的annotation
            cell.alarmNoteLabel.text = alarmDatas[indexPath.row].annotation
            
            return cell
  1. 這時候會發現有Error:
    https://ithelp.ithome.com.tw/upload/images/20211010/20108999eW241TH4NZ.png

OH~ 原來是「alarmDatas」陣列內的time是屬於Date型別,Date型別無法放入Label的文字內,
因此我們必須要做一個Date轉換為String的動作。

  1. 新增一個將Date轉換為String的Function
// 實作Function:「dateToString」,一共有兩個參數
// 第一個date  是: 要轉換的時間
// 第二個format是: 要轉換爲何種時間格式
func dateToString(date: Date, format: String) -> String {
      
    // 宣告dateFormatter
    let dateFormatter = DateFormatter()
        
    // 設定要轉換的時間格式為: 帶入的參數「format」
    dateFormatter.dateFormat = format
        
    // 將時間轉換為字串後回傳
    return dateFormatter.string(from: date)
        
}
  1. 將它使用在TableView Delegate中的「cellForRowAt」內
case 1:
            // 將實作的AlarmOtherTableViewCell實體化,並顯示於第二個Section的畫面上
            guard let cell = tableView.dequeueReusableCell(withIdentifier: AlarmOtherTableViewCell.identifier, for: indexPath) as? AlarmOtherTableViewCell else { return UITableViewCell() }
            
            // 每個cell的alarmTimeLabel的文字內容放入
            // 相對應「alarmDatas」的time
            cell.alarmTimeLabel.text = dateToString(date: alarmDatas[indexPath.row].time, format: "HH:mm")
            
            // 每個cell的alarmNoteLabel的文字內容放入
            // 相對應「alarmDatas」的annotation
            cell.alarmNoteLabel.text = alarmDatas[indexPath.row].annotation
            
            return cell

執行看看吧!

/images/emoticon/emoticon16.gif/images/emoticon/emoticon16.gif/images/emoticon/emoticon16.gif/images/emoticon/emoticon16.gif怎麼失敗了呢?

原因是當你更改「alarmDatas」陣列的值後,並沒有人通知TableView已經更改值了,要更新畫面了
因此加入以下程式碼,通知TableView該刷新畫面囉!

    var alarmDatas: [AddAlarmInfo] = [] {
        // didSet的意思是:當這個變數被變更時,執行以下動作
        didSet {
            
            // TableView的畫面更新
            alarmTableView.reloadData()
        }
    }

再執行看看吧!

/images/emoticon/emoticon54.gif/images/emoticon/emoticon54.gif/images/emoticon/emoticon54.gif/images/emoticon/emoticon54.gif
成功啦!!!


這次鐵人賽也告一個段落了
雖然這段日子有快樂也有不快樂,但這些日子也是我人生中不會忘記的一段時間
很感謝這些日子的陪伴,希望大家接下來都能快快樂樂的:)


若對於任何一篇文章有疑問的,也很歡迎大家留言告訴我,
感謝大家的觀看!我們有緣就下次鐵人賽見囉!


上一篇
Swift純Code之旅 Day29. 「新增鬧鐘功能(2) - 如何使用Delegate傳值」
系列文
30天Swift純Code之旅 - 鬧鐘篇30

尚未有邦友留言

立即登入留言