【Swift UIKit】ストップウォッチタイマーの実装方法!Timerクラスの使い方

この記事からわかること

  • SwiftUIKitストップウォッチタイマー実装する方法
  • Timerクラスの使い方
  • 時間表示させる方法

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

今回はゲーム開発などに使いがちなタイマー機能(ストップウォッチ)をSwiftで実装する方法をまとめていきたいと思います。

Swiftでストップウォッチタイマーを作るには?

【Swift UIKit】ストップウォッチタイマーの実装方法!Timerクラスの使い方

ポイント

タイマー機能を実装するためにはTimerクラスが重要になってきます。

実装の流れ

  1. StoryboardからUI部品(ラベルとボタン)を配置
  2. アウトレット変数を定義し紐付け
  3. Timerクラスでタイマー操作

今回はStoryboardを使用した場合で解説していきます。Swift UIでもストップウォッチのロジックは変わらないのでそのまま流用してみてください。

実装方法

StoryboardからUI部品(ラベルとボタン)を配置

Storyboardにタイマー表示用のUILabelスタート/ストップ用のUIButtonを2つ配置しておきます。

【Swift UIKit】ストップウォッチタイマーの実装方法!Timerクラスの使い方

アウトレット変数を定義し紐付け

続いてViewControllerクラスにIBOutletIBActionを定義しStoryboardのUIと紐付けをしておきます。

@IBOutlet  weak var timeLabel:UILabel!

@IBAction  func startBtnTapped() {
    // 
}

@IBAction  func stopBtnTapped() {
    //
}

これで前準備は整いました。ここからタイマーのロジック部分に入っていきます。

Timerクラスでタイマー操作

まずは経過時間を保持するtimeプロパティとTimerインスタンスを保持するtimerプロパティを用意します。

private var time:Double = 0.0
private var timer:Timer = Timer()

続いてタイマーをスタートさせる処理を記述します。Timer.scheduledTimerの使い方に関しては後述します。ここでは0.01秒ごとにtimeプロパティの値を0.01ずつ増やしています。

timeプロパティが保持するのは経過した秒数(ミリ秒も含む)のみなのでこれを時間や分数、秒数などに整形しておきます。

@IBAction  func startBtnTapped() {
    timer = Timer.scheduledTimer(withTimeInterval: 0.01, repeats: true, block: { [self] _ in
        self.time += 0.01
        let minutes = Int(self.time / 60)
        let second = Int(self.time) % 60
        let milliSecond = Int(self.time * 100) % 100
        self.timeLabel.text = String(format: "%02d:%02d:%02d", minutes, second, milliSecond)
    })
}

最後に動いているタイマーを一時停止させるためのボタン処理を記述します。

@IBAction  func stopBtnTapped() {
    self.timer.invalidate()
}

これでストップウォッチタイマーが完成しました。最後に全体のコードを載せておきます。

全体のコード

import UIKit

class ViewController: UIViewController{
    
    private var time:Double = 0.0
    private var timer:Timer = Timer()
    @IBOutlet  weak var timeLabel:UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction  func startBtnTapped() {
        timer = Timer.scheduledTimer(withTimeInterval: 0.01, repeats: true, block: { [self] _ in
            self.time += 0.01
            let minutes = Int(self.time / 60)
            let second = Int(self.time) % 60
            let milliSecond = Int(self.time * 100) % 100
            self.timeLabel.text = String(format: "%02d:%02d:%02d", minutes, second, milliSecond)
        })
    }
    
    @IBAction  func stopBtnTapped() {
        self.timer.invalidate()
    }
}

Timerクラス

公式リファレンス:Timerクラス

class Timer : NSObject

Timerは指定した任意の時間経過後に任意の処理を実行できる機能を提供するクラスです。

そして肝となるのがscheduledTimerメソッドです。

scheduledTimerメソッド

scheduledTimerメソッドは同名の引数違いで3種類ほど用意されていますが今回使用しているのはscheduledTimer(withTimeInterval:repeats:block:)になります。

class func scheduledTimer(
    withTimeInterval interval: TimeInterval,
    repeats: Bool,
    block: @escaping  @Sendable (Timer) -> Void
) -> Timer

3つの引数

おすすめ記事:【Swift】completionHandlerとは?使い方と@escapingの意味

返り値として指定されたパラメータで構成されたTimerオブジェクトが返ります。

self.timer = Timer.scheduledTimer(withTimeInterval: 0.01, repeats: true, block: { [self] timer in
           // 任意の処理
})

タイマーの停止:invalidateメソッド

動き出したタイマーを停止させるにはinvalidateメソッドを実行します。このメソッドは実行されているTimerオブジェクトから呼び出す必要があるのでscheduledTimerメソッドで帰ったオブジェクトから呼び出します。

self.timer.invalidate()

経過時間の表示方法

今回は経過時間が秒単位(小数点含むDouble型)で保持されています。ユーザーの目には秒ではなく、時間や分数、秒数、ミリ秒数で表示させたいのでそれぞれ算出していきます。

それぞれの計算方法

let time = 3850.45
let hour = Int(time / 3600)
let minutes = Int(time / 60)
let second = Int(time) % 60
let milliSecond = Int(time * 100) % 100

let displayTime = String(format: "%02d:%02d:%02d:%02d",hour,minutes,second,milliSecond)
// 01:64:10:45"

// 時間:経過時間 ÷ (60分 × 60秒)の商
// 分数:経過時間 ÷ 60秒の商
// 秒数:経過時間 ÷ 60 の余り
// m秒:(経過時間 × 100) ÷ 100 の余り
// 3850.45 × 100 = 385045
// 385045 ÷ 100 = 3850(商) … 45(余り) ←

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index