公開日：2020/02/11
更新日：2020/08/03

【Kotlin基礎】EditTextでテキストの入力欄を実装する方法を解説

Kotlinでテキストの入力欄を実装する方法が知りたい。
xmlではなく、コードでEditTextを実装したい。
文字数や、数値のみにするなど、入力制限をする方法が知りたい。
EditTextを実装する上での便利な知識が知りたい。

Kotlinでは、EditTextを使用し、テキストの入力欄を実装することができます。

本記事では、EditTextの実装方法や、入力制限の方法、EditTextを実装する上での便利な知識などについて、サンプルコードを交え、わかりやすく解説致します。

１．EditTextでテキストの入力欄を実装する方法
２．EditTextをカスタマイズする方法
３．EditTextを実装する上での役立つ知識
- ３－１．画面タップで、入力を完了させる方法
- ３－２．空白や改行を含めないで、入力されたテキストを取得する方法
４．まとめ

EditTextでテキストの入力欄を実装する方法

Kotlinでテキストの入力欄を実装するには、EditTextというViewを使用します。

EditTextを実装するには、xmlで実装する方法と、コードで動的に実装する方法があります。

【公式ドキュメント】： EditText | Android Developers

xmlでEditTextを実装する

まずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。

xmlで実装

<EditText
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

<EditText/>タグで、EditTextを実装します。

Point

<EditText/>タグで、EditTextを実装する

コードで動的にEditTextを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

コードで実装

val editText = EditText(this)
linearLayout.addView(editText, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)

EditText()で、EditTextのインスタンスを生成しております。

生成したEditTextは、親のレイアウトにaddView()することで、Viewとして追加されます。サンプルではlinearLayoutが親レイアウトに該当します。

Point

コードで動的にEditTextを実装するには、EditText()でインスタンスを生成した後、addView()で追加する

入力されたテキストを取得する方法

続いて、入力されたテキストを取得する方法を紹介致します。以下は、ボタンをタップすると、EditTextに入力されたテキストが、トーストで表示されるサンプルコードです。

activity_main.xml

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"
   android:orientation="vertical">

   <EditText
       android:id="@+id/edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

   <Button
       android:id="@+id/button"
       android:text="ボタン"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

</LinearLayout>

MainActivity.kt

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

   val editText = findViewById<EditText>(R.id.edit_text)
   val button = findViewById<Button>(R.id.button)
   button.setOnClickListener {
       Toast.makeText(this, editText.text.toString(), Toast.LENGTH_SHORT).show()
   }
}

editText.text.toString()という部分で、EditTextのテキストを取得しております。

editText.textでもいいような気がしますが、editText.textで取得できるのはEditableという型で、このままでは文字列として扱えないため、toString()でString型に変換する必要があります。

Point

EditTextに入力されたテキストを取得するには、EditText.text.toString()を使用する

EditTextをカスタマイズする方法

ここからは、EditTextをカスタマイズする方法について紹介していきます。

文字数を制限する方法

まずは、文字数を制限する方法を紹介致します。文字数を制限するには、maxLengthを使用します。

xmlで実装
コードで実装

<EditText
   android:id="@+id/edit_text"
   android:maxLength="10"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

val editText = findViewById<EditText>(R.id.edit_text)
val lengthFilter = InputFilter.LengthFilter(10)
editText.filters = arrayOf(lengthFilter)

xmlで実装する場合は、android:maxLengthに、最大入力文字数を指定します。

コードで実装する場合は、EditText.filtersに、InputFilterを継承したLengthFilterを追加します。
なお、EditText.filtersには、InputFilterを配列にして指定する必要があります。

Point

xmlで文字数を制限するには、android:maxLengthを使用する
コードで文字数を制限するには、EditText.filtersに、LengthFilterを配列にして指定する

入力文字を制限する方法

続いて、入力文字を制限する方法を紹介致します。入力文字を制限するには、inputTypeを使用します。

以下は、入力するテキストを数字のみに制限するサンプルコードです。

xmlで実装
コードで実装

<EditText
   android:id="@+id/edit_text"
   android:inputType="number"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

val editText = findViewById<EditText>(R.id.edit_text)
editText.inputType = InputType.TYPE_CLASS_NUMBER

xmlで実装する場合は、android:inputTypeにnumberを指定します。

コードで実装する場合は、EditText.inputTypeに、InputType.TYPE_CLASS_NUMBERを指定します。

指定できるTypeはNumber以外にもたくさんあります。そのれらのTypeにつきましては、以下の公式ドキュメントにまとめられておりますので、そちらを参照していただけると幸いです。

【公式ドキュメント】： InputType | Android Developers

Point

xmlで入力文字を制限するには、android:inputTypeを使用する
コードで入力文字を制限するには、EditText.inputTypeを使用する

ヒントを表示する方法

続いて、ヒントを表示する方法を紹介致します。ヒントとは、「ニックネームを入力してください」など、ユーザーが何を入力すればいいのか迷わないよう、予め薄い文字で、入力欄に表示するテキストのことです。

ヒントを表示するには、hintを使用します。

xmlで実装
コードで実装

<EditText
   android:id="@+id/edit_text"
   android:hint="ニックネームを入力してください"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

val editText = findViewById<EditText>(R.id.edit_text)
editText.hint = "ニックネームを入力してください"

xmlで実装する場合は、android:hintに表示するテキストを指定します。

コードで実装する場合は、EditText.hintに表示するテキストを指定します。

hintは、ユーザーが文字を入力すると自動で消えます。

Point

xmlでヒントを表示するには、android:hintを使用する
コードでヒントを表示すには、EditText.hintを使用する

なお、EditTextはTextViewを継承しているため、文字の色や大きさなども変更することができます。それらの方法につきましては、以下の記事にまとめておりますので、そちらを参照していただけると幸いです。

【Kotlin基礎】TextViewでテキストを表示させる方法を解説

本記事では、Kotlinにて、TextViewでテキストを表示させる方法を解説致します。xmlでの基本的な実装方法に加え、コードで動的にTextViewを実装する方法や、テキストの色や大きさ、表示位置などを変更する方法なども解説致します。

EditTextを実装する上での役立つ知識

ここからは、僕自身がEditTextを実装していく中で、「これは便利だ!!」と感じた実装について紹介していきます。

画面タップで、入力を完了させる方法

まず紹介するのは、画面タップで、入力を完了させる方法についてです。EditTextは、普通に実装するだけでは、画面をタップしても、入力は完了しません。

世にでている多くのアプリは、画面タップで入力が完了するよう実装されておりますので、ユーザーにとってはそれが当たり前に感じていると思います。

画面をタップしても入力が完了しない入力欄を使用する場合、ユーザーが使い辛さを感じる可能性がありますので、是非とも実装して欲しい処理です。では、サンプルコードを紹介致します。

activity_main.xml

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   tools:context=".MainActivity"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:focusableInTouchMode="true"
   android:orientation="vertical">

   <EditText
       android:id="@+id/edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

</LinearLayout>

MainActivity.kt

class MainActivity : AppCompatActivity() {
   private lateinit var container: LinearLayout

   // キーボード表示を制御するためのオブジェクト
   private lateinit var inputMethodManager: InputMethodManager

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

       // 背景のレイアウトを取得
       container = findViewById(R.id.container)

       // InputMethodManagerを取得
       inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
   }

   // 画面タップ時に呼ばれる
   override fun onTouchEvent(event: MotionEvent): Boolean {

       // キーボードを隠す
       inputMethodManager.hideSoftInputFromWindow(container.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS)

       // 背景にフォーカスを移す
       container.requestFocus()

       return false
   }
}

キーボードを制御するには、InputMethodManagerを使用します。onCreateでInputMethodManagerを取得しておきます。

onTouchEventは、画面をタップした際に呼ばれるコールバックです。
onTouchEventが呼ばれた時に、InputMethodManagerのhideSoftInputFromWindow()で、キーボードを非表示にします。

さらに、EditTextの選択状態を解除するため、親レイアウトに対し、requestFocus()で、フォーカスを移します。

Point

キーボードを制御するには、InputMethodManagerを使用する
onTouchEventは、画面他タップされた時に呼ばれる
InputMethodManager.hideSoftInputFromWindow()で、キーボードを非表示にする
EidtTextの選択状態を解除するため、親レイアウトにrequestFocus()でフォーカスを移す

空白や改行を含めないで、入力されたテキストを取得する方法

もう1つ紹介するのは、空白や改行を含めないで、入力されたテキストを取得する方法です。

名前の入力など、何かしらの入力を求める際に、空白や改行のみでないかをチェックするのに有効です。

以下は、ボタンタップで、EditTextに入力されたテキストがトーストで表示されるサンプルコードです。空白や改行のみの場合、「エラー」と表示するよう実装しております。

MainActivity.kt

val editText = findViewById<EditText>(R.id.edit_text)
val button = findViewById<Button>(R.id.buttom)
button.setOnClickListener {
   val text = editText.text.toString().trim()

   if (text.isEmpty()) {
       Toast.makeText(this, "エラー", Toast.LENGTH_SHORT).show()
   } else {
       Toast.makeText(this, text, Toast.LENGTH_SHORT).show()
   }
}

trim()で空白と改行を取り除いております。

trim()を行わなかった場合、空白及び改行がそのまま表示されます。

Point

空白や改行を取り除くには、trim()を使用する

まとめ

xmlでEditTextを実装するには、<EditText/>タグを使用する
コードで動的にEditTextを実装するには、EditText()でインスタンスを生成した後、addView()で追加する
入力されたテキストを取得するには、EditText.text.toString()を使用する
文字数を制限するには、maxLengthを使用する
入力文字を制限するには、inputTypeを使用する
ヒントを表示するには、hintを使用する
キーボードを非表示にするには、InputMethodManager.hideSoftInputFromWindow()を使用する
フォーカスを移すには、requestFocus()を使用する
空白や改行を取り除くには、trim()を使用する