サイト移転のお知らせ:http://techbooster.org/に移転しました

ViewFlipperでアニメーションする(ViewAnimator)

11月 16, 2010   //   by @mhidaka   //   ユーザインターフェース  //  2 Comments

ViewFlipperでレイアウトやViewを切り替えるでは基本的な使い方を紹介しました。
今回はViewFlipperへのAnimation設定方法を解説します。

アニメーションはViewFlipper独自の機能というわけではありません。ViewFlipperの親クラスであるViewAnimatorのメソッドにより実現しています。
android.widget.ViewAnimator を継承しているクラスは多くはありませんが、リファレンスでは以下の4つのウィジェットがあります(参照)。

  • ViewFlipper
  • ViewSwitcher
    • ImageSwitcher
    • TextSwitcher

以下ではViewFlipperをベースにViewAnimatorの機能を記載していますが、
上記4つのウィジェットは、いずれも今回紹介するアニメーションの設定方法が利用できます。

アニメーションする

アニメーションする方法はソースコードで指定する場合と、XMLでの指定の2通りがあります。
ソースコードからの指定で、アニメーションに必要なメソッドは以下の通りです。

  • ViewAnimator#setInAnimation(Animation inAnimation)
  • ViewAnimator#setOutAnimation(Animation inAnimation)

スクリーンにViewが表示されるタイミング/非表示になるタイミングでアニメーションを設定できます。

		case R.id.prevButton:
			viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
					android.R.anim.slide_in_left));
			viewFlipper.showPrevious();
			break;

上記サンプルでは、AnimationUtilsをつかってAndroid SDK標準で用意されているアニメーションを利用しています。
Android SDKのアニメーションのリソース一覧は以下の通りです。

Android.R.anim

リソース名 動きの説明
accelerate_decelerate_interpolator 開始と終了時に減速する
accelerate_interpolator 加速しながら
anticipate_interpolator 移動方向と逆に動いてから移動開始
anticipate_overshoot_interpolator 移動方向と逆に動いてから移動を開始、終了地点を行き過ぎて戻る
bounce_interpolator バウンド
cycle_interpolator 回転
decelerate_interpolator 速度を落としながら
fade_in フェードイン
fade_out フェードアウト
linear_interpolator 等速移動
overshoot_interpolator オーバーシュート(少し行き過ぎて戻る)
slide_in_left スライドイン(右)
slide_out_right スライドアウト(左)


上記以外にも、自分でカスタマイズしたアニメーションをViewに指定することもできます。
(カスタマイズの方法については、次回を予定しています)

XMLから設定する

ソースコードからAnimationを生成する以外にもXMLからもアニメーション指定が可能です

<ViewFlipper android:id="@+id/flipper" android:inAnimation="@android:anim/fade_in"
                android:layout_width="fill_parent" android:layout_height="fill_parent">
                <include android:id="@+id/firstlayout" layout="@layout/first" />
                <include android:id="@+id/secondlayout" layout="@layout/second" />
                <include android:id="@+id/thirdlayout" layout="@layout/third" />
</ViewFlipper>

サンプルコードでは、android:inAnimation属性で”fade_in”を指定しています。XMLへ記載するだけで、アニメーションが有効になるのでとても使い勝手のよい設定方法です。
アニメーションの種類については前述の表のすべてを利用できるほか、標準のリソースは@android:animで指定します。
ViewAnimatorに関するXMLの属性は以下の2つが用意されています。

  • android:inAnimation
  • android:outAnimation

関連する記事:

Sponsored Link

2 Comments

技術書新刊 発売中

アンドロイドアカデミアには、CIやテスト、互換検証など実務に生きるノウハウをあつめています

技術書新刊 発売中

Android Next!はAndroid 7.0に対応したはじめての技術書です!


The Web Explorer 2はCSSの中央寄せやWebAudioなど未来を読み解く一冊です


Revised TypeScript in DefinitelylandはTypeScript 2.0(β)に対応した解説書です。インストールから型定義まで幅広くサポートしています


技術書をかこう!はエンジニアらしい執筆環境を構築、HowTo本です