Home > android > ActivityのOpenとCloseをアニメーションさせる

ActivityのOpenとCloseをアニメーションさせる

日本Androidの会のメーリングリストで「画面遷移時のアニメーション」というタイトルの投稿がありました。
質問内容は

あるアプリにて画面に設置したボタンを押すと現在表示されている画面を左スライド
させて別の画面に遷移させたいということを行ないたいのですが、Androidで実装は
可能でしょうか？

この質問に対し、

画面遷移時のアニメーションは、
ActivityのThemeの設定で可能です。

というメールが回答されました。

なにこれ？

知らなかったので、サンプル作ってみました。

動作

Activityを２つ（Activity0とActivity1）準備します。

Activity0

Activity0にはNextボタンがあり、それをタップするとActivity1を開きます。

Activity1

Activity1にはBackボタンがあり、それをタップするとActivity1を閉じます。

Activityの作成
Activity0

１つ目の画面のActivityは以下の通り、とてもシンプルです。

package com.adamrocker.android.test.activity;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
 
public class Activity0 extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity0);
        Button nextBtn = (Button)findViewById(R.id.next_bt);
        nextBtn.setOnClickListener(new OnClickListener(){
			public void onClick(View v) {
				Intent it =new Intent();
				it.setClass(Activity0.this, Activity1.class);
				startActivity(it);
			}});
    }
}

ボタンをタップしたらActivity1が開きます。

Activity1

コレに対してActivity1はボタンの動作を変更しただけです。

backBtn.setOnClickListener(new OnClickListener(){
    public void onClick(View v) {
        finish();
    }});

ボタンがタップされるとActivity1はfinishします。
サンプルなのでとても簡単な形にしました。

アニメーションするThemeの作成
Themeの定義

res/values/themes.xmlを作成して以下のように記述します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="android:Theme">   
		<item name="android:windowAnimationStyle">@style/Animation.Activity</item> 
    </style>
</resources>

一般的なActivityテーマに追記するためparentにandroid:Themeを指定しておきます。
ActivityのアニメーションはwindowAnimationStyle要素なので、コレを追記しています。
要素の値はstyles.xmlに記述します。

Styleの定義

res/values/styles.xmlを作成して以下のように記述します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="Animation" parent="android:Animation" />
	<style name="Animation.Activity" parent="android:Animation.Activity">
		<item name="android:activityOpenEnterAnimation">@anim/activity_open_enter</item>
		<item name="android:activityOpenExitAnimation">@anim/activity_open_exit</item>
		<item name="android:activityCloseEnterAnimation">@anim/activity_close_enter</item>
		<item name="android:activityCloseExitAnimation">@anim/activity_close_exit</item>
	</style>
</resources>

これも基本的な動作はAnimation.Activityを継承しますので、parentで指定しておきます。
今回はactivityのopenとcloseのアニメーションを変更するので、それに関係する４つの要素だけ修正します。
各要素を上から順に説明します。

  1. activityOpenEnterAnimationはstartActivityなどで開く対象のactivityのアニメーションを指定します。
  2. activityOpenExitAnimationはstartActivityの呼び元の閉じられるactivityのアニメーションを指定します。
  3. activityCloseEnterAnimationはfinishなどで閉じる事で表示されるactivityのアニメーションを指定します。
  4. activityCloseExitAnimationはfinishの呼び元の閉じるactivityのアニメーションを指定します。

今回はActivity0からstartActivityでActivity1を開きますので、
1はActivity1の動作を指定する事になります。
2はActivity0の動作を指定します。

またActivity1でfinishを呼出すと、
3はActivity0の動作を指定し、
4はActivity1の動作を指定することを意味します。
ちょっとややこしいですが、意味を理解すると腑に落ちると思います。

Animationの定義

上記の４つのアニメーションを定義していきます。
res/anim/activity_open_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/accelerate_interpolator">
	<translate android:fromYDelta="100%" android:toYDelta="0%"
		android:duration="@string/activity_animation_duration" 
		android:fillAfter="true"  android:fillEnabled="true"/>
</set>

res/anim/activity_open_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/accelerate_interpolator">
	<translate android:fromYDelta="0%" android:toYDelta="-100%"
		android:duration="@string/activity_animation_duration"
		android:fillAfter="true"  android:fillEnabled="true"/>
</set>

res/anim/activity_close_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/accelerate_interpolator">
	<translate android:fromYDelta="-100%" android:toYDelta="0%"
		android:duration="@string/activity_animation_duration"
		android:fillAfter="true"  android:fillEnabled="true"/>
</set>

res/anim/activity_close_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/accelerate_interpolator">
	<translate android:fromYDelta="0%" android:toYDelta="100%"
		android:duration="@string/activity_animation_duration"
		android:fillAfter="true"  android:fillEnabled="true"/>
</set>

４つもファイルを準備して大変ですが、殆ど同じ内容であることに気付きます。
違うのはfromYDeltaとtoYDeltaの値です。パーセント表示している事からも分かるように、
画面のY方向に移動するようにしています。

AndroidManifestの定義

最後に、作ったテーマをマニフェストに適用します。
AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.adamrocker.android.test.activity"
      android:versionCode="1" android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".Activity0"
                  android:label="@string/app_name0"
                  android:theme="@style/MyTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".Activity1"
                  android:label="@string/app_name1"
                  android:theme="@style/MyTheme">
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="4" />
</manifest>

各ActivityにMyThemeというテーマを指定しています。
これで、上で作ったテーマを適用しました。

動作

さっそく動作を確認してみます。

こんな風に、Activityが上下にスライドして入れ替わるようにできました。

注意

HOMEメニューの[設定]-[サウンド＆画面設定]-[アニメーション表示]をONにしておかないと、このエフェクトは動作しません。

ダウンロード

いつものようにソースコードを公開します。
自由にお楽しみ下さい。Android1.6以上で動作を確認しています。
ActivityAnimation.zip

おわりに

日本Androidの会のメーリングリストではこのような面白い内容のメールがやり取りされています。
ご興味がありましたら是非ご入会下さい。もちろん無料です。
日本Androidの会のホームページ
日本Androidの会のメーリングリスト

Themeを色々調べていると、パーツデザインも簡単に変更できそうな気がするので、
このあたりはデザイン部で調査したいと思います。
Androidのデザインに興味のある方はご参加下さい（助けて下さいw）。
Androidに触った事も無いって方でも問題ありません！

関連のありそうなエントリ

Comments:2

uzakuzak 10-01-25 (月) 23:44

すばらしい、すばらしい。
一昨日調べたけどわからなかったとこです。
これでiPhoneに並びましたねー

Gary Wang 10-02-08 (月) 18:26

Dear Sir, Thanks for your sharing! It’s helpful!

Comment Form
Remember personal info

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Trackbacks:1

Trackback URL for this entry
http://www.adamrocker.com/blog/289/activity_open_close_animation.html/trackback/
Listed below are links to weblogs that reference
ActivityのOpenとCloseをアニメーションさせる from throw Life
pingback from Twitter Trackbacks for throw Life - ActivityのOpenとCloseをアニメーションさせる [adamrocker.com] on Topsy.com 10-01-26 (火) 9:29

[…] Topsy Retweet Button var topsy_style = “small”; var topsy_order = “count,retweet,badge”; var topsy_url = “http://www.adamrocker.com/blog/289/activity_open_close_animation.html”; Add Topsy Retweet Button to your Blog or Web Site. WordPress  Web Sites […]

Home > android > ActivityのOpenとCloseをアニメーションさせる

Recent Entries
Twitter
Search
Feeds
Meta

Return to page top