iT邦幫忙

2022 iThome 鐵人賽

DAY 26
0
Mobile Development

從零開始的IOS開發日常系列 第 26

[鐵人賽 Day 26] Swift 仿刻 IOS 內建的 Clock - 馬錶 (2) 主要程式碼內容介紹

  • 分享至 

  • xImage
  •  

上次介紹了碼錶的 UI 介面和功能,今天要來介紹他的主要程式碼如了撰寫!

"Start" 功能

我們需要讓 Label 開始從 00:00:00 開始跑起!
並且把 “Start” 、 "Reset" 換成 "Stop" 、 "Lap"
這邊我是讓他用用一組隱藏一組顯示的方式來做到類似於替換的動作

@IBAction func action_button(_ sender: Any) {
        start_status = false  //這邊代表的是 ”Start“ Button 是不是還存在於畫面上,可以用它來將之後的其他功能做判斷依據
        start_button.isHidden = true
        stop_button.isHidden = false
        loop_button.isHidden  = false
        reset_button.isHidden = true
        timer = Timer.scheduledTimer(timeInterval: TimeInterval(0.01), target: self, selector: #selector(count_minute), userInfo: nil, repeats: true) //隔 0.01 秒的時候會執行 “count_minute” 的 Function
        
        RunLoop.current.add(timer, forMode: .common)  //切換線程,避免滑動 TabelView 的時候, Timer 會停止運作
    }

值得注意的是倒數第二行和最後一行,倒數第二行是一個函式,可以讓程式在一個固定的時間將固定的 Function 執行數次,的是要先用宜個變數去宣告這個 Time()

 var timer = Timer()

最後一行則是發現我滑動 Lap 的 TabelView 的時候,計算時間的函式就不會動了,這是因為當我們去觸發 TabelView 滑動手勢的時候 Mode 會切換到 UITrackingRunLoopMode 也就是 RunLoop.Mode.tracking ,由於 Mode 轉換了,處於 NSDefaultRunLoopMode 的 Timer 也就跟著被暫停了,只要將 Timer 運行的 Mode 改為 common ,如此 Timer 就可以同時在 kCFRunLoopDefaultMode 與 UITrackingRunLoopMode 運行

RunLoop.current.add(timer, forMode: .common)

再來是計算時間以及變更 Label 的程式碼,我們需要先設定五個變數,分別代表五個時間單位,最後再依靠 “ action_button” 的 Function 來個定 0.01 秒執行一次在 millsecond 的單位累加上去!

最後用 showXXX 來設置每個單位需要顯示的內容,是個位數的話前面要補零,再把這些單位串接起來放到 showtime (顯示在畫面的 Label)

@objc func count_minute() {
        if start_status == false {
            millsecond += 1
            millsec = millsecond % 100
            sec = (millsecond / 100) % 60
            min = millsecond / 6000
            hour = millsecond / 360000  //累加
            
            let showmillsec = millsec > 9 ? "\(millsec)" : "0\(millsec)"
            let showsec = sec > 9 ? "\(sec)" : "0\(sec)"
            let showmin = min > 9 ? "\(min)" : "0\(min)"
            let showhour = hour > 9 ? "\(hour)" : "0\(hour)"
            showtime.text = "\(showhour):\(showmin):\(showsec):\(showmillsec)"
        }  //變更顯示內容以及串接到 Label
        
    }

"Lap" 功能

我們需要先新增一個字串變數,用來存放擷取時間的變數
然後每按一次要更新 TabelView 的內容

 @IBAction func lap(_ sender: Any) {
        stopwatch_list.insert(showtime.text!, at: 0) //由於資料必須是往下堆疊的,所以我們用這個函式去存放
        tableview.reloadData()  //更新 TabelView 的內容
    }

"Stop" 功能

需要把 "start_status" 設為 true
並且把除了 “Reset” 其他的按鈕設為隱藏
記得也要把 Timer 暫停使用

@IBAction func stop(_ sender: Any) {
        start_status = true
        start_button.isHidden = false
        stop_button.isHidden = true
        loop_button.isHidden  = true
        reset_button.isHidden = false
        timer.invalidate()
}

"Reset" 功能

這邊要重置 TabelView 的內容,所以我們要將存放擷取時間陣列的變數清空、計算時間的單位清零,並且把顯示時間的 Label 變成預設的時間表示
在重整一次 TabelView

@IBAction func reset(_ sender: Any) {
        stopwatch_list = []
        millsecond = 0
        showtime.text = "00:00:00:00"
        tableview.reloadData()
    }

TabelView 的功能撰寫

我們要先在 viewDidLoad 註冊 TabelView
再來就是 TabelView 的基本設定,內容偏基本,這裡就不多贅述囉!

extension stopwatchVC: UITableViewDataSource , UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        stopwatch_list.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "loop_cell", for: indexPath) as! loop_cell
        cell.count_label.text = "Lap \(stopwatch_list.count-indexPath.row)"
        cell.time_label.text = stopwatch_list[indexPath.row]
        return cell
    }
}

以上就是今天介紹的碼表程式碼內容介紹,明天會介紹倒數的 UI 介面和功能介紹喔!


上一篇
[鐵人賽 Day 25] Swift 仿刻 IOS 內建的 Clock - 馬錶 (1) 功能及 UI 介紹
下一篇
[鐵人賽 Day 27] Swift 仿刻 IOS 內建的 Clock - 計時器 (1) 功能及 UI 介紹
系列文
從零開始的IOS開發日常30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言