iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0
Mobile Development

少年K的Swift奇幻漂流記系列 第 27

Day27 Swift Clock App 實作 Part 7:重複天數畫面

  • 分享至 

  • xImage
  •  

在這一篇教學中,我們將介紹如何實現鬧鐘應用中的「重複天數」選擇畫面,這個功能可以讓用戶在設定鬧鐘時,選擇鬧鐘應該在一周中的哪些天重複響起。實作內容將包含 RepeatViewController 的設置及 UITableView 的使用。

1. 界面設置與初始化

首先,我們透過 RepeatViewController 來管理這個畫面。這個 ViewController 會展示一個 UITableView 列表,讓用戶可以勾選重複的星期天數。我們也定義了一個代理協議 RepeatViewControllerDelegate,讓其他頁面可以接收到用戶選擇的重複天數。

import UIKit

protocol RepeatViewControllerDelegate: AnyObject {
    func didUpdateRepeatDays(_ days: [Bool])
}

class RepeatViewController: UIViewController {
    
    // MARK: - IBOutlet
    @IBOutlet weak var tableView: UITableView!
    
    // MARK: - Property
    weak var delegate: RepeatViewControllerDelegate?
    let daysOfWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
    var selectedDays: [Bool] = Array(repeating: false, count: 7)
    
    // MARK: - LifeCycle
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        tableView.reloadData()
    }
}

1.1 RepeatViewController 的基本設置

RepeatViewController 中,我們使用 IBOutlet 連結 UITableView,並使用 daysOfWeek 來存放星期日到星期六的字串。selectedDays 是一個布林陣列,記錄用戶對每一天的選擇狀態。

viewDidLoad() 被呼叫時,我們初始化界面並重新加載 tableView 的數據。

2. 界面配置與功能實現

setupUI() 中,我們設置頁面的標題、註冊 UITableViewCell,並設置 UITableView 的 delegate 和 dataSource。此外,我們也加入了「完成」按鈕,當用戶選擇完成後點擊此按鈕,會將選擇的天數傳遞給代理方。

// MARK: - UI Settings

func setupUI() {
    title = "重複"
    tableView.register(UINib(nibName: "RepeatTableViewCell", bundle: nil), forCellReuseIdentifier: RepeatTableViewCell.identifier)
    tableView.delegate = self
    tableView.dataSource = self
    
    navigationItem.rightBarButtonItem = UIBarButtonItem(title: "完成", style: .plain, target: self, action: #selector(doneTapped))
}

3. 完成按鈕與代理傳遞資料

當用戶完成選擇後,點擊「完成」按鈕會觸發 doneTapped() 方法,該方法會將 selectedDays 陣列透過代理方法傳遞給上層頁面,並關閉當前的 RepeatViewController

// MARK: - IBAction

@objc func doneTapped() {
    delegate?.didUpdateRepeatDays(selectedDays)
    navigationController?.popViewController(animated: true)
}

4. UITableView 的設置

為了讓用戶選擇重複的天數,我們使用 UITableView 來展示一周的 7 天。當用戶點擊某一天時,該天的選擇狀態會被更新,並在畫面上以勾選 (checkmark) 的方式顯示選中狀態。

UITableViewDataSource 中,我們定義了 numberOfRowsInSection 來指定顯示的行數為 7 行,分別代表一周的七天。在 cellForRowAt 中,根據 selectedDays 的布林值來決定是否顯示勾選符號。

// MARK: - Extensions

extension RepeatViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return daysOfWeek.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "RepeatTableViewCell", for: indexPath) as! RepeatTableViewCell
        cell.lbTest.text = daysOfWeek[indexPath.row]
        cell.accessoryType = selectedDays[indexPath.row] ? .checkmark : .none
        return cell
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        selectedDays[indexPath.row].toggle() // 切換選擇狀態
        tableView.reloadRows(at: [indexPath], with: .automatic)
    }
}

4.1 行為解釋

  • numberOfRowsInSection: 回傳 7,表示 UITableView 會有 7 行,對應一周的天數。
  • cellForRowAt: 設定每個單元格顯示的文字(對應星期日到星期六),並根據 selectedDays 判斷是否顯示勾選符號。
  • didSelectRowAt: 當用戶點擊某一行時,該行的選擇狀態會切換,並自動更新畫面以顯示最新狀態。

5. 總結

這篇教學介紹了如何在 Swift 中實現「重複天數」選擇功能,透過 UITableView 讓用戶可以選擇鬧鐘需要重複的天數,並且利用代理方法將選擇結果傳遞回上層頁面。這個功能可以讓鬧鐘應用更加靈活地滿足用戶需求。

下一步,您可以將這個重複天數選擇功能整合到鬧鐘的設定頁面中,並將選擇的結果儲存在資料庫中,實現完整的鬧鐘重複提醒功能。


上一篇
Day26 Swift Clock App 實作 Part6:新增鬧鐘頁面
下一篇
Day28 Swift Clock App 實作 Part 8:選擇鈴聲畫面
系列文
少年K的Swift奇幻漂流記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言