iT邦幫忙

2025 iThome 鐵人賽

DAY 14
0
Mobile Development

我將成為Swift之強者系列 第 14

Day14 - 仿刻 iOS 鬧鐘實作:介面需求規劃

  • 分享至 

  • xImage
  •  

Day14 - 仿刻 iOS 鬧鐘實作:介面需求規劃

昨天我們已經完成了 通知權限設定,確保鬧鐘能正常跳出提醒。
接下來,我們要進一步規劃 整個鬧鐘 App 會用到的主要介面。這一步就像是建房子前的設計藍圖,先了解有哪些頁面、每個頁面需要哪些元件,後續在實作程式時才不會迷路。


1.MainViewController

這是鬧鐘 App 的 主界面,用來顯示所有已設定的鬧鐘。

元件包含:

  • TableView:顯示鬧鐘列表,每一列對應一個鬧鐘。
  • TabBar / NavigationBar:提供「新增鬧鐘」、「編輯鬧鐘」等操作。

https://ithelp.ithome.com.tw/upload/images/20250928/20178625z49Tvkko97.png


2.MainTableViewCell

每一列負責呈現單一鬧鐘的資訊。

元件包含:

  • Switch → 控制鬧鐘開關

  • 三個 Label

    • 時間(HH:mm)
    • 上午/下午(AM/PM)
    • 鬧鐘名稱及重複天數

https://ithelp.ithome.com.tw/upload/images/20250928/20178625ye5Pp7fGMw.png
https://ithelp.ithome.com.tw/upload/images/20250928/20178625X3tyNHlIzG.png


3.AddAlarmViewController

這個頁面用來 新增或編輯鬧鐘

使用者可以設定:

  • 鬧鐘時間
  • 鬧鐘名稱
  • 鬧鐘聲音
  • 是否啟用重複功能
    https://ithelp.ithome.com.tw/upload/images/20250928/20178625Y1Jm5jD9fj.png

4.RepeatViewController

這個頁面專門用來設定鬧鐘的 每週重複天數

  • 使用 TableView 呈現一週七天
  • 提供勾選效果,讓使用者可以自由選擇哪些天要響
    https://ithelp.ithome.com.tw/upload/images/20250928/20178625dFsmXKIEGO.png

5.RepeatTableViewCell

自訂的 TableViewCell,用來呈現單一星期列。

元件包含:

  • Label → 顯示星期名稱
  • Checkmark(或選中效果) → 是否選擇該天

https://ithelp.ithome.com.tw/upload/images/20250928/20178625ljuhy6Deua.png


小結

以上五個主要介面構成了完整的鬧鐘 App:

  1. MainViewController → 主畫面,管理所有鬧鐘
  2. MainTableViewCell → 單列鬧鐘顯示
  3. AddAlarmViewController → 新增/編輯鬧鐘
  4. RepeatViewController → 設定重複天數
  5. RepeatTableViewCell → 自訂列呈現星期選擇

有了這些頁面的規劃,我們就能清楚知道未來程式碼要怎麼組合。
接下來,從 主畫面 (MainViewController) 開始,逐步帶大家進行實作。


上一篇
Day13 - 仿刻 iOS 鬧鐘實作:AppDelegate 與通知權限設定
下一篇
Day15 - 仿刻 iOS 鬧鐘實作:主畫面 UI 與基本功能
系列文
我將成為Swift之強者18
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言