Androidで左から右へのスライドアニメーションを作成する方法

Androidで左から右へのスライドアニメーションを作成する方法

このチュートリアルでは、Androidアプリで左から右（および右から左）へのスライドアニメーションを実装する方法を解説します。Android 5.0（API 21）以降で利用できるSlideトランジションクラスとTransitionManagerを組み合わせることで、数行のコードで滑らかなスライド効果を実現できます。

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

Android Studioを起動し、「File」→「New Project」を選択して、必要な項目を入力し新しいプロジェクトを作成します。

ステップ2：レイアウトファイル（res/layout/activity_main.xml）の編集

以下のコードをres/layout/activity_main.xmlに追加します。このレイアウトには「Slide Left」「Slide Right」の2つのボタンと、初期状態では非表示（invisible）になっている2つのTextViewが配置されています。

<?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:layout_height="match_parent"
    android:padding="8dp"
    android:id="@+id/relativeLayout"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/btnSlideLeft"
        android:text="Slide Left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"/>
    <Button
        android:id="@+id/btnSlideRight"
        android:text="Slide Right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btnSlideLeft"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"/>
    <TextView
        android:layout_centerInParent="true"
        android:text="Cristiano Ronaldo is the Best Player in the World"
        android:visibility="invisible"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView"/>
    <TextView
        android:layout_centerInParent="true"
        android:text="Messi is the Best Player in the World"
        android:layout_below="@id/textView"
        android:visibility="invisible"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"/>
</RelativeLayout>

ステップ3：MainActivity.java の実装

次に、src/MainActivity.javaに以下のコードを追加します。ポイントは以下の通りです。

• setSlideEdge(Gravity.START)：画面の左端（開始方向）からスライドインさせます。
• setSlideEdge(Gravity.END)：画面の右端（終了方向）からスライドインさせます。
• TransitionManager.beginDelayedTransition()：直後に行われるレイアウトの変更（ここでは可視性の切り替え）に対してアニメーションを適用します。

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.Slide;
import android.transition.TransitionManager;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
    Button btnSlideLeft, btnSlideRight;
    TextView textView, textView1;
    RelativeLayout relativeLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = findViewById(R.id.textView);
        textView1 = findViewById(R.id.textView1);
        btnSlideLeft = findViewById(R.id.btnSlideLeft);
        btnSlideRight = findViewById(R.id.btnSlideRight);
        relativeLayout = findViewById(R.id.relativeLayout);
        btnSlideLeft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Slide slide = new Slide();
                slide.setSlideEdge(Gravity.START);
                TransitionManager.beginDelayedTransition(relativeLayout, slide);
                textView.setVisibility(View.VISIBLE);
            }
        });
        btnSlideRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Slide slide = new Slide();
                slide.setSlideEdge(Gravity.END);
                TransitionManager.beginDelayedTransition(relativeLayout, slide);
                textView1.setVisibility(View.VISIBLE);
            }
        });
    }
}

ステップ4：AndroidManifest.xml の確認・編集

最後に、androidManifest.xmlに以下のコードを記述します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリの実行と動作確認

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

まとめ

「Slide Left」ボタンをタップするとテキストが左側からスライドインして表示され、「Slide Right」ボタンをタップすると右側からスライドインします。SlideクラスはsetDuration()やsetInterpolator()なども備えているため、アニメーションの速度や動き方を自由にカスタマイズできます。ぜひ自分のアプリのUI演出に活用してみてください。