AndroidのTextViewでカウントアップアニメーションを実装する方法【サンプルコード付き】

この記事では、AndroidのTextViewで0から100までのカウントアップアニメーションを実装する方法を解説します。Android SDKに標準で含まれるValueAnimatorクラスを使えば、外部ライブラリを追加することなく、簡単に数値カウントアニメーションを実現できます。

手順1：新規プロジェクトを作成する

Android Studioを起動し、File → New Projectを選択して新しいプロジェクトを作成します。アプリ名やパッケージ名などの必要な項目を入力して、プロジェクトを完成させましょう。

手順2：レイアウトファイル（activity_main.xml）を編集する

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">
   <TextView
      android:id = "@+id/text"
      android:textSize = "20dp"
      android:textAlignment = "center"
      android:layout_width = "match_parent"
      android:textColor = "#ff4500"
      android:layout_height = "wrap_content"
      android:singleLine = "true" />
</RelativeLayout>

上記のコードでは、画面中央に配置されたTextViewを1つ定義しています。このTextViewに、0から100までのカウント値が表示されます。文字色はオレンジ系の「#ff4500」に設定されています。

手順3：MainActivity.javaにコードを追加する

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

package com.example.andy.myapplication;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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);
      ValueAnimator animator = new ValueAnimator();
      animator.setObjectValues(0, 100);
      animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
         public void onAnimationUpdate(ValueAnimator animation) {
            view.setText(String.valueOf(animation.getAnimatedValue()));
         }
      });
      animator.setDuration(10000); // アニメーションの継続時間を設定
      animator.start();
   }
}

カウントアニメーションの核となるコード

カウントアニメーションを実現しているのは、以下の部分です。

ValueAnimator animator = new ValueAnimator();
animator.setObjectValues(0, 100);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   public void onAnimationUpdate(ValueAnimator animation) {
      view.setText(String.valueOf(animation.getAnimatedValue()));
   }
});
animator.setDuration(10000);
animator.start();

上記のコードでは、setObjectValues(0, 100)でアニメーションの開始値と終了値を指定し、setDuration(10000)で継続時間を10秒（10,000ミリ秒）に設定しています。アニメーションが更新されるたびにonAnimationUpdate()が呼び出され、その時点のアニメーション値がTextViewのテキストとして反映される仕組みです。

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

それでは、アプリを実行してみましょう。実機のAndroid端末をパソコンに接続しておいてください。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーのRun（実行）アイコンをクリックします。表示された選択肢から自分のモバイルデバイスを選択すると、端末上でアプリが起動します。

上記の結果のように、テキストがカウントアニメーションとともに変化し、数字が0から100へとスムーズに増加していく様子を確認できます。durationの値を変更すれば、カウントアップにかかる時間も自由に調整可能です。