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

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

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

 

動画

 

コード

▼activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <EditText
        android:id="@+id/et1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:ems="10"
        android:hint="数字を入力(1)"
        android:inputType="number"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/et2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="数字を入力(2)"
        android:inputType="number"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et1" />

    <Button
        android:id="@+id/btnAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="クリック"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et2" />

    <TextView
        android:id="@+id/tvAns"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="答え"
        android:textSize="36sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnAdd" />

    <Button
        android:id="@+id/btnClear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:text="clear"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

▼MainActivity.kt

package com.example.addapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //1)Viewの取得(idで)
        var et1:EditText = findViewById(R.id.et1)
        var et2:EditText = findViewById(R.id.et2)
        var btnAdd :Button = findViewById(R.id.btnAdd)
        var tvAns :TextView = findViewById(R.id.tvAns)
        var btnClear:Button =findViewById(R.id.btnClear)

        //2)クリック処理(足し算)
        btnAdd.setOnClickListener {
            //Edit(編集型) ⇒ String(文字)型 ⇒ int型
            var sum =et1.text.toString().toInt() + et2.text.toString().toInt()
            tvAns.text = "合計は" + sum
        }

        //3)クリア処理
        btnClear.setOnClickListener {
            et1.text.clear()
            et2.text.clear()
            tvAns.text ="答え"
        }
    }
}

 

テキスト

 

XML

【1】edit text1

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

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

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

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

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

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

要は、あれです。

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

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

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

 

【2】edit text2

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

1)左右中央
2)上にひっつけて、
3)テキストは、いらないけれど、
4)hintテキストで、数字を入力(2)
android:hint=”数字を入力(2)”
5)idはet2
6)インプットタイプはnumberと

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

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

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

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

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

 

【3】ボタンを追加

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

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

 

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

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

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

 

【5】クリアボタン

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

 

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

 

プログラミング(kotlin)

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

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

最後に
//3)クリア処理

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

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

 //1)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)

*********************************************
2)クリック処理(足し算)

 

 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

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

文字は表示させたくない場合は
“”の中は空っぽでもOKです

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

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

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

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

 

*********************************************
3)クリア処理

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

これでOKです。

        //3)クリア処理
        btnClear.setOnClickListener {
            et1.text.clear()
            et2.text.clear()
            tvAns.text = "答え"
        }

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

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

    コメントを残す