【Android】EditTextに入力中の文字数をリアルタイムでカウントして表示する方法

はじめに

Androidアプリ開発では、ユーザーがEditTextに入力している文字数をリアルタイムで取得し、画面に表示したいケースがよくあります。例えば、入力文字数の制限やカウンター表示などがその代表例です。

本記事では、TextWatcherインターフェースを使用して、EditTextへの入力中に文字数をカウントし、TextViewに表示する方法をステップごとに解説します。

Step 1: 新規プロジェクトの作成

Android Studioを開き、メニューから「File」⇒「New Project」を選択して、必要な項目を入力し、新しいプロジェクトを作成します。

Step 2: レイアウトファイル（activity_main.xml）の作成

res/layout/activity_main.xml に以下のコードを追加します。EditTextと、文字数を表示するためのTextViewを配置しています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:padding="4dp"
   tools:context=".MainActivity">
   <EditText
      android:id="@+id/editText"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:ems="10"
      android:hint="EditText"/>
   <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_above="@+id/editText"
      android:layout_marginBottom="20dp"
      android:layout_centerInParent="true"
      android:textSize="24sp"
      android:textStyle="bold"
      android:text="Count Display Here"/>
</RelativeLayout>

Step 3: MainActivity.java の実装

src/MainActivity.java に以下のコードを追加します。ポイントは、EditTextにaddTextChangedListener()でTextWatcherを登録し、beforeTextChanged()コールバック内で文字数を取得してTextViewに反映させている点です。

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
   TextView textView;
   EditText editText;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      textView = findViewById(R.id.textView);
      editText = findViewById(R.id.editText);
      editText.addTextChangedListener(new TextWatcher() {
         @Override
         public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            int length = editText.length();
            String convert = String.valueOf(length);
            textView.setText(convert);
         }
         @Override
         public void onTextChanged(CharSequence s, int start, int before, int count) {
         }
         @Override
         public void afterTextChanged(Editable s) { }
      });
   }
}

TextWatcherの各コールバックについて

• beforeTextChanged()：テキストが変更される直前に呼ばれます。この例ではここで文字数を取得しています。
• onTextChanged()：テキストが変更された瞬間に呼ばれます。
• afterTextChanged()：テキストの変更が完了した後に呼ばれます。

なお、より正確に「入力後の文字数」を反映したい場合は、afterTextChanged() 内で s.length() を取得する方法も一般的です。

Step 4: AndroidManifest.xml の確認

androidManifest.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest
   xmlns:android="https://schemas.android.com/apk/res/android"
   package="app.com.sample">
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
      <activity android:name=".MainActivity">
         <intent-filter>
            <action
               android:name="android.intent.action.MAIN" />
            <category
               android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>
</manifest>

アプリの実行

それでは、アプリを実行してみましょう。実機のAndroidスマートフォンをPCに接続していることを前提に説明します。Android Studioからアプリを起動するには、プロジェクト内のアクティビティファイルを開き、ツールバーのRun（実行）アイコンをクリックします。デバイスの選択画面で自分のスマートフォンを選択すると、実機にアプリが起動し、EditTextに入力するたびに文字数がリアルタイムで表示されます。

まとめ

このように、TextWatcherを使えばEditTextへの入力を監視し、文字数をリアルタイムでカウント・表示することが簡単に実装できます。文字数制限のバリデーションや入力フォームのUX向上など、さまざまな場面で活用できるテクニックなので、ぜひ実際のプロジェクトでも試してみてください。