Day 11 - MainTableViewCell 介紹（留言板篇收尾）

昨天我們完成了 MainViewController 的程式碼解析，今天要來看看留言板中 自訂 Cell 的實作：MainTableViewCell。這也是我們留言板系列的最後一章。

Xib 設計

MainTableViewCell 的 Xib 設計非常簡單：

1. 建立一個新的 Xib 檔案，命名為 MainTableViewCell.xib。
2. 在介面中加入一個 Label 元件。
3. 將 Label 置中，並設定好約束（上下左右間距或居中對齊）。
4. 記得將 Label 連結到程式碼中的 @IBOutlet weak var lbTest。

這樣就完成一個可以顯示留言內容的自訂 Cell。

程式碼完整內容

//
//  MainTableViewCell.swift
//  messageboard
//
//  Created by imac-2627 on 2025/7/9.
//

import UIKit

class MainTableViewCell: UITableViewCell {

    @IBOutlet weak var lbTest: UILabel!
    static let identifier = "MainTableViewCell"

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        lbTest.numberOfLines = 0 // 多行顯示
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        // Configure the view for the selected state
    }
}

程式碼解析

1. IBOutlet – lbTest

@IBOutlet weak var lbTest: UILabel!

這是 顯示留言文字 的 UILabel，在 Xib 裡會跟 Cell 上的 Label 元件連接。

2. identifier

static let identifier = "MainTableViewCell"

每個自訂 Cell 都需要一個 識別字串，讓 TableView 在註冊或重複使用時能正確找到對應的 Cell。

3. awakeFromNib()

override func awakeFromNib() {
    super.awakeFromNib()
    lbTest.numberOfLines = 0 // 多行顯示
}

awakeFromNib() 是 Cell 初始化完成 時會呼叫的函式。
這裡設定 lbTest.numberOfLines = 0，讓 Label 可以自動換行，支援多行留言顯示。

4. setSelected()

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
}

這是 選取 Cell 時的狀態處理，目前沒有額外的 UI 修改。

系列小結 – 留言板功能完成

從 Day 7 到 Day 11，我們一步一步完成了留言板功能：

• Day 7：規劃留言板所需的 UI 元件
• Day 8：實際拉好元件並連接 IBOutlet
• Day 9：介紹 MainViewController 的部分程式碼
• Day 10：完整解析 MainViewController，包括新增、排序、編輯、刪除
• Day 11：最後完成 MainTableViewCell 的設計與程式碼

到這裡，留言板的 CRUD（新增、讀取、更新、刪除）已經全部完成！
接下來我們會進入新的主題，繼續挑戰鐵人賽 30 天的旅程。