Day17 - 仿刻 iOS 鬧鐘實作：MainTableViewCell 介紹

在前幾天我們已經規劃好整體的 UI 架構，今天開始進入 自訂 Cell 的設計。
在鬧鐘 App 的主畫面中，每一列都會顯示一個鬧鐘，這就是由 MainTableViewCell 來負責。

MainTableViewCell.swift 程式碼解析

import UIKit

class MainTableViewCell: UITableViewCell {

    @IBOutlet weak var lbNoon: UILabel!
    @IBOutlet weak var lbTime: UILabel!
    @IBOutlet weak var lbClock: UILabel!
    @IBOutlet weak var swTime: UISwitch!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Cell 初始化時會呼叫這裡
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        lbTime.text = nil
        lbClock.text = nil
        swTime.isOn = false
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        // 點擊 Cell 時的選取狀態
    }
}

程式碼重點說明

1. IBOutlet 元件

   • lbNoon → 顯示上午/下午 (AM / PM)
   • lbTime → 顯示時間（HH:mm）
   • lbClock → 顯示鬧鐘名稱或重複天數
   • swTime → 控制鬧鐘是否開啟的 Switch

2. awakeFromNib()

   • Cell 被初始化時呼叫，可以在這裡做 UI 設定。

3. prepareForReuse()

   • TableView 會重複使用 Cell，這裡要清除舊資料，避免顯示錯誤。

4. setSelected()

   • 點選 Cell 的時候呼叫，目前我們沒有額外處理。

MainTableViewCell.xib 介面設計

MainTableViewCell 搭配 XIB 檔案來設計 UI，主要步驟如下：

1. 新增一個 MainTableViewCell.xib

2. 在畫面中放入以下元件：

   • UILabel × 3（時間、AM/PM、名稱/重複天數）
   • UISwitch × 1（控制鬧鐘開關）

3. 對應到程式碼中的 IBOutlet。

4. 使用 Auto Layout 設定好位置與間距，確保在不同裝置上顯示正常。

其實這個 XIB 很簡單，只要拖曳幾個 Label 與 Switch，然後加上約束就能完成。

小結

今天我們完成了 MainTableViewCell 的介紹：

• 認識自訂 Cell 的程式碼結構
• 建立對應的 XIB，放置 Label 與 Switch
• 確保 Cell 可以被正確重複使用

這個 Cell 是主畫面最核心的部分，接下來我們會把它跟 MainViewController 串接，讓畫面能真正顯示一個個鬧鐘。