【Android】テキストを一文字ずつ表示するタイプライター風アニメーションの実装方法

Androidアプリでは、チャット画面やノベルゲームなどでおなじみの「テキストが一文字ずつ打ち込まれていく」タイプライター風のアニメーションを実装できます。本記事では、TextViewを継承したカスタムビューとHandlerを組み合わせたシンプルな実装方法を、サンプルコードとともにわかりやすく解説します。

実装の手順

ステップ1：新規プロジェクトの作成

まず、Android Studioで新しいプロジェクトを作成します。メニューバーから「File」→「New Project」を選択し、必要な項目を入力してプロジェクトのセットアップを完了させてください。

ステップ2：MainActivity.javaにコードを追加

src/MainActivity.java に以下のコードを記述します。

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // カスタムビュー「Typewriter」を生成
        Typewriter writer = new Typewriter(this);
        setContentView(writer);
        // 一文字あたりの表示間隔を150ミリ秒に設定
        writer.setCharacterDelay(150);
        // アニメーション表示したいテキストを渡す
        writer.animateText("Sample String...Sample String...Sample String...");
    }
}

上記のコードでは、カスタムクラス「Typewriter」のインスタンスを作成し、それをMainActivityのビューとして設定しています。続いて、「Typewriter.java」というファイルを新規作成し、以下のコードを追加しましょう。

package com.example.andy.myapplication;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.widget.TextView;

public class Typewriter extends TextView {

    private CharSequence mText;
    private int mIndex;
    private long mDelay = 5000;

    public Typewriter(Context context) {
        super(context);
    }

    public Typewriter(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private Handler mHandler = new Handler();

    // 一定間隔で一文字ずつテキストを追加する処理
    private Runnable characterAdder = new Runnable() {
        @Override
        public void run() {
            setText(mText.subSequence(0, mIndex++));
            if (mIndex <= mText.length()) {
                mHandler.postDelayed(characterAdder, mDelay);
            }
        }
    };

    // アニメーションを開始するメソッド
    public void animateText(CharSequence text) {
        mText = text;
        mIndex = 0;
        setText("");
        mHandler.removeCallbacks(characterAdder);
        mHandler.postDelayed(characterAdder, mDelay);
    }

    // 表示間隔（ミリ秒）を設定するメソッド
    public void setCharacterDelay(long millis) {
        mDelay = millis;
    }
}

コードのポイント

この実装の仕組みを整理すると、以下の通りです。

• Typewriterクラス：TextViewを継承したカスタムビューです。
• animateText()：表示したい文字列を受け取り、インデックスを0にリセットしてアニメーションを開始します。
• characterAdder（Runnable）：postDelayed()によって一定間隔ごとに呼び出され、subSequence()で先頭から現在のインデックスまでの部分文字列をsetText()で表示します。
• setCharacterDelay()：一文字を表示する間隔（ミリ秒）を自由に変更できます。値が小さいほど速く、大きいほどゆっくり表示されます。

アプリを実行して動作を確認

それでは、実際にアプリを起動して動きを確認してみましょう。ここでは、実機のAndroidスマートフォンをパソコンに接続しているものとして説明します。

1. Android Studioでプロジェクト内のアクティビティファイルを開きます。
2. ツールバーの「Run（実行）」アイコンをクリックします。
3. デバイス選択画面で、接続済みのスマートフォンを選択します。
4. スマートフォンにアプリが起動し、テキストが一文字ずつ表示されていきます。

実行結果を見ると、setCharacterDelay()で設定した間隔（この例では150ミリ秒）ごとに、テキストが一文字ずつ順番に表示されていくことが確認できます。

表示速度を変えたい場合は、setCharacterDelay()に渡す値を調整するだけでOKです。チャットアプリの入力演出やノベルゲーム風のシーンなど、さまざまな場面で応用できるので、ぜひ試してみてください。