AndroidでTextViewにスライドダウンアニメーションを表示する方法

本記事では、AndroidアプリでTextViewにスライドダウン（上から滑り落ちてくる）アニメーションを表示する方法を、サンプルコードとともにわかりやすく解説します。

ステップ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が、アニメーションによって特定の位置へスライドダウンする構成になっています。

ステップ3：MainActivity.javaにコードを追加する

続いて、「src/MainActivity.java」に以下のコードを記述します。

package com.example.andy.myapplication;

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

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView view = findViewById(R.id.text);
        view.setText("How to show Slide down to show textview animation");
        Animation anim = AnimationUtils.loadAnimation(this, R.anim.slide_in_top);
        view.startAnimation(anim);
    }
}

ここでは「slide_in_top」というアニメーションを読み込んでいます。そのため、res配下の「anim」フォルダ内に「slide_in_top.xml」を作成し、以下のコードを追加してください。

ステップ4：アニメーション定義（slide_in_top.xml）を作成する

<?xml version = "1.0" encoding = "utf-8"?>
<set xmlns:android = "https://schemas.android.com/apk/res/android"
    android:fillAfter = "true"
    android:repeatCount = "100" >
    <translate
        android:duration = "@android:integer/config_mediumAnimTime"
        android:fromYDelta = "-100%"
        android:toYDelta = "0%" />
    <alpha
        android:duration = "@android:integer/config_mediumAnimTime"
        android:fromAlpha = "0.0"
        android:toAlpha = "1.0" />
</set>

このXMLでは、<translate>タグでY方向に-100%から0%へ移動させる動きを定義し、<alpha>タグでフェードイン効果を組み合わせています。「fillAfter="true"」により、アニメーション終了後も最終状態が維持されます。

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

それでは、実際にアプリケーションを実行してみましょう。Android端末をパソコンに接続した状態で、Android Studioからプロジェクト内のいずれかのアクティビティファイルを開き、ツールバーのRunアイコンをクリックします。実行デバイスとして自分のモバイル端末を選択すると、端末のデフォルト画面に以下のように表示されます。

実行結果を見ると、TextViewが上からスライドダウンしながら表示されていることが確認できます。