カブトムシの壺

消しゴム付き鉛筆

SharedElementTransition -ActivityからActivityへ-

Android

Activityから別のActivityに遷移する時に、遷移元と遷移先で同じ画像を使っているようであればSharedElementTransitionをさせて画面間の繋がりを持たせることを一回考えても、良いと思います。

f:id:namaninotiteti1026:20180416222604g:plain

SharedElementTransitionさせる

  • 方法は、とても簡単です。例えば、ある画面(MainActivity)の画像をタップし、違う画面(NextActivity)に遷移する場面を考えます。元のコードはこちらです。

遷移元(MainActivity)

  • 遷移元の画面から。まずSharedElementTransitionをしないで遷移するコードはこうなっています。

MainActivity.java

binding.baby.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        final Intent intent = new Intent(MainActivity.this, NextActivity.class);
        startActivity(intent);
    }
});
  • SharedElementTransitionをさせたい場合、こうなります。

MainActivity.java

final Activity activity = this;

binding.baby.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final Intent intent = new Intent(MainActivity.this, NextActivity.class);
                final ActivityOptionsCompat options = ActivityOptionsCompat
                        .makeSceneTransitionAnimation(activity, binding.baby, "shared_element_image");

                startActivity(intent, options.toBundle());
            }
        });
  • ポイントは2つです。

    • (1) ActivityOptionsCompat.makeSceneTransitionAnimation(activity, binding.baby, "shared_element_image");

      • makeSceneTransitionAnimationの第二引数に遷移元の画像のViewを。第三引数には共有要素の名前を付与します。

    • (2) startActivity(intent, options.toBundle());

      • startActivity()の第二引数に先ほど作ったoptionをBundle型に変換したものを入れます。

遷移先(NextActivity)

  • 次は遷移先の画面です。まず、遷移元の画像と紐づけるために以下のコードを書きます。どこでも良いのですが、実際だと画像をGlideで差し込む場所の近くとかが良いと思います。

NextActivity

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
     binding.baby.setTransitionName("shared_element_image");
}
  • これで作品詳細からギャラリー画面に遷移する時のSharedElementTrantisionが出来ました。

One more thing...

  • ただ、これだと、ギャラリー画面でバックボタンを押して作品詳細画面に戻るときはSharedElementTrantisionになっていません。なので、実装します。

  • 方法はとても簡単で、遷移先のActivityでバックボタンを押されたときの挙動として以下を追加するだけです。

@Override
public void onBackPressed() {
    ActivityCompat.finishAfterTransition(this);
}

ハマりポイント : 遷移元と遷移先の画像について

  • 実は、今仕事で開発しているアプリに上記のSharedElementTransitionを追加しようとしているのですが、個人的にハマったポイントを2つ紹介します。

画像の要素を遷移元と遷移先で合わせる

  • 例えば、遷移元が"画像に枠線を装飾したもの"であれば、遷移先も"画像に枠線を装飾したもの"にします。枠線の太さも合わせます。

  • しかし、画像の大きさは異なっていて、大丈夫です。アニメーションが良い感じにしてくれます。

画像に対してライブラリは使わない方が良い

  • 使うと、不自然な挙動になりました。
    • 例として、仕事で画像を良い感じに角丸にしてくれるライブラリなどを使っているのですが、それを使うと画像が欠けたような遷移になりました。

まとめ

  • ActivityからActivityへのSharedElementTransition自体は簡単なので、とりあえず入れてみて、あとは試しながら調整してみれば良いと思います。

参考にさせて頂いたサイト