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

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

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

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

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


文字カウント機能とは

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

自作AndroidTwitterクライアントアプリTwitMorseにTextWatcherを実装
これです。入力文字数が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メソッドは今回使わないので特に実装しない。

で、まあ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 文字カウンター実装前

version1.8.2までのTwitMorseの投稿画面
これでは何文字入力したかわからないですよね。(一応Toastを使って表示はしているんですが)

After 文字カウンター実装後

これからのTwitMorseのつぶやき投稿画面
投稿画面に「~~/140文字」というのが出ているのが分かるかと思います。140文字を超えると赤くなり、投稿できない旨をユーザーに伝える役割をする(はず)

これでまたひとつユーザビリティを上げることができたと思います。
まだまだ課題は沢山ありますが、気の向いた時に機能追加なり改修リリースを行っています。


モールス信号が読み書きできなくてもできちゃうTwitterクライアントTwitMorseをよろしくおねがいします!!

Androidのみ対応(iOSは開発中です)

btn_googleplay_01chart

参考にした資料