最近、雨が多いですね。そんな時は家にこもって、プログラミングをするのが良いですよね。
今回は、Acitivity間の遷移をちょっとしたコーディングでかっこよくできる、Shared Elements遷移について紹介したいと思います。
※Android 5.0以降を前提としています。
Activity間の遷移アニメーションの一つです。2つのActivity間で共有（Share）されているビュー（Element）を、各Activity間でアニメーションさせて、遷移させることができます。Android Developerサイトにとても詳しく書かれていますので、こちらもご参照ください。
文章だけでは、よくわからないと思いますので、Master ActivityからDetail Activityに画像をアニメーションさせて、遷移するというシンプルな例で説明したいと思います。
Master ActivityとDetail Activity間で共有したいビューにandroid:transitionName 属性を追加し、値としては同じ文字列を指定します。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context="com.re_engines.sample.sharedelement.MasterActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/image_1"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="@drawable/icon"
android:transitionName="@string/master_to_detail_trans_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/image_2"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="@drawable/icon"
android:transitionName="@string/master_to_detail_trans_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/image_3"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="@drawable/icon"
android:transitionName="@string/master_to_detail_trans_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/image_4"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="@drawable/icon"
android:transitionName="@string/master_to_detail_trans_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context="com.re_engines.sample.sharedelement.MasterActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="@drawable/icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:transitionName="@string/master_to_detail_trans_name"/>
</android.support.constraint.ConstraintLayout>
上記の設定をしたら、あとはMaster ActivityからDetail Activityに遷移させる実装します。特にDetailActivity側には処理を実装する必要はありません。
Master Activityの一番上の画像をタップしたら、Detail Activityに遷移させる単純な実装です。
package com.re_engines.sample.sharedelement
import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.app.ActivityCompat
import android.support.v4.app.ActivityOptionsCompat
class MasterActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_master)
val imageView = findViewById(R.id.image_1)
imageView.setOnClickListener {
val intent = Intent(this, DetailActivity::class.java)
val options: ActivityOptionsCompat =
ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView,
getString(R.string.master_to_detail_trans_name))
ActivityCompat.startActivity(this, intent, options.toBundle())
}
}
}
アニメーションの設定については、下記のとおりstyles.xmlで指定できます。自分でアニメーションのxmlを記述すれば、カスタム遷移も可能です。今回は、SDKで提供されているものを指定しています。
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>
今回は、Shared Elements遷移の簡単なサンプルを紹介しました。
実際の開発では、アニメーションのカスタマイズや、画像をサーバから取得する場合の工夫など、色々と実装しなければならないこともあると思います。まずは、このサンプルでShared Elements遷移のイメージだけでも掴んでいただければ幸いです。