EditTextのライブ文字数


101

エディットテキストボックスのライブ文字数をカウントするための最良の方法は、Androidにあると思いました。私はこれを見ていましが、意味がわかりませんでした。

問題を説明するために、私はEditTextを持っていて、文字を150に制限しようとしています。これを入力フィルターで行うことができますが、ユーザーが入力した文字数をテキストボックスのすぐ下に表示したいと思います(ほとんどスタックオーバーフローが今やっているように)。

誰かがサンプルコードの小さなスニペットを書いたり、正しい方向に向けたりできるとしたら、とてもありがたいです。

回答:


153

TextWatcherを使用して、テキストがいつ変更されたかを確認できます

private TextView mTextView;
private EditText mEditText;
private final TextWatcher mTextEditorWatcher = new TextWatcher() {
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }

        public void onTextChanged(CharSequence s, int start, int before, int count) {
           //This sets a textview to the current length
           mTextView.setText(String.valueOf(s.length()));
        }

        public void afterTextChanged(Editable s) {
        }
};

エディットテキストのTextWatcherを設定します

mEditText.addTextChangedListener(mTextEditorWatcher);

5
これを試して、うまくいきました!正解として選択してください!
Patrick Boos、2011年

2
テキストボックスの右下にカウントを追加するための最良の方法は何でしょうか。エディットテキストを拡張して文字列を手動で描画しますか?
クマ

1
ありがとうございます。テキストを入力しながら、150,149,148,147 ....のように逆の順序でカウントダウンする方法を教えてください。
vinay Maneti 2013年

6
この行に置き換えることで解決しましたmTextView.setText(String.valueOf(150-s.length())); mTextView.setText(String.valueOf(s.length()));の代わりに
vinay Maneti 2013年

私の問題は@Bearが持っているのと似ています。このカウントダウンテキストを編集テキストのすぐ下に表示する必要があります。誰もがこのリファレンスで共有する何かを持っています。ありがとう。
Suresh Sharma 2015年

107

SupportLibrary v23.1で導入されたEditTextのTextInputLayoutラッパーを使用して、xml自体から文字カウントを行うことができます

EditTextをTextInputLayoutでラップし、CounterEnabledをtrueに設定し、counterMaxLengthを設定するだけです。

<android.support.design.widget.TextInputLayout
    android:id="@+id/textContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:counterMaxLength="20"
    >
    <EditText
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text Hint"
        />
</android.support.design.widget.TextInputLayout>

このようなマテリアル効果が得られます

counterOverflowTextAppearancecounterTextAppearanceを使用して、カウンターのスタイルを設定できます。

編集

Androidのドキュメントから。

TextInputEditTextのクラスは、このレイアウトの子として使用されるように設けられています。TextInputEditTextを使用すると、TextInputLayoutでテキスト入力の視覚的側面をより細かく制御できます。使用例は次のとおりです。

     <android.support.design.widget.TextInputLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content">

     <android.support.design.widget.TextInputEditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="@string/form_username"/>

 </android.support.design.widget.TextInputLayout>

TextInputLayout TextInputEditText


3
これはまさに私が探していたものでした:)クリーンなサポートライブラリの実装。ありがとう
VPZ

3
受け入れられた答えでなければなりません!私はそれらの属性を完全に逃しました!
sud007 2016年

24

あなたはそれを使ってそれを行うことができますTextInputLayout

app:counterEnabled="true"
app:counterMaxLength="420"

そして完了する:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:counterMaxLength="420">

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

</android.support.design.widget.TextInputLayout>

これはうまくいきましたが、カウンターの色をどのように変更しますか?
エーリッヒ・ガルシア

14

XMLで、editTextにこの属性を追加します

    android:maxLength="80"

Javaではこのリスナーを追加します

  ed_caption.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

        }

        @Override
        public void afterTextChanged(Editable s) {
            tv_counter.setText(80 - s.toString().length() + "/80");

        }
    });

7

その非常に簡単な手順に従ってください:

====それらをインポートに追加する===

import android.text.Editable;
import android.text.TextWatcher;

=====これを定義する=====

private TextView sms_count;

==========作成中=====

sms_count = (TextView) findViewById(R.id.textView2);


final TextWatcher txwatcher = new TextWatcher() {
   public void beforeTextChanged(CharSequence s, int start, int count, int after) {
   }

   public void onTextChanged(CharSequence s, int start, int before, int count) {

      sms_count.setText(String.valueOf(s.length()));
   }

   public void afterTextChanged(Editable s) {
   }
};

sms_message.addTextChangedListener(txwatcher);

5
    You can use TextWatcher class to see text has changed and how much number of character remains.Here i have set counter of 140 characters.

    EditText typeMessageToPost;
    TextView number_of_character;
public void onCreate(Bundle savedBundleInstance) {
        super.onCreate(savedBundleInstance);
setContentView(R.layout.post_activity);
typeMessageToPost.addTextChangedListener(mTextEditorWatcher);
}
private final TextWatcher mTextEditorWatcher=new TextWatcher() {

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            // TODO Auto-generated method stub

        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {
            // TODO Auto-generated method stub

        }

        @Override
        public void afterTextChanged(Editable s) {
            // TODO Auto-generated method stub
            number_of_character.setText(String.valueOf(140-s.length()));
        }
    };

ありがとう@RavishSharma :)あなたのコメントに感謝します。
Rana Pratap Singh

4

次の2行をTextInputLayoutXMLファイルに設定するだけです。

app:counterEnabled="true"
app:counterMaxLength="200"

グレートはそれを知りませんでした。EdittextをTextInputLayoutにラップすることは、常により良い解決策のようです。
Stefan Sprenger 2017

3

このソリューションではKotlin、残りの文字数を使用して表示します。また、現在の文字数が50文字を超えると、テキストの色が赤に変わります。

コトリン

private val mTitleTextWatcher = object : TextWatcher {
    override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}

    override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {
        if(YOUR_EDIT_TEXT_ID.text.toString().trim().length < 51){
            YOUR_CHAR_LEFT_TEXTVIEW_ID.text = (50 - YOUR_EDIT_TEXT_ID.text.toString().trim().length).toString()
            YOUR_CHAR_LEFT_TEXTVIEW_ID.setTextColor(Color.BLACK)
        }
        else{
            YOUR_CHAR_LEFT_TEXTVIEW_ID.text = "0"
            YOUR_CHAR_LEFT_TEXTVIEW_ID.setTextColor(Color.RED)
        }
    }

    override fun afterTextChanged(s: Editable) {}
}

また、に追加するTextWatcherことを忘れないでくださいEditText

YOUR_EDIT_TEXT_ID.addTextChangedListener(mTitleTextWatcher)

3

TextInputLayoutにラップされているTextInputEditTextにカウンターを追加できます。例でわかるように、counterEnabledはこの機能を有効にcounterMaxLenghし、その文字数を定義します。

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/til_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="50">
    <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/et_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
</com.google.android.material.textfield.TextInputLayout>

1

同じ問題に遭遇し、キャメロンの方法を試しました。動作しますが、マイナーなバグがあります。ユーザーがコピーアンドペーストを使用すると、文字のカウントに失敗します。したがって、以下のようにテキストが変更された後に行うことをお勧めします。

    private final TextWatcher mTextEditorWatcher = new TextWatcher() {
         public void beforeTextChanged(CharSequence s, int start, int count, int after) {

         }

         public void onTextChanged(CharSequence s, int start, int before, int count) {

         }

          public void afterTextChanged(Editable s) {
             //This sets a textview to the current length
             mTextView.setText(String.valueOf(s.length()));
         }
    };


0

このようなことをしてみてください。

このソリューションは、CharSequence.lengthを取得するのではなく、パフォーマンスが向上する場合があります。ソフトキーボードをタップするたびにイベントが発生します。したがって、長さを指定すると、そのたびにCharSequenceがカウントされ、大きなCharSequnceを取得し始めると遅くなる可能性があります。テキスト変更のイベントリスナーは、前と後のカウントを追加します。これは増分値と減分値に適しています

@Override
        public void beforeTextChanged(CharSequence charSequence, int start, int count, int after) {
            int tick = start + after;
            if(tick < mMessageMax) {
                int remaining = mMessageMax - tick;
                ((TextView)findViewById(R.id.contact_us_chars)).setText(String.valueOf(remaining));
            }
        }

これは効果permosrmatceであり、TextWatcherが最善のアプローチです
Naveed Ahmad

0

これを試して

private TextWatcher textWatcher = new TextWatcher() {
    @Override
    public void beforeTextChanged(final CharSequence s, final int start, final int count, final int after) {
        editText.post(new Runnable() {
            @Override
            public void run() {
                if (length < 100) {
                    if (count > 0 && after <= 0)/*remove emoij*/ {
                        length--;
                    } else if (count > after)/*remove text*/ {
                        length--;
                    } else if (count == 0 && after > 1)/*emoij*/ {
                        ++length;
                    } else if (count == 0 && after == 1)/*Text*/ {
                        ++length;
                    } else if (count > 0 && after > 1) {
                        ++length;
                    }
                    if (s.length() <= 0)
                        length = 0;
                    Log.w("MainActivity", " Length: " + length);
                } else {
                    if (count > 0 && after <= 0)/*remove emoij*/ {
                        length--;
                    } else if (count > after)/*remove text*/ {
                        length--;
                    }
                    Log.w("MainActivity", " Length: " + length);
                }

                if (length == 100) {
                    editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(s.length())});
                } else {
                    editText.setFilters(new InputFilter[]{});
                }
            }
        });
    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {

    }

    @Override
    public void afterTextChanged(Editable s) {

    }
};

`


0

明確な方法;

abstract class CharacterWatcher : TextWatcher {
    override fun afterTextChanged(text: Editable?) {
        afterCharacterChanged(text?.lastOrNull(), text?.length)
    }

    override fun beforeTextChanged(text: CharSequence?, start: Int, count: Int, before: Int) {}

    override fun onTextChanged(text: CharSequence?, start: Int, before: Int, count: Int) {}

    abstract fun afterCharacterChanged(char: Char?, count: Int?)
}



 editText.addTextChangedListener(new CharacterWatcher() {
            @Override
            public void afterCharacterChanged(@Nullable Character character, @Nullable Integer count) {
                action()
            }
        });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.