maharu
haru
maharu
動作環境
Item | Version |
---|---|
Swift | 5.3 |
Xcode | 12.5 |
MacOS | Big Sur 11.3.1 |
完成イメージ
[Start]、[Stop]、[Reset]ボタンがあり、100分の1秒まで計測できるストップウォッチのような簡単なアプリです。
タイマーアプリの開発手順
プロジェクトの作成
Create a new Xcode project
→App
でプロジェクトを作成します。
①「Product Name」に、TimerApp
と入力
②「Interface」は、Storyboardを選択
③「Language」はSwiftを選択
④全てチェックなし
⑤「Next」をクリック
①保存先のフォルダを選択
②「Create」をクリック
storyboard(画面レイアウト)の編集
①ボードの上のバーをクリック
② (Embed In)をクリック
③Navigation Controller
をクリック
ナビゲーションバーの設定が完了
①ナビゲーションバーのTitle付近をクリック
② (Show the Attributes inspector)をクリック
③Bar Tintをお好みの色に設定
④Title Colorを見やすい色に設定
①ナビゲーションバーの中央をクリック
② (Show the Attributes inspector)をクリック
③のタイトルに任意の名前を入力
① (Library)をクリック
②LabelとButtonをstoryboardへドラッグ&ドロップ
①Labelを選択(表示は上記(STEP.4)の画像の初期状態のLabel)
② (Show the Attributes inspector)をクリック
③Textを00:00:00
に変更
④ をクリック
⑤Sizeを50に変更
⑥Doneをクリック
①Labelを選択
② (Align)をクリック
③2箇所 ✅ を入れる
④Add 2 Constraints をクリック
①shiftを押しながらButtonを3つ選択
② (Show the Attributes inspector)をクリック
③Text Colorを見やすい色に変更
④Backgroundをお好みの色に変更
⑤TitleはButtonを1個ずつ選択し、左から[Start]、[Stop]、[Reset]に変更
①shiftを押しながらButtonを3つ選択
② (Embed In)をクリック
③Stack Viewを選択
①shiftを押しながらButtonを3つ選択
② (Add New Constraints)をクリック
③widthとheightを50に設定
④2箇所に ✅ が入っていることを確認
⑤Add 6 Constraints をクリック
①StackViewを選択
② (Show the Attributes inspector)をクリック
③DistributionをFill Equallyに変更
①StackViewを選択
② (Align)をクリック
③1箇所 ✅ を入れる
④Add 1 Constraints をクリック
①StackViewを選択
② (Add New Constraints)をクリック
③の数字を50に変更後、数字下の縦棒が赤になっていることを確認
④Add 1 Constraints をクリック
①Buttonを選択
② (Show the identity inspector)をクリック
③ ➕ をクリック
④Key Pathにlayer.cornerRadius
と記述し、TypeはNumber
、Valueは15
を選択
コーディング
①controlを押しながらLabelをクリックし、override func viewDidLoad()
の上にドラッグ&ドロップ
②のNameにtimerLabelと記述
③connectをクリック
下記画像のようにLabelが接続されます
①controlを押しながらButtonをクリックし、override func viewDidLoad()
の下の }
と一番下の }
の間にドラッグ&ドロップ
②NameにstartButtonActon
と記述
③connectをクリック
stopButtonActon
、resetButtonActon
と記述し、上記の操作を実行する上記画像の手順を他の2つのボタンにも適用することによって、下記画像のようにLabelが接続されます
class ViewController: UIViewController
の下に2つの変数を宣言する
import UIKit class ViewController: UIViewController { var startTime: TimeInterval? = nil var timer = Timer() @IBOutlet weak var timerLabel: UILabel! override func viewDidLoad() { super.viewDidLoad() }
@IBAction func startButtonAction(_ sender: Any)
内に下記のコードを記述
@IBAction func startButtonAction(_ sender: Any) { timer.invalidate() self.startTime = Date.timeIntervalSinceReferenceDate self.timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(timerCounter), userInfo: nil, repeats: true) }
上記コードのTimer.scheduledTimerには必須の関数があるので、このコードの下に下記コードを記述
@objc func timerCounter() { guard let startTime = self.startTime else { return } let time = Date.timeIntervalSinceReferenceDate - startTime let min = Int(time / 60) let sec = Int(time) % 60 let msec = Int((time - Double(sec)) * 100.0) self.timerLabel.text = String(format: "%02d:%02d:%02d", min, sec, msec) }
@IBAction func stopButtonAction(_ sender: Any)
内に下記のコードを記述
@IBAction func stopButtonAction(_ sender: Any) { timer.invalidate() }
@IBAction func resetButtonAction(_ sender: Any)
内に下記のコードを記述
@IBAction func resetButtonAction(_ sender: Any) { self.startTime = nil self.timerLabel.text = "00:00:00" }
下記に全体のコードを載せておきます。⌘Rで実行し、記事の前段の完成イメージと比較してみて下さい。
import UIKit class ViewController: UIViewController { var startTime: TimeInterval? = nil var timer = Timer() @IBOutlet weak var timerLabel: UILabel! override func viewDidLoad() { super.viewDidLoad() } @IBAction func startButtonAction(_ sender: Any) { timer.invalidate() self.startTime = Date.timeIntervalSinceReferenceDate self.timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(timerCounter), userInfo: nil, repeats: true) } @objc func timerCounter() { guard let startTime = self.startTime else { return } let time = Date.timeIntervalSinceReferenceDate - startTime let min = Int(time / 60) let sec = Int(time) % 60 let msec = Int((time - Double(sec)) * 100.0) self.timerLabel.text = String(format: "%02d:%02d:%02d", min, sec, msec) } @IBAction func stopButtonAction(_ sender: Any) { timer.invalidate() } @IBAction func resetButtonAction(_ sender: Any) { self.startTime = nil self.timerLabel.text = "00:00:00" } }
まとめ
今回は簡単に作れるタイマーアプリの作り方について解説してきました。タイマーの作り方はアプリ開発に興味を持った時に、なかなか調べても参考になる良い記事を見つけられなかったので、参考にしていただけたら嬉しいです。
コードについては複数の記述方法がありますので、ご自身で調べてみるのも面白いと思います。