はじめに
最近、雨が多いですね。そんな時は家にこもって、プログラミングをするのが良いですよね。
今回は、Acitivity間の遷移をちょっとしたコーディングでかっこよくできる、Shared Elements遷移について紹介したいと思います。
※Android 5.0以降を前提としています。
Activity間の遷移アニメーションの一つです。2つのActivity間で共有（Share）されているビュー（Element）を、各Activity間でアニメーションさせて、遷移させることができます。Android Developerサイトにとても詳しく書かれていますので、こちらもご参照ください。
文章だけでは、よくわからないと思いますので、Master ActivityからDetail Activityに画像をアニメーションさせて、遷移するというシンプルな例で説明したいと思います。
layout xml
Master ActivityとDetail Activity間で共有したいビューに android:transitionName 属性を追加し、値としては同じ文字列を指定します。
| 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <?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> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?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に遷移させる単純な実装です。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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で提供されているものを指定しています。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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遷移のイメージだけでも掴んでいただければ幸いです。
