【Android】TextWatcherで入力文字数をカウントする機能追加【kotlin】

自作TwitterクライアントアプリTwitMorse 〜モールス信号でつぶやこう〜に新規機能を追加しました。

それも文字数カウント機能。

AndroidではTextWatcherなるものを使って入力文字数の変化を取得できます。

文字カウント機能とは

つぶやき画面で文字数をカウントする機能をToastでしか表示していなかったため、UI的にも文字数オーバーしたかどうかが分かりづらかったのです。
特に、普通の文章をモールス信号に変換するだけでも一気に文字数が増えるので、これはいつか入れないとな、と思っていた機能でした。

これです。入力文字数が140文字を超えたら赤文字にしてユーザーに投稿エラーになることを見えるようにしておきます。

TextWatcherの実装

自分の場合はまず、以下のようにTextWatcherの準備をする機能をつけておき、ActivityのonCreateメソッド付近で呼んでおきます。

/**
 * setup textWatcher
 */
private fun setTextCounter() {
    mTextCounter = findViewById(R.id.textWatcher)
    // 最初に0にしておく
    mTextCounter.text = getString(R.string.input_text_count).format("0")

    mInputText!!.addTextChangedListener(object : TextWatcher {
        override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
            // 今回は実装しない
        }
        override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
            // 今回は実装しない
        }
        override fun afterTextChanged(p0: Editable?) {
            mTextCounter.text = getString(R.string.input_text_count).format(p0!!.length.toString())
            if (p0.length > 140) {
                mTextCounter.setTextColor(Color.RED)
            } else {
                mTextCounter.setTextColor(Color.WHITE)
            }
        }
    }
    )
}

ポイントとなるのは

まず最初に”0″という文字列を与えてString.formatしてあげること。
TextWatcher#afterTextChangedは与えられたEditTextの文字数を逐一取得してくれるのでそれを使う
- そこで140文字以内かどうかの判定を行い、140文字を超えていれば警告色の赤をmTextCounterにsetしてあげる
他のonTextChanged、beforeTextChangedメソッドは今回使わないので特に実装しない。
- どうしてもコードが長くて嫌になる場合は下記を参考にしてください。
- 【Kotlin】AndroidのTextWatcherを半端なくスッキリ書こうぜ | Qiita

で、まあActivity#onCreateメソッドで先程作ったsetTextCounterを呼びます。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_tweet)
    // 入力フォーム
    mInputText = findViewById(R.id.input_text)
    // テキストカウンターのセットアップ
    setTextCounter() //今回追加したメソッド
    ...
    ...
}

ここで、先にEditText型であるmInputTextを先にfindViewByIdしておかないとNull Pointer Exceptionで落ちます。
本来であればButterknifeなどのライブラリを使えってところなんですが・・・

Before 文字カウンター実装前

これでは何文字入力したかわからないですよね。（一応Toastを使って表示はしているんですが)