アクティビティ間のアニメーションを行う

こんにちはKID.Aです。

 

今回はAndroidでアクティビティ間のアニメーションを実装の説明をします。
API Lv21から追加されたActivityOptions#makeSceneTransitionAnimation(Activity activity, Pair… sharedElements)を使用します。

 

・APIの説明は以下のURLになります
http://developer.android.com/intl/ja/reference/android/app/ActivityOptions.html

このAPIを使用してアクティビティ間のアニメーションを作ることができます。

 

実装

遷移前と遷移後の2つのアクティビティを作成します。
コードは以下の通りです。

 

遷移前のアクティビティは「MainActivity.java」とします。

package jp.co.androidanimationtest;

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.ActivityCompat;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v4.util.Pair;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
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 textView = (TextView) findViewById(R.id.main_activity_text);
        final ImageView imageView = (ImageView) findViewById(R.id.main_activity_image);

        findViewById(R.id.main_activity_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Intent intent = new Intent(MainActivity.this, SecondActivity.class);

                ActivityOptionsCompat activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
                        MainActivity.this,
                        new Pair<View, String>(textView,
                                SecondActivity.VIEW_NAME_TEXT),
                        new Pair<View, String>(imageView,
                                SecondActivity.VIEW_NAME_IMAGE));

                ActivityCompat.startActivity(MainActivity.this, intent, activityOptions.toBundle());
            }
        });
    }
}

 

MainActivity.javaのレイアウト「main_activity.xml」になります。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context="jp.co.androidanimationtest.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/main_activity_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="First"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/main_activity_image"
            android:src="@mipmap/ic_launcher"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="next screen"
            android:id="@+id/main_activity_button"
            />

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

 

遷移後のアクティビティを「SecondActivity.java」とします。

package jp.co.androidanimationtest;

import android.os.Bundle;
import android.support.v4.view.ViewCompat;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.TextView;

public class SecondActivity extends AppCompatActivity {

    public static final String VIEW_NAME_TEXT = "text";
    public static final String VIEW_NAME_IMAGE = "image";

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

        TextView textView = (TextView) findViewById(R.id.second_activity_text);
        ImageView imageView = (ImageView) findViewById(R.id.second_activity_image);

        ViewCompat.setTransitionName(textView, VIEW_NAME_TEXT);
        ViewCompat.setTransitionName(imageView, VIEW_NAME_IMAGE);
    }

}

 

SecondActivity.javaのレイアウト「second_activity.xml」になります。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context="jp.co.androidanimationtest.SecondActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/second_activity_image"
            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:id="@+id/second_activity_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Second"/>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

 

MainActivityのActivityOptionsCompat.makeSceneTransitionAnimationでアニメーションを設定したActivityOptionsCompatを作ります。その後Pairで遷移前の画面のコンポーネントとSecondActivityのViewCompat.setTransitionNameで遷移先のコンポーネントをひも付けます。

ActivityCompat#startActivityの第三引数にアニメーションのオプションのbundleを設定すると画面遷移時に指定したアニメーションが起こります。

 

動作

 

起動すると以下の画面がでます。
SnapCrab_NoName_2016-1-25_10-0-4_No-00

 

ボタンを押下するとテキストが画像の位置が逆になるアニメーションが走ります。
テキストはSecondActivityのテキストの文言に切り替わります。
SnapCrab_NoName_2016-1-25_9-59-26_No-00
※画像はわかりにくいですが、テキストが「Fisrt」から「Second」に変わっています。
※また、テキストと画像の位置が逆になるアニメーションがおこなわれます。

 

アニメーション終了したら次の画面がでます。
SnapCrab_NoName_2016-1-25_9-59-16_No-00

 

以上、アクティビティ間のアニーメーションの説明でした。

 

 

KID.A

KID.A の紹介

楽して生きることと一発逆転を夢見ている、ちゃきちゃきのAndroiderです。 いろいろアプリを出しているのですが、いつもリリース後にターゲットユーザ数を2桁見誤っていたことに気付くので、残念でなりません。下方修正で、ヒットがでません。おしいです。 明日から本気出します。 よろしくお願いします。
カテゴリー: Android タグ: , , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です