【初心者がAndroid Studio+kotlinで電卓アプリを作ってみる】第2回:1+2が計算出来るだけの電卓編

kotlinで電卓アプリ作成

電卓アプリを作ってみるシリーズ一覧はこちらをクリック

今回のポイント

前回はactivity_main.xmlを主に編集していましたが今回の主役MainActivity.ktを編集していきます。今回出来るアプリは1+2=3だけのへっぽこアプリですが基礎的なことを学びました。

作る前にViewBindingを使えるようにする

ViewBindingを使えるようにする?私もよくわかっていませんが、ButtonやTextViewを使えるようにするおまじないだと思ってください。

    buildFeatures {
        viewBinding = true
    }

次にMainActivity.ktを編集

MainActivity.kt初期状態
MainActivity.kt編集後
package com.example.calculatorapplication
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.calculatorapplication.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
    }
}

これでやっと前回作ったButtonやTextViewを使用できるようになったので次に「ボタン1(id:buttonOne)」を押したときにTextView(id:textViewValuedisplay)に”1″を表示してみましょう。

Buttonを押したときに反応するようにしてみる

三行(15、16、17行)追加して試してみると

        binding.buttonOne.setOnClickListener {
            binding.textViewValuedisplay.text = "1"
        }

1が表示された。ということは応用でボタン2(id:buttonTwo)も出来ますね。

        binding.buttonTwo.setOnClickListener { // 追加
            binding.textViewValuedisplay.text = "2" // 追加
     }

これでボタン2(id:buttonTwo)が押されたとき”2″が表示されるようになった。
ではボタン押下時全部書いていきましょう。処理は後で考ようと思います。

        // 1ボタンが押された時
        binding.buttonOne.setOnClickListener {
            binding.textViewValuedisplay.text = "1"
        }
        // 2ボタンが押された時
        binding.buttonTwo.setOnClickListener { // 追加
            binding.textViewValuedisplay.text = "2" // 追加
        }
        // +ボタンが押されたとき
        binding.buttonAddition.setOnClickListener {} // 追加
        // =ボタンが押されたとき
        binding.buttonEqual.setOnClickListener {} // 追加
        // ACボタンが押されたとき
        binding.buttonAllClear.setOnClickListener {} // 追加
    }
}

箱(変数)を準備する

まずは箱の名前を考えます、Google翻訳によると
一時保存用の値:Value for temporary storage
計算用の値1番目:First value for calculation
計算用の値2番目:Second value for calculation
結果用の値:Value for results
ですが長いのでちょっと変更して
一時保存用の値:valueForTempStorage
計算用の値1:valueForCalc1st
計算用の値2:valueForCalc2nd
結果用の値:valueForResults
なのでこれを追加して行きます。

MainActivity.ktに変数追加
        // 値を格納する変数
        var valueForTempStorage = 0 // 一時保存用の値
        var valueForCalc1st = 0 // 計算用の値1番目
        var valueForCalc2nd = 0 // 計算用の値2番目
        var valueForResults = 0 // 結果用の値

ACボタンが押された時の処理を書いてみる

アプリケーションを実行したときにいろいろと試せるように処理を書いてみる。
オールクリアなのでとりあえず全部初期の状態にすればいいんだと思います。

MainActivity.ktにAC押下時の処理を追加
        // ACボタンが押されたとき
        binding.buttonAllClear.setOnClickListener {
            valueForTempStorage = 0
            valueForCalc1st = 0
            valueForCalc2nd = 0
            valueForResults = 0
            binding.textViewValuedisplay.text = ""
        }

これでアプリを起動したときの状態になるはずですよね。

1+2が出来るようにする

1ボタン押下時に一時保存用のvalueForTempStorage変数に1を入れる
2ボタン押下時に一時保存用のvalueForTempStorage変数に2を入れる
+ボタン押下時にvalueForTempStorage変数を計算用の値1番目valueForCalc1stに入れて一時保存用の値は初期化する
=ボタン押下時にvalueForTempStorage変数を計算用の値2番目valueForCalc2stに入れて一時保存用の値は初期化する
計算用の値1番目と計算用の値2番目を足し算して結果用の値valueForResultsに入れる
結果用の値valueForResultsをTextViewに表示する

  1. ボタン1押下時に一時保存用のvalueForTempStorage変数に1を入れる
  2. ボタン2押下時に一時保存用のvalueForTempStorage変数に2を入れる
  3. ボタン+押下時にvalueForTempStorage変数を計算用の値1番目valueForCalc1stに入れて
    一時保存用の値は初期化する
  4. ボタン=押下時にvalueForTempStorage変数を計算用の値2番目valueForCalc2stに入れて
    一時保存用の値は初期化する
    計算用の値1番目と計算用の値2番目を足し算して結果用の値valueForResultsに入れる
    結果用の値valueForResultsをTextViewに表示する
MainActivity.ktに足し算の処理を追加する
package com.example.calculatorapplication
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.calculatorapplication.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
        // 値を格納する変数
        var valueForTempStorage = 0 // 一時保存用の値
        var valueForCalc1st = 0 // 計算用の値1番目
        var valueForCalc2nd = 0 // 計算用の値2番目
        var valueForResults = 0 // 結果用の値
        // 1ボタンが押された時
        binding.buttonOne.setOnClickListener {
            valueForTempStorage = 1
            binding.textViewValuedisplay.text = "1"
        }
        // 2ボタンが押された時
        binding.buttonTwo.setOnClickListener {
            valueForTempStorage = 2
            binding.textViewValuedisplay.text = "2"
        }
        // +ボタンが押されたとき
        binding.buttonAddition.setOnClickListener {
            valueForCalc1st = valueForTempStorage
            valueForTempStorage = 0
        }
        // =ボタンが押されたとき
        binding.buttonEqual.setOnClickListener {
            valueForCalc2nd = valueForTempStorage
            valueForTempStorage = 0
            valueForResults = valueForCalc1st + valueForCalc2nd
            binding.textViewValuedisplay.text = valueForResults.toString()
        }
        // ACボタンが押されたとき
        binding.buttonAllClear.setOnClickListener {
            valueForTempStorage = 0
            valueForCalc1st = 0
            valueForCalc2nd = 0
            valueForResults = 0
            binding.textViewValuedisplay.text = ""
        }
    }
}

実行してみる

ツールバーのRun ‘app’をクリック
出来ること、1+2=3 2+1=3 1+1=2 2+2=4
出来ないこと、1+2+2=5など+ボタンが2回以上押された場合
1+2=3+1=4などの=を押した後でさらに計算をしたい場合
11+22など二けた以上の計算
次回は+ボタンが2回以上の処理や二桁や三桁の足し算が出来るように改良してみたいと思っています。

コメント