ホーム » Android » 【Android×Java】画面遷移のアニメーション化方法：下から上、上から下など様々な遷移(Kotlinでも同じ方法でOKかと)

【Android×Java】画面遷移のアニメーション化方法：下から上、上から下など様々な遷移(Kotlinでも同じ方法でOKかと)

【Android×Java】画面遷移のアニメーション化方法：下から上、上から下など様々な遷移(Kotlinでも同じ方法でOKかと) Android
2022.12.23

はじめに

こんにちは、Nonaです。iOS風になど様々な画面遷移をさせたいと思ったことありませんか？

今回はAndroidの画面遷移アニメーションの実装方法に関して記載していきます。

以下のような画面が実装可能です。※例です。その他にもたくさんあります。

※最初の画面に戻る遷移に関しては実装していませんが実装可能です。必要であればご連絡ください。

画面遷移の方法は大きく２種類：今回は明示的Intentの画面遷移

①独自でViewを作って画面遷移をする明示的Intentを用いた方法

②暗黙的Intentを用いた方法

Intentに関しては以下にまとめています。

【Android】インテント(Intent)とは？わかりやすく解説！
Androidのインテントに関して調査した結果を記載しています。暗黙的インテント、明示的インテントに関してはソースコードの実例を載せています。何かのお役に立てば幸いです。
nonateck.com
2022.12.19

今回は明示的Intentを使った画面遷移について解説します。

基本形

通常の画面遷移は以下のような見た目になります。

まず２つのActivityを作成します。

今回作った画面は以下です。

左が最初の画面、左が遷移先の画面です。ボタンを押すと画面遷移します。

最初の画面のXML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/teal_200"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FirstActivity"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="62dp"
        android:text="Go to Second Activity"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />


</androidx.constraintlayout.widget.ConstraintLayout>

遷移後の画面のXML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple_200"
    tools:context=".Activity2">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="192dp"
        android:text="You're on Second Activity"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

最初の画面のソースコード

public class MainActivity extends AppCompatActivity {

    Button btn1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn1 = findViewById(R.id.btn);
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //明示的 Intent
                Intent i = new Intent(getApplicationContext(),Activity2.class);
                startActivity(i);
            }
        });

    }

遷移後の画面のソースコード

public class Activity2 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_2);
    }
}

上記を基本にして画面遷移をアニメーション化していきます。

画面遷移をアニメーション化するには？

アニメーション化するためには「overridePendingTransition」を使用します。

startActivityの後に記述するだけです。※最初の画面のソースコードの15行目以降です。

Intent i = new Intent(getApplicationContext(),Activity2.class);
startActivity(i);
overridePendingTransition(遷移先のアクティビティのアニメーション、遷移元のアクティビティのアニメーション);

デフォルトで準備されている画面遷移アニメーションの場合

上記で指定するアニメーションはデフォルトで以下が準備されています。

//左からスライドイン
android.R.anim.slide_in_left
//右からスライドアウト
android.R.anim.slide_out_right
//フェードイン
android.R.anim.fade_in
//フェードアウト
android.R.anim.fade_out

デフォルトのアニメーションでも以下のようなフェードアニメーションを実現可能です。

以下のような変更を行なっただけです。※最初のソースコードの15行目当たり

Intent i = new Intent(getApplicationContext(),Activity2.class);
startActivity(i);
overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);

独自の画面遷移アニメーションを実現するには？

AnimationResourceFileを作成することで独自のアニメーションが実現可能です。

具体的には以下を選択することでAnimationResourceFileの作成が可能です。

例えば以下のような下から上にスライドしてくる遷移の場合

AnimationResourceFileは以下です。

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="0%"
      android:fromYDelta="100%" android:toYDelta="0%"
      android:duration="300" />
</set>

Activityのソースは以下です。

Intent i = new Intent(getApplicationContext(),Activity2.class);
startActivity(i);
overridePendingTransition(R.anim.enter_bottom, R.anim.none);

なお上記のnoneは空のAnimationResourceFileです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

</set>

様々な種類のAnimationResourceFileを作成済みです。

以下は全てのファイルの中身を記載致します。

左から右への遷移

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
      android:propertyName="enter_from_left"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="-100%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300"/>
</set>

右から左への遷移

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="100%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300" />
</set>

上から下への遷移

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="100%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300" />
</set>

上から下への遷移（enter_topと合わせて使用）

exit関連のファイルはenter関連と組み合わせて使う用です。

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="100%"
      android:duration="300" />
</set>

上記の場合enter_topと合わせると以下のようになります。

overridePendingTransition(R.anim.enter_top, R.anim.exit_bottom);

右へ抜けていく遷移(enter_leftと組み合わせ用)

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="100%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300" />
</set>

上へ抜けていく遷移(enter_bottomと組み合わせ用)

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="-100%"
      android:duration="300"/>
</set>

フェードイン

フェードイン、フェードアウトなどはデフォルトのアニメーションファイルでもありますが、時間など変更することが可能です。

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true">
  <alpha
      android:duration="200"
      android:fromAlpha="0.0"
      android:toAlpha="1.0" />
</set>

フェードアウト

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true">
  <alpha
      android:duration="200" 
      android:fromAlpha="1.0"
      android:toAlpha="0.0" />
</set>

フリップイン

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <scale
      android:interpolator="@android:anim/linear_interpolator"
      android:fromXScale="0.0"
      android:toXScale="1.0"
      android:fromYScale="0.7"
      android:toYScale="1.0"
      android:fillAfter="false"
      android:startOffset="200"
      android:duration="200" />
  <translate
      android:fromXDelta="50%"
      android:toXDelta="0"
      android:startOffset="200"
      android:duration="200"/>
</set>

こんな遷移です。

フリップアウト

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <scale
    android:interpolator="@android:anim/linear_interpolator"
    android:fromXScale="1.0"
    android:toXScale="0.0"
    android:fromYScale="1.0"
    android:toYScale="0.7"
    android:fillAfter="false"
    android:duration="200" />
  <translate
    android:fromXDelta="0"
    android:toXDelta="50%"
    android:duration="200"/>
</set>

scale_in

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true">
  <alpha
      android:duration="100"
      android:fromAlpha="0.0"
      android:toAlpha="1.0" />
  <scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="0.5"
    android:fromYScale="0.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="1.0" />
</set>

scale_out

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true">
  <scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.5"
    android:toYScale="0.5" />
  <alpha
      android:duration="1200"
      android:fromAlpha="1.0"
      android:toAlpha="0.0" />
</set>

さいごに

Androidの画面遷移は自由度がありかつ簡単に作れるので良いですね。

githubに上げた方が早かったかなと少し後悔しております。。

皆様のお役に立てれば幸いです。読んで頂きありがとうございました。

オススメ図書

コメント

タイトルとURLをコピーしました