Day15 - 仿刻 iOS 鬧鐘實作：主畫面 UI 與基本功能

本篇文章將說明 MainViewController.swift 的設計思路，重點在於 鬧鐘列表顯示 與 UI 功能控制。

導入套件

import UIKit
import RealmSwift
import UserNotifications

• UIKit：提供畫面 UI 元件，如 TableView 和按鈕。
• RealmSwift：管理鬧鐘的資料來源。
• UserNotifications：後續會用於本地通知（今天先放著）。

主要 IBOutlet 與屬性

@IBOutlet weak var tbvData: UITableView!
var alarms: [AlarmData] = []
var isEdting: Bool = false

• tbvData：顯示鬧鐘列表的 TableView。
• alarms：鬧鐘的資料來源（後續從 Realm 讀取）。
• isEdting：控制 TableView 是否進入編輯模式。

LifeCycle 與初始化

override func viewDidLoad() {
    super.viewDidLoad()
    setUI()
    setupNavigationBar()
    requestNotificationPermission()
    
    NotificationCenter.default.addObserver(
        self,
        selector: #selector(showAlarmAlert(_:)),
        name: NSNotification.Name("AlarmDidFire"),
        object: nil
    )
}

• 初始化 UI 與導航列。
• 請求本地通知權限（下一篇會更深入）。
• 監聽 AlarmDidFire，用於鬧鐘響起提醒。

導航列與 UI 設定

func setupNavigationBar() {
    navigationController?.navigationBar.barTintColor = .systemGray6
    navigationItem.rightBarButtonItem = UIBarButtonItem(
        image: UIImage(systemName: "plus"),
        style: .plain,
        target: self,
        action: #selector(addTapped)
    )
    navigationItem.leftBarButtonItem = UIBarButtonItem(
        title: "編輯",
        style: .plain,
        target: self,
        action: #selector(editTapped)
    )
    navigationController?.navigationBar.prefersLargeTitles = true
    navigationItem.title = "鬧鐘"
}

func setUI() {
    tbvData.dataSource = self
    tbvData.delegate = self
    tbvData.register(UINib(nibName: "MainTableViewCell", bundle: nil), forCellReuseIdentifier: "MainTableViewCell")
}

• 右上角加號：新增鬧鐘。
• 左上角編輯：切換編輯模式。
• 設定 TableView 的資料來源與 Cell 註冊。

新增與編輯鬧鐘

@objc func addTapped() {
    let addAlarmVC = AddAlarmViewController()
    addAlarmVC.delegate = self
    let navController = UINavigationController(rootViewController: addAlarmVC)
    self.present(navController, animated: true)
}

• 點擊「加號」後，跳轉到 AddAlarmViewController。
• 新增完成後透過 delegate 更新列表。

編輯模式切換

@objc func editTapped() {
    isEdting.toggle()
    tbvData.setEditing(isEdting, animated: true)
    navigationItem.leftBarButtonItem?.title = isEdting ? "完成" : "編輯"
    
    tbvData.visibleCells.forEach { cell in
        if let switchControl = (cell as? MainTableViewCell)?.swTime {
            switchControl.isHidden = isEdting
        }
    }
}

• 點擊「編輯」切換模式。
• 編輯時隱藏 Cell 上的開關控件。

小結

今天我們完成了 MainViewController 的 UI 功能：

1. TableView 顯示鬧鐘資料。
2. 導航列按鈕（新增、編輯）。
3. 切換編輯模式並隱藏開關。

下一篇（Day16）會進一步處理 資料操作與通知功能，讓鬧鐘真正能「新增、刪除、響起」。