AndroidでTextViewのテキストをアニメーション付きで切り替える方法【サンプルコード付き】

この記事では、Androidアプリにおいて、TextViewに表示されているテキストを別のテキストへアニメーション付きで切り替える方法を解説します。ボタンをタップしたタイミングで、スライドアップしながら数式の計算結果が表示されるデモを作成していきます。

実装の全体像

今回の実装では、AnimationUtilsクラスで読み込んだアニメーションをLinearLayoutに適用し、アニメーション終了のタイミングでTextViewのテキストを差し替えます。単純に文字列を置き換えるだけでなく、自然な動きを伴うUI演出を実現できるのがポイントです。

手順1：新規プロジェクトの作成

Android Studioを起動し、メニューから「File」→「New Project」を選択して新しいプロジェクトを作成します。ウィザードの指示に従い、必要な情報を入力してプロジェクトを作成してください。

手順2：レイアウトファイルの編集

res/layout/activity_main.xmlに以下のコードを記述します。

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
    xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:gravity = "center"
    android:layout_height = "match_parent">
    <LinearLayout
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content">
        <LinearLayout
            android:id = "@+id/parent"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content">
            <TextView
                android:id = "@+id/text"
                android:textSize = "30dp"
                android:textAlignment = "center"
                android:layout_width = "match_parent"
                android:textColor = "#ff4500"
                android:layout_height = "wrap_content"
                android:singleLine = "true" />
        </LinearLayout>
        <Button
            android:id = "@+id/animate"
            android:text = "Animated button"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content" />
    </LinearLayout>
</RelativeLayout>

上記のレイアウトでは、TextView（id: text）とButton（id: animate）を配置し、TextViewだけをid「parent」のLinearLayoutで囲んでいます。ユーザーがボタンをクリックすると、TextViewに表示されているテキストが更新される構成です。

手順3：MainActivity.javaの実装

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

package com.example.andy.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final TextView view = findViewById(R.id.text);
        final LinearLayout parent = findViewById(R.id.parent);
        view.setText("1+2");
        Button animate = findViewById(R.id.animate);
        animate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation slideUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
                slideUp.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                    }
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        view.setText("3");
                    }
                    @Override
                    public void onAnimationRepeat(Animation animation) {
                    }
                });
                parent.startAnimation(slideUp);
            }
        });
    }
}

処理のポイントは以下の3点です。

• アニメーションの読み込み：AnimationUtils.loadAnimation()を使い、res/animフォルダに定義しておいた「slide_up」アニメーションを読み込みます。
• リスナーによるテキスト差し替え：setAnimationListener()でAnimationListenerを登録し、onAnimationEnd()内でview.setText("3")を呼び出すことで、アニメーション完了後に表示テキストを「1+2」から「3」へ切り替えています。
• アニメーションの開始：parent.startAnimation(slideUp)により、TextViewを包むLinearLayout全体に対してアニメーションを実行します。

なお、本記事のコードは旧サポートライブラリ（android.support.v7）を使用しています。AndroidXを採用している最新のプロジェクトでは、import文をandroidx.appcompat.app.AppCompatActivityに置き換えてください。また、「slide_up」アニメーションはあらかじめres/anim/slide_up.xmlとして定義しておく必要がある点にも注意しましょう。

アプリの実行と動作確認

それでは、アプリケーションを実行してみましょう。ここでは、実際のAndroid端末をパソコンに接続していることを前提としています。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。デバイス選択ダイアログで自分のモバイルデバイスを選ぶと、端末に次のような初期画面が表示されます。

上の画像が初期画面です。ボタンをクリックすると、スライドアップアニメーションとともにTextViewが以下のように更新されます。