說明

本篇將完成天氣 API 專案，並設定 TableView來顯示天氣資料，包括未來三個時段的預報。

實作

1. 設定 TableView 與註冊自定義 Cell 在 viewDidLoad 中，我們先註冊自定義的 TableViewCell，並且將 delegate 與 dataSource 指定為當前的 ViewController。

override func viewDidLoad() {
        super.viewDidLoad()
tbvsee.register(UINib(nibName: "TableViewCell", bundle: nil),
                        forCellReuseIdentifier: TableViewCell.identifier)
        tbvsee.delegate = self
        tbvsee.dataSource = self
}

2. 設定 TableView 的行數 由於天氣 API 提供未來三個時段的天氣資料，因此我們讓 TableView 顯示三行。

extension MainViewController: UITableViewDelegate, UITableViewDataSource  {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }
}

3. 設定每行的顯示內容 在 cellForRowAt 中，根據 API 取得的資料來設定每一行的文本，包括時間區間、天氣狀況、降雨機率、溫度區間、以及體感溫度。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tbvsee.dequeueReusableCell(withIdentifier: "TableViewCell",for: indexPath) as? TableViewCell else {
            return UITableViewCell()
        }
        // 設定文本
        if let weatherDat = weatherDat, weatherDat.records.location.count > 0 {
            let location = weatherDat.records.location[0] // 取第一個 location
            let weatherElements = location.weatherElement
            // 確保 weatherElement 有內容且 time 有內容
            if weatherElements.count > 0, weatherElements[0].time.count > indexPath.row {
                // 設定時間與雲層狀態
                let timeData = weatherElements[0].time[indexPath.row]
                let start = timeData.startTime
                let end = timeData.endTime
                let parameter = timeData.parameter.parameterName
                cell.latime.text = "\(start) ~ \(end)"
                cell.lawx.text = "\(parameter)"
                //設定下雨機率
                let second = location.weatherElement[1]
                let poptext = second.time[indexPath.row].parameter.parameterName
                cell.lapop.text = "\(poptext)%"
                //設定溫度區間
                let thard = location.weatherElement[2]
                let minT = thard.time[indexPath.row].parameter.parameterName
                let five = location.weatherElement[4]
                let maxT = five.time[indexPath.row].parameter.parameterName
                let maxmintext = "\(minT)~\(maxT)°C"
                cell.laminmanT.text = maxmintext
                //設定體感溫度
                let four = location.weatherElement[3]
                let temtext = four.time[indexPath.row].parameter.parameterName
                cell.laci.text = temtext
            }
        }
        return cell
    }

結語

通過以上步驟，我們成功將天氣 API 的資料展示在 TableView 中，每一行對應未來三個時段的天氣預報，包含詳細的溫度、天氣狀況、降雨機率等資料。這也標誌著這個天氣 API 專案的完結。
完成畫面示範：