公開中のアプリ

[Swift]カウントアップ機能を実装する

今回はアプリ「もしも貯金箱」でも実装したカウントアップ機能を紹介したいと思います!
どんな機能なのかは下記を見てもらえればわかると思います!

今回のコード全部!

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()
    textField.keyboardType = UIKeyboardType.numberPad //キーボードを数字だけに変更
}

@IBOutlet weak var numLabel: UILabel!
@IBOutlet weak var textField: UITextField!
var timer: Timer! //タイマーの初期化
var num = 0 //ラベルに表示する用の変数
var intervalNum = 0 //テキストフィールドの値を10で割った値入れておく変数
var count = 0 //timerCounter()メソッドの実行回数をカウントする変数
    

    
//Pushボタンを押した時の処理
@IBAction func pushBtn(_ sender: Any) {
    intervalNum = (Int(textField.text!) ?? 0) / 10 //テキストフィールドに入力された値を10で割ってる
    startTimer() //タイマー起動
}


//タイマーの設定
func startTimer() {
        timer = Timer.scheduledTimer(
            timeInterval: 0.05, //タイマーの間隔を設定
            target: self,
            selector: #selector(self.timerCounter), //メソッドの設定
            userInfo: nil,
            repeats: true) //リピートするかどうか
    }

@objc func timerCounter() {
    num += intervalNum
    numLabel.text = String(num)
    count += 1
    
    if count == 10 {
        print("stop")
        timer.invalidate() //タイマーを止める
        count = 0
        textField.text = ""
    }
   }
    
}

下準備

とりあえずLabelとTextFieldとButtonをこんな感じで配置しましょう!

次は、下記コードのようにViewControllerと紐付けましょう!

@IBOutlet weak var numLabel: UILabel!
@IBOutlet weak var textField: UITextField!
@IBAction func pushBtn(_ sender: Any) {
}

下準備は以上です!
テキストフィールドに数字を入力して、ボタンを押したらラベルに表示される流れです〜!

実装の流れ

テキストフィールドに入力した数字分カウントアップさせてラベルに表示します。

例えばテキストフィールドに300と入力してボタンを押したとします。
1.2.3.4.5.6.7.8.9……..300とラベルを更新していくのではなく10回とか15回にわけてラベルを更新していきます。
そうしないと、テキストフィールドの数字が10000とかだったら10000になるまでに時間かかっちゃいます^^;

なのでまず300を10で割ります!(数字は10じゃなくても良いです!)
割ったら30になるので30を10回に分けてラベルに足していく流れです!

んで他にも実装方法は色々とあると思いますが、今回はscheduledTimerメソッドを使用してメソッドを10回連続で実装するって感じです!

Pushボタンを押した時の処理

ここから分解して説明していきます。
まずはPushボタンを押された時の処理を説明します。
該当のコードは下記です。

@IBAction func pushBtn(_ sender: Any) {
    IntervalNum = (Int(textField.text!) ?? 0) / 10
    startTimer()
}

まず2行目ですが、テキストフィールドに入力された値をInt型に変換しつつ、それを10で割って、変数IntervalNumに代入してます。
テキストフィールドに入力された値が1000だったら変数IntervalNumに代入される値は100になります。

2行目でタイマーを起動してます!

ちなみに下記のコードで数字のみのキーボードに変更できます!

override func viewDidLoad() {
    super.viewDidLoad()
    textField.keyboardType = UIKeyboardType.numberPad
}

タイマーの実装

var timer: Timer!
var num = 0
var IntervalNum = 0
var count = 0
func startTimer() {
        timer = Timer.scheduledTimer(
            timeInterval: 0.05,
            target: self,
            selector: #selector(self.timerCounter),
            userInfo: nil,
            repeats: true)
    }

@objc func timerCounter() {
    num += IntervalNum
    numLabel.text = String(num)
    count += 1
    if count == 10 {
        print("stop")
        timer.invalidate()
        count = 0
        textField.text = ""
    }
   }

次にタイマーの説明をします!

1行目でTimerメソッドの初期化をしてます!
Timerメソッドを使う場合これは絶対必要なので忘れないようにしましょう!

5行目から12行目までがタイマーの設定です!
7行目でタイマーの間隔を設定して9行目で実行するメソッドを設定します。

設定したメソッドが14行目から24行目のtimerCounter()です!
流れを整理しておくと、Pushボタンを押したらstartTimer()が実行されて、タイマーが起動します。
タイマーが起動されると0.05秒ごとにtimerCounter()が実行される流れです。

timerCounter()メソッドが何をしてるかと言うと、
変数numにIntervalNumを足した数値をラベルに表示してるだけです。

変数countが10になったらタイマーを止めないといけないので、
35行目でタイマーを止めて36行目で変数countを0に戻して、さらに
37行目でテキストフィールドの値を空にしてます。

まとめ

今回はカウントアップさせる機能を紹介いたしました!
長々と書いてしまいましたがやってることはすごく単純なので簡単だったと思います。

ちなみにこの機能とこの前書いたこの機能を合わせると良い感じになります!
テキストフィールドに入力した数値をカンマと円を付けて表示させる

読んでくれた人ありがとうございます!
何でもいいんでコメントくれると嬉しいです!
友達欲しいですw

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

アプリ