|
▼コード自体はこちらをご参考ください（動画内の書き方は微妙に古いので「作業風景」として参考ください） ↓↓↓ |
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)
//１）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)
//２）クリック処理（足し算）
btnAdd.setOnClickListener {
//Edit(編集型) ⇒ String(文字)型 ⇒ int型
var sum =et1.text.toString().toInt() + et2.text.toString().toInt()
tvAns.text = "合計は" + sum
}
//３）クリア処理
btnClear.setOnClickListener {
et1.text.clear()
et2.text.clear()
tvAns.text ="答え"
}
}
}
テキスト
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と同じにしましょう。
そうするとわかりやすいですね。
//１）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)
*********************************************
２）クリック処理（足し算）
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 = “答え”
これでＯＫです。
//３）クリア処理
btnClear.setOnClickListener {
et1.text.clear()
et2.text.clear()
tvAns.text = "答え"
}
さあ、完成しましたので
エミュレータを起動して確認してみましょう。
今回は足し算だけでしたが、
引き算とか掛け算とかのボタンを追加すると
電卓アプリみたいなのも作れます。
是非試してみてください
