【Android】スムーズな開閉アニメーションを実現するExpandAnimatorというライブラリを作りました

デモ

まずは動作を。




この様に指定したViewの開閉を行う為のアニメーションライブラリを作りました。

ダウンロード

Androidのライブラリプロジェクトをgithubに公開しています。git cloneして下さい。

ExpandAnimator
https://github.com/sys1yagi/ExpandAnimator

構成は以下の通りです。

動画のデモはsampleの中に入っているサンプルプロジェクトを動作させたものです。

サポートバージョン

1.6〜

使い方

ExpandAnimatorの使い方は簡単です。

ライブラリプロジェクトを参照する

まずExpandAnimatorをライブラリプロジェクトとして参照します。

トリガとコンテナをlayoutXMLに定義する

開閉する対象となるViewと、開閉のトリガとなるボタンなどをlayoutXMLに書いておきます。
ここではボタンがトリガで色のついたLinearLayout部分がコンテナです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <Button
        android:id="@+id/trigger"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="5" />

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp" >

        <View
            android:layout_width="fill_parent"
            android:layout_height="300dp"
            android:background="#ffccddff" >
        </View>
    </LinearLayout>

</LinearLayout>

ExpandAnimatorを使う

開閉アニメーションを行う為にExpandAnimatorクラスを利用します。
ExpandAnimatorは開閉対象となるViewを内部に持ってアニメーション制御を行います。

下記コードの20行目でExpandAnimatorをnewしています。引数に開閉対象となるViewを渡しています。
第二引数は開閉アニメーション時に呼び出されるリスナを指定します。

41行目でアニメーションの時間を指定しています。
42行目ではアニメーションの為のインタポレータをセットしています。DecelerateInterpolatorはだんだんアニメーションのスピードが減速していくインタポレータです。

43行目でトリガとなるボタンにOnClickListnerをセットし、onClick(View)でExpandAnimatorのexpand(), unexpand()をそれぞれ呼び出しています。

package test.test.test.test.test;

import jp.dip.sys1.yagi.android.expandanimator.ExpandAnimator;
import jp.dip.sys1.yagi.android.expandanimator.ExpandAnimator.OnAnimationListener;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.DecelerateInterpolator;
import android.widget.Button;

public class ExpandSampleActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final Button trigger = (Button) findViewById(R.id.trigger);
        //ExpandAnimatorを初期化する
        final ExpandAnimator animator = new ExpandAnimator(findViewById(R.id.container), new OnAnimationListener() {
            @Override
            public void onUnexpanded(ExpandAnimator e) {
                trigger.setText("onUnexpanded");
            }

            @Override
            public void onStartUnexpand(ExpandAnimator e) {
                trigger.setText("onStartUnexpand");
            }

            @Override
            public void onStartExpand(ExpandAnimator e) {
                trigger.setText("onStartExpand");
            }

            @Override
            public void onExpanded(ExpandAnimator e) {
                trigger.setText("onExpanded");
            }
        });
        //アニメーション時間を指定
        animator.setDuration(1000);
        //インタポレータを指定
        animator.setInterpolator(new DecelerateInterpolator());
        
        //トリガを設定
        trigger.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (animator.isExpand()) {
                    //閉じる
                    animator.unexpand();
                } else {
                    //開く
                    animator.expand();
                }
            }
        });
    }
}

出来た

こ、こいつ動くぞ・・・！

使いどころ

わかりません。

ライセンス

Apache License 2.0です。