コピペでできるチュートリアル風TextView(android)

8264 ワード
Android TextView チュートリアル 動的 Kotlin Android テキストリンク

文字列が動的にカタカタと追加されていって、もう一度クリックするとまとめて表示する、といったtextviewの拡張を実装しました。
手軽なライブラリとかありそうですがどうなんでしょう
まずコピペすべくコードは

TextView.kt

import android.os.Handler
import android.widget.TextView

fun TextView.showTextDynamically(text: String, milliSec: Int, afterShow: (() -> Unit)? = null): (() -> Unit) {
    val charArr = text.toCharArray()
    var isShowing = false
    var isEnd = false
    return {
        // 再起関数で１文字ずつ表示する
        fun addChar(idx: Int) {
            if (idx == charArr.count()) {
                afterShow ?: return
                afterShow()
                return
            }
            Handler().postDelayed( {
                if (!isEnd) {
                    this.text = this.text.toString() + charArr[idx]
                }
                addChar(this.text.length)
            }, milliSec.toLong())
        }
        // 表示中に二度目のクリックされたらtextをまとめて表示する
        if (isShowing) {
            isEnd = true
            this.text = text
        } else {
            isShowing = true
            addChar(0)
        }
    }
}

↑このファイルを追加してください。

ちなみに使いかたですが、
一度関数をオブジェクト化して使います。
引数には表示したいテキストと、一文字表示するごとの間隔をミリ秒で入れます。
そして最後にテキストを表示し終えたタイミングで何かしたい場合は、カッコ内に書き込めば使えるようになっています（省略可能です）

※クリックリスナーの中にすべて書いてしまうと、クリックするたびに新しい関数オブジェクトが生成されてしまって想定した動きになりません。
関数オブジェクトは一度だけ生成してください。そしてその関数オブジェクトを一度目の実行で文字がカタカタと入力されていって、二度目の実行（今回は二度目のボタンクリック）で文字が一気にすべて入力される仕組みになっています。

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setTutorialText()
    }

    private fun setTutorialText() {
        button.text = "スタート"
        // test用文字列
        val testText = "abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそ"
        // 関数をオブジェクト化する
        val dynamicallyShowMethod = dynamic_textview.showTextDynamically(testText, milliSec=100) {
            // 表示完了後にここを通ります(設定しなくても可）
            button.text = "完了"
        }
        // buttonをクリックされたら上記関数を実行
        button.setOnClickListener {
            dynamicallyShowMethod()
        }
    }
}

これはほぼ雑談なのですが、今回、拡張メソッド内でフラグを使っています。
今までずっとフラグはメンバ変数に置かなければならないと思っていましたが、
これの何がよくないかというと
①フラグで一部にしか使われないのにわざわざメンバ変数を追加したらコードが汚れる
→スコープが無駄に広くなってしまいます。少なくとも今回のフラグはこのメソッド内でしか使われないのでメンバ変数として置くのは余計ですよね
②クラスの拡張においてメンバ変数は定義できないので、フラグをメンバ変数におくにはカスタムクラス（クラスを継承したクラス。今回の場合はTextView）を作らなければならない
→わざわざカスタムクラスを作ってそれを継承するというのは手間ですし汎用性がさがるので、できれば拡張して「しれっと使えるように」したいです。

普段使わないような文法を含むので初学者の方がこのコードを一つ一つ理解しようとしたら大変かと思います。
・関数内関数
・再起関数
・クロージャ
・関数オブジェクト
このあたりを検索してみたら勉強になるかと思います。