[Androidアニメーション]Shared Elements遷移

1 はじめに
2 Shared Elements遷移とは
3 layout xml
4 Activity遷移
5 その他
6 さいごに

はじめに

最近、雨が多いですね。そんな時は家にこもって、プログラミングをするのが良いですよね。

今回は、Acitivity間の遷移をちょっとしたコーディングでかっこよくできる、Shared Elements遷移について紹介したいと思います。

※Android 5.0以降を前提としています。

Shared Elements遷移とは

Activity間の遷移アニメーションの一つです。2つのActivity間で共有（Share）されているビュー（Element）を、各Activity間でアニメーションさせて、遷移させることができます。Android Developerサイトにとても詳しく書かれていますので、こちらもご参照ください。

文章だけでは、よくわからないと思いますので、Master ActivityからDetail Activityに画像をアニメーションさせて、遷移するというシンプルな例で説明したいと思います。

layout xml

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">

<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>

<?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>

Activity遷移

上記の設定をしたら、あとは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()) } } }

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>

<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遷移のイメージだけでも掴んでいただければ幸いです。

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

[Androidアニメーション]Shared Elements遷移

はじめに

Shared Elements遷移とは

layout xml

Activity遷移

その他

さいごに

フォロー

アプリ情報