はじめに

EditTextに入力した数字がリアルタイムで他の値と計算されて画面に表示するにはどうすればいいか分からなかったので、調べたことをまとめました。

事前説明

今回は買い物処理を例に、支払い金額がすでに画面に表示されていて、預かり金額を入力するとおつりが自動的に表示されるようにします。

activity_purchase.xml


<EditText      //支払い金額がすでに表示されているEditTextのID
      android:id="@+id/editTextPurchaseTotal"/>
<EditText      //これから預かり金額を入力するEditTextのID
      android:id="@+id/editTextPurchaseMoney"/>
<EditText      //自動でおつり金額を計算し表示させるEditTextのID
      android:id="@+id/editTextPurchaseChange"/>

PurchaseActivity.kt

var intPurchaseTotal: Int = 0   //支払い金額
var intPurchaseMoney: Int = 0   //預かり金額
var intPurchaseChange: Int = 0  //おつり

テキストがリアルタイムで変更されるようにする

EditTextに文字を入力した時にリアルタイムに変更を行うには「addTextChangedListener」と「TextWatcher」を使用します。

PurchaseActivity.kt


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_purchase)

        editTextPurchaseMoney.addTextChangedListener(object : TextWatcher{
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
            //文字入力の前に行う処理を書く場所
            }
            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
            //文字入力の最中に行う処理を書く場所
            }
            override fun afterTextChanged(s: Editable?) {
            //文字入力の後に行う処理を書く場所
            }
        })
    }

上記画面の
「s: CharSequence?」は現在入力されている文字列を、
「s: Editable?」は編集後の文字列を表しています。

次に、「afterTextChanged」内に「おつり金額」の計算処理を書きます。
sは文字列のため、入力した数字を「.toString().toInt()」でInt型に変換します。

PurchaseActivity.kt


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_purchase)

        editTextPurchaseMoney.addTextChangedListener(object : TextWatcher{
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
            
            }
            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
            
            }
            override fun afterTextChanged(s: Editable?) {
            //入力値をInt型に変換し、おつりの計算をした後に「editTextPurchaseChange」に計算結果を表示させる。
            editTextPurchaseChange.setText((s.toString().toInt() - intPurchaseTotal).toString())
            }
        })
    }

これで「editTextPurchaseMoney」に金額を入力すると「editTextPurchaseChange」におつりが表示されます。

おわりに

今回はおつりの計算結果を表示させるのにEditTextを使用していますが、TextViewでも同様に表示することができます。（本来はそっちの方がいいかも）
また、支払い金額を事前に表示しておいたり、入力を数字に限定する必要があるのですが、今回それらの手順は省略しています。