自作TwitterクライアントアプリTwitMorse 〜モールス信号でつぶやこう〜に新規機能を追加しました。
それも文字数カウント機能。
AndroidではTextWatcherなるものを使って入力文字数の変化を取得できます。
つぶやき画面で文字数をカウントする機能をToastでしか表示していなかったため、UI的にも文字数オーバーしたかどうかが分かりづらかったのです。
特に、普通の文章をモールス信号に変換するだけでも一気に文字数が増えるので、これはいつか入れないとな、と思っていた機能でした。
これです。入力文字数が140文字を超えたら赤文字にしてユーザーに投稿エラーになることを見えるようにしておきます。
自分の場合はまず、以下のように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などのライブラリを使えってところなんですが・・・
これでは何文字入力したかわからないですよね。（一応Toastを使って表示はしているんですが)
投稿画面に「~~/140文字」というのが出ているのが分かるかと思います。140文字を超えると赤くなり、投稿できない旨をユーザーに伝える役割をする（はず）
これでまたひとつユーザビリティを上げることができたと思います。
まだまだ課題は沢山ありますが、気の向いた時に機能追加なり改修リリースを行っています。
Androidのみ対応(iOSは開発中です)
