【はじめてのKotlinプログラミング(3)】20分で作る計算アプリ(AndroidStudio) EditText

▼コード自体はこちらをご参考ください（動画内の書き方は微妙に古いので「作業風景」として参考ください） ↓↓↓ ※書き直したコードはこちら⇒リライト版

 

kotlinで、簡単な足し算が出来る計算アプリを作ってみます。

今回の主な学習のテーマはEditTextです。
文字や数字を入力してもらうときには、EditTextを使います。
ちなみに、この時の型は、String型でもなければint型でもなく
「Editabl型」という、もう1個別の型になります。
詳しくは後で説明しますが、なんとなく頭に入れておいてください。

 

動画

 

コード

▼activity_main.xml

▼MainActivity.kt

テキスト

 

 

XML

【1】edit text1

まずは、入力欄を２つ追加ですね。
ここでエディットテキストを使います。
パレットから入れる場合は
テキストの中がそれに該当します。

で、今回は数字なので、Numberを追加でいいんですが、
最初なのでひとまず基本系のPlainでいきましょう。

そうすると、コードの方を見るとEditTextが追加で来ているのがわかります。

textはいらないんですが
テキストのかわりに、似たようなやつで
ヒントテキストってのがあります。
何を入力するか、うっすらとした文字を表示させてあげるやつですね。

hintっていれると、出てきますのでエンター。
android:hint="数字を入力(1)"

idは、エディットテキストの１なので、わかりやすく[et1]とかにしておきましょう。
inputType
これはですね、先ほどのnumberと同じなんですが
入力時のキーボードを何にしますかってやつです。
ネットで登録フォームなどを入力するときに
名前を入れるときには文字入力が出るんですけど
電話番号を入力するときには、数字入力が出てくるのを記憶にありませんか？

要は、あれです。

今回はplainで追加したので、ナンバーにしておきましょう。
number

最初の選択肢であったNumberとかにしておくと、ここが最初からnumber設定になるということですね。

あとは、同じやつをもう１つ追加してあげます。

 

【２】edit text2

じゃあせっかくなので、今回はnumberを追加しましょう。

１）左右中央
２）上にひっつけて、
３）テキストは、いらないけれど、
４）hintテキストで、数字を入力(2)
android:hint="数字を入力(2)"
５）idはet2
６）インプットタイプはnumberと

次に、クリックするボタンを追加して
答えを表示するテキストを追加しましょう。

*****************************
ちなみに余談ですが
コンストレイントレイアウトの場合、
上のidを変えた場合、
こっちのidも変更しないと、紐づけがおかしくなってしまうので注意が必要です。

例えば、ここをedit1にしたら
下のほうもedit1にしないと、idが認識されなくてレイアウトがズレるので注意しましょう。

いったん戻しておきます。

*****************************

 

【３】ボタンを追加

１）ボタンを追加して、左右中央
２）上にひっつけて、余白は少し作りたいので、ちょっとだけ「８」とか
３）btnAddとかにして、わかりやすくておきます
４）テキストは、たす、とか。たすってダサイですね。まあ「クリック」でいいか。

次に、答えを表示するtextViewですね。

 

【４】答えを表示するテキスト

１）テキストViewを追加
２）左右中央、上にひっつけて
３）ここは答えなので、少し広めに余白をとりましょう。「３２」とか
４）それから答えは大きく表示させたいので、sizeをおもいきって「３６」とか
５）文字も「答え」とかにしてあげて
６）idは、テキストビューのアンサーなのでtvAns

最後に、「クリアボタン」を追加して、レイアウトは終了です。

 

【５】クリアボタン

１）ボタンを追加、左右中央、
２）ここは、これらとは、一線を画しておくという意味で、下にひっつけておきましょう。
余白は「３２」とか
２）名前は「clear」とかにしてあげて
３）idは、このままでもいいんですが、わかりやすく「btnClear」

 

はい、レイアウトは以上です。

 

プログラミング（kotlin）

やるのは３つ。
//１）Viewの取得(idで)
まずはViewを取得（IDで）して、こっちで操作できるようにします。

//２）クリック処理（足し算）
btnAddを押した時に、足し算をして
合計を表示する、という処理を書いていきます。

最後に
//３）クリア処理

クリアボタンを押すと、元に戻るようにしてあげましょう。

*********************************************
１）まずはIDの取得をします。
変数の名前は、全部IDと同じにしましょう。
そうするとわかりやすいですね。

1
2
3
4
5
//１）Viewの取得(idで)
       var et1:EditText = findViewById(R.id.et1)
       var et2:EditText = findViewById(R.id.et2)
       var addBtn:Button = findViewById(R.id.addBtn)
       var tvAns:TextView = findViewById(R.id.tvAns)

*********************************************
２）クリック処理（足し算）

 

1
2
3
4
5
6
btnAdd.setOnClickListener {
//Editable（編集）型　⇒ String(文字)型 ⇒　int型
        var sum :Int =et1.text.toString().toInt() + et2.text.toString().toInt()
        tvAns.text = "合計は" + sum
 
    }

 

---------------------------------------
で、ここの変数の隣にある「型」ですが、
右側から、明らかにこうであろうと推測出来る場合、
省略できます。
型推論っていうんですが、
ここでも、明らかにintってわかるので
「：Int」は消してあげてもエラーは出ません。

あとは、このsumを表示させてあげればいいので
tvAns.text = "合計は" + sum

ちょっとややこしいんですが、
ここはテキストを表示させてあげなければいけないので
""で何かしらテキストを表示させてください。
そうしないとエラーになります。

文字は表示させたくない場合は
""の中は空っぽでもＯＫです

あと、sumを””でかこうと
sumっていう文字が表示されるので注意が必要です。

パソコン君にとって
数字っていうのは計算するための記号なんで
文字なのか数字なのかをとにかく気にします。
まあ、慣れてくればたいしたことでもないのですが、そういうルールがあるということですね。
---------------------------------------

さあ、それではこれで一回エミュレータを起動してみましょう。
足し算はちゃんとできているはずです。

それでは最後に、
ここのクリアボタンを押した時の処理もかいてあげましょう。

 

*********************************************
３）クリア処理

ここはまあ、簡単です。
.clear()
.clear()
tvAns.text = "答え"

これでＯＫです。

1
2
3
4
5
6
//３）クリア処理
btnClear.setOnClickListener {
    et1.text.clear()
    et2.text.clear()
    tvAns.text = "答え"
}

さあ、完成しましたので
エミュレータを起動して確認してみましょう。

今回は足し算だけでしたが、
引き算とか掛け算とかのボタンを追加すると
電卓アプリみたいなのも作れます。
是非試してみてください